Multi Screen Starter with Expo

web demo: Expo Multi Screen Starter

Table of Contents

• Install & Build
• Features
• Linting
• Assets Used
• Device Learnings
• Release Notes
• Demo

Install & Build

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

Install: yarn or yarn install

Run Project Locally: yarn dev or yarn start

Features

• Expo SDK 42
• React Navigation v6
• Preloading/caching local assets
• SVG custom icon usage
• Checker for the iOS notch: iPhoneX, iPhoneXs, iPhoneXr, iPhoneXs Max

Linting

• run: yarn lint for a list of linting warnings/error in cli
• prettier and airbnb config
• make sure you have prettier package installed on your atom/vscode editor
• 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

Assets Used

• black rabbit icon was bought (royalty-free license)
• SVG Icons from icomoon

Device Learnings

ios: the notch on iPhoneX, iPhoneXs, iPhoneXr, iPhoneXs Max is 30px from top

Release Notes

version: 0.0.2 (current)

• upgraded to React Navigation v6
• upgraded to React Navigation v5
• upgraded to Expo SDK 42
• upgraded to Expo SDK 41
• upgraded to Expo SDK 40
• upgraded to Expo SDK 39
• upgraded to Expo SDK 38
• upgraded to Expo SDK 37
• upgraded to Expo SDK 36
• upgraded to Expo SDK 35
• upgraded to React Navigation v4
• upgraded to Expo SDK 34
• React Navigation Theme Support / Example Usage (themes docs)
• upgraded to React Navigation v3

version: 0.0.1

this starter for a multi screens/stack app is at a good state

• started with React Navigation v2
• preloading/caching local images (with splash loading screen)
• utility checker for the notch: iPhoneX, iPhoneXs, iPhoneXr, iPhoneXs Max
• simple jest tests
• svg usage

Demo