dailylog 07-24-21

Section 15: In-App Authentication

1. Unzip files
2. npm install
3. cloud.mongodb.com
4. create free cluster
5. Update mongoURI in src/index file
6. npm run dev
7. control c shuts down

npx expo-cli init urn-tracks --npm

NOTES FROM A PAST LIFE

I kept getting this infuriating error on my phone when I would scan the QR code – “The experience you requested uses Expo SDK v(null), but this copy of Expo Client…” etc.

I did A LOT of googling and tried many different things but ultimately what ended up working was

1. COMPLETELY uninstalling expo-cli npm -g uninstall expo-cli --save && yarn global remove expo-cli

2. Removing all traces cd ~ && rm -rf .expo

3. Starting at the top of this document and going through it all over again. This time, I also followed Step 5 exactly (and put the folder into ~/ … which makes my skin crawl) because previously I had it in my own “PROJECTS” directory. So technically I changed two things and I have no idea which one is responsible for everything magically working again…?

197. Navigation Design

Stack Navigator Bottom Tab Navigator Switch Navigator Drawer Navigator

Sign up should be using switch navigator

GET EXPO QR CODE TO WORK ON PHONE

npm install react-navigation

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install react-navigation-stack @react-native-community/masked-view

npm install react-navigation-tabs

expo r -c

199. a LOT of Boilerplate

1. Make src directory in same level as node_modules
2. make screens directory inside it
3. Make a file for each screen (e.g. SignupScreen.js)

Delete everything from App.js

import AccountScreen from ‘./src/screensAccountScreen

200. Navigator Hookup

NOTE: Course uses react-navigation 4, switched to react-navigation 5 using this code

CODE His Github

1. Write import statements
2. Create our navigation flow
3. loginFlow
4. mainFlow

LOGIN FLOW:

• switch navigator
  • SignUp
  • SignIn

MAIN FLOW:

• bottom tab navigator
  • stackNavigator
    • TrackList
    • TrackDetail
  • TrackCreate
  • Account

202. React Native Elements

1. in Signup
2. remove Text and Button from react-native
3. import Text Input Button from react-native-elements

TEXT h3 INPUT label=”Email IPUT label=”PASSWORD BUTTON self closing title=”SignUp”

1. Add Spacer Helper
2. Components in src
3. Spacer.js
4. import View, StyleSheet from react-native

const Spacer = ({ }) export default Spacer