yarn add react-navigation react-native-gesture-handler react-native-reanimated react-native-screens@^1.0.0-alpha.23 @react-native-community/async-storage lodash
npm i -S react-navigation react-native-gesture-handler react-native-reanimated react-native-screens@^1.0.0-alpha.23 @react-native-community/async-storage lodash
cd ios && pod install && cd ..
-
Create
src/
and move App.js to it -
Setup eslint and eslint plugins (copy in from RunThrough project)
-
eslint plugins we use:
yarn add -D eslint-config-airbnb eslint-import-resolver-react-native eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-lodash eslint-plugin-react eslint-plugin-wyze reactotron-react-native
npm i -D eslint-config-airbnb eslint-import-resolver-react-native eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-lodash eslint-plugin-react eslint-plugin-wyze reactotron-react-native
-
Add React Navigation (and associated libraries)
- Architecture Redesign possibly coming!
-
Setup initial routing
- Exported constants object for screen keys
- Switch Navigator (Usually also Stack Navigator - now a separate library)
-
Setup the page view and page view indicator (maybe copy paste and go through this code)
-
Hooks! (we use a lot of them)
-
Navigate to home screen on "Let's Go!"
-
Simple persistence to know whether the user has been through onboarding
- Context API, esp. with hooks
- We typically use Realm as our persistence option instead of AsyncStorage, has been pretty great so far.
-
Navigation setup to have a dynamic initial route
- Downside of time-to-interaction (TTI) goes down for the read time
-
Setup Reactotron to have a clear hasOnboarded flag helper for development
- Fast Refresh (Great, just want stateful refresh)
- Auto-linking as of 0.60
Notes:
npm i
on vpn, npm run android
off vpn,
Either:
- reset reactotron, and run ios and android after setup
- OR it's probably the device select in reactotron