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

@types/expo

expo

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

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 start

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.

yarn ios

Packages

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

expo-

| Package Name | Known? | Notes | | -------------------------------- | ------ | ------------------------------------------------ | | @react-navigation/native | | Used to navigate between screens. | | @react-navigation/stack | | Used to navigate between screens. | | 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-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 | 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. | | @babel/core | Known | Peer dependency. | | @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-cli | | Ensure everybody has the same version. | | prettier | | File formatter. | | 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

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