React Native using Expo and Typescript with Tailwind CSS
This repo used to also contain a type definition file for Expo. That work was merged into the
@types/expo is now deprecated in favor of definition types includes with the
expo package. TypeScript FTW!
- Optional: XCode, since it includes the iOS Simulator. XCode only runs on Macs.
- Optional: Android Studio, since it includes the Android Virtual Device Manager.
You don’t need to install any global npm packages for this repo.
expo-cli is included as a dev dependency.
Warnings When Installing Packages
There are a surprising amount of of warnings when installing Node packages, because of peer dependencies not being correct. My guess is that the Expo team has a tough time getting all the added React Native libraries to play well together. This app seems to run fine, so I believe it’s safe to ignore the warnings.
Running the App
Start the local server. This will give you a QR code that you can scan using the Expo Client app on your mobile device.
If you’re on a Mac and have Xcode installed, you can run the app using the iOS Simulator with the following command. I am sure you can do something similar with Android.
List of the packages that this project uses. I really wish it was possible to write comments in
When upgrading Expo,
expo-cli will also upgrade the versions of all the package that it knows about. This list naturally includes all the
expo- packages, but also a few more. Do not change the version numbers of the known packages. Unknown packages may be upgraded. More info in my blog post Upgrade an Expo App.
|@react-navigation/native||Used to navigate between screens.|
|@react-navigation/stack||Used to navigate between screens.|
|@typescript-eslint/eslint-plugin||Add TypeScript support to ESLint.|
|@typescript-eslint/parser||Add TypeScript support to ESLint.|
|babel-preset-expo||Known||Configure Babel for Expo.|
|eslint-config-prettier||Prettier rules for ESLint.|
|eslint-plugin-prettier||Run prettier through ESLint. TODO: Is this used?|
|eslint-plugin-react||React rules for ESLint.|
|expo-analytics-amplitude||Known||Used by AmplitudeScreen.|
|expo-apple-authentication||Known||Used by AppleAuthenticationScreen.|
|expo-asset||Known||Used by AssetsScreen.|
|expo-av||Known||Used by AudioScreen.|
|expo-barcode-scanner||Known||Used by BarCodeScannerScreen.|
|expo-blur||Known||Used by BlurScreen.|
|expo-camera||Known||Used by CameraScreen.|
|expo-cli||Ensure everybody has the same version.|
|expo-constants||Known||Used by the constants screens.|
|expo-facebook||Known||Used by FacebookScreen.|
|expo-font||Known||Used by FontScreen.|
|expo-linear-gradient||Known||Used by LinearGradientScreen.|
|expo-local-authentication||Known||Used by LocalAuthenticationScreen.|
|expo-sensors||Known||Used by accelerometer and gyroscope.|
|react-native-gesture-handler||Known||TODO: Where is this used?|
|react-native-maps||Known||Used by MapsViewScreen.|
|react-native-reanimated||Known||TODO: Where is this used?|
|react-native-safe-area-context||Known||Use by react-navigation.|
|react-native-screens||Known||Used by react-navigation.|
|react-native-svg||Known||Used by SvgScreen.|
If you have issues running the app it may help clearing the React Native packager cache. Use the command
yarn expo start -c to do this.
More tips found in this thread on the Expo Forum.
This project hasn’t been set up with automated tests. The blog post [setting up tests for React-Native-Expo-Typescript] can probably help.
- expo-ts-example, the basis for this project