React Native using Expo and Typescript
This is a React Native demo app using the Expo framework and written in TypeScript. It uses the managed workflow.
This repo used to also contain a type definition file for Expo. That work was merged into the @types/expo package. @types/expo is now deprecated in favor of definition types includes with the expo package. TypeScript FTW!
Prerequisites
- Node.js.
- Yarn.
- 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.
yarn startIf 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.
yarn iosPackages
List of the packages that this project uses. I really wish it was possible to write comments in package.json.
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.
| Package Name | Known? | Notes |
|---|---|---|
| @babel/core | Known | Peer dependency. |
| @react-navigation/native | Used to navigate between screens. | |
| @react-navigation/stack | Used to navigate between screens. | |
| @types/react | Known | |
| @types/react-native | Known | |
| @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 | Linter. | |
| 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 | Known | |
| 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. |
| prettier | File formatter. | |
| react | Known | |
| react-native | Known | |
| 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. |
| typescript | Known |
Troubleshooting
If you have issues running the app it may help clearing the React Native packager cache. Use the command yarn expo start --clear to do this.
More tips found in this thread on the Expo Forum.
Automated Tests
This project hasn't been set up with automated tests. The blog post [setting up tests for React-Native-Expo-Typescript] can probably help.
Similar Projects
- expo-ts-example, the basis for this project
- TypeScript-React-Native-Starter
- react-native-typescript-starter