React native Multi Screen Starter with Expo

Multi Screen Starter with Expo

react native / expo / react navigation v4.

Out of the Box

• Expo SDK 40
• React Navigation v4 & Theme Support!
• iOS 13 Appearance Support (with react-native-appearance)
• Preloading/caching local assets
• SVG custom icon usage
• Checker for the iOS notch: iPhoneX, iPhoneXs, iPhoneXr, iPhoneXs Max

install

First, make sure you have Expo CLI installed: npm install -g expo-cli

Install: yarn or yarn install

Run Project Locally: expo start or yarn dev

development on a physical device

• first, your machine and physical device should be on the same wifi connection
• make sure you have Expo CLI installed globally, if not run:
  • npm install -g expo-cli
• then navigate to this project's directory on your machine and run:
  • yarn dev or expo start
• now download the Expo Client app on your preferred physical device:
  • Android: Google Play
  • Apple: App Store
• scan the QR code generated when this project build started (expo start)
  • android users: the QR scanner is built within the Expo Client app! ?
  • ios 11 and later: you can open your camera app to scan the QR code, apple made the Expo peeps remove the QR scanner from the app for some reason... ?
  • ios 10 and below: i wrote about a work around to get expo running on older iOS devices
• having issues? check the installation page for any pitfalls you may have.

linting

• run: yarn lint for a list of linting warnings/error in cli
• prettier and airbnb config
• make sure you have prettier package installed:
  • prettier for atom
  • prettier for vscode
• then make sure to enable these options (packages → prettier):
  • eslint integration
  • stylelint integration
  • automatic format on save (toggle format on save)
• be aware of the .prettierignore file

GitHub