Expo TypeScript Tailwind RN: A React Native Starter Kit

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!


  • 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


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 NameKnown?Notes
@babel/coreKnownPeer dependency.
@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-expoKnownConfigure 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-analytics-amplitudeKnownUsed by AmplitudeScreen.
expo-apple-authenticationKnownUsed by AppleAuthenticationScreen.
expo-assetKnownUsed by AssetsScreen.
expo-avKnownUsed by AudioScreen.
expo-barcode-scannerKnownUsed by BarCodeScannerScreen.
expo-blurKnownUsed by BlurScreen.
expo-cameraKnownUsed by CameraScreen.
expo-cli Ensure everybody has the same version.
expo-constantsKnownUsed by the constants screens.
expo-facebookKnownUsed by FacebookScreen.
expo-fontKnownUsed by FontScreen.
expo-linear-gradientKnownUsed by LinearGradientScreen.
expo-local-authenticationKnownUsed by LocalAuthenticationScreen.
expo-sensorsKnownUsed by accelerometer and gyroscope.
prettier File formatter.
react-native-gesture-handlerKnownTODO: Where is this used?
react-native-mapsKnownUsed by MapsViewScreen.
react-native-reanimatedKnownTODO: Where is this used?
react-native-safe-area-contextKnownUse by react-navigation.
react-native-screensKnownUsed by react-navigation.
react-native-svgKnownUsed 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.

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

Download details:

Source: https://reactnativeexample.com/a-template-for-an-expo-react-native-app-with-tailwind-rn/


#reactnative #react 

Expo TypeScript Tailwind RN: A React Native Starter Kit
1.55 GEEK