Single Screen Starter with React Native / Expo

Table of Contents

• Install & Build
• Features
• Testing with Jest
• 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
• iOS, Android and PWA (Web App)
• Test with Jest
• PropTypes

Testing with Jest

• yarn test
  • "jest --watch --coverage=false --changedSince=origin/master"
• yarn testDebug
  • "jest -o --watch --coverage=false"
• yarn testFinal
  • "jest"
  • this will generate
    • a report within the console
    • a html code coverage report within /coverage/
      
• yarn updateSnapshots
  • "jest -u --coverage=false"

helpful notes: for animation and delays, make sure you add: jest.useFakeTimers();

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)

Device Learnings

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

Release Notes

version: 0.0.2 (current)

• 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 Expo SDK 34
• upgraded to Expo SDK 33
• upgraded to Expo SDK 32
• upgraded to Expo SDK 31
• started with Expo SDK 30

version: 0.0.1

this starter app is at a good state

• menu screen that slides in from the left or the right (native StatusBar fades out on open)
• persistant <InfoBar />
• <ProgressBar /> within <InfoBar />, that animates up by 10% each menu open (for example on usage)

Demo

below is the inspiration for this single screen app starter functionality with side by side comparison