React Native using Expo and Typescript with Tailwind CSS

This is a React Native demo app using the Expo framework and written in TypeScript. It uses the managed workflow and uses Tailwind for some styling.

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 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 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 -c 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