dailylog 07-25-21

205. Styling Odds and Ends

TASKS:

1. Hide header
2. Vertically center
   1. Do this by changing fragment to view

const styles = StyleSheet.create

SignupScreen.navigationOptions = () = > {

}

206. Input Props

1. add setState

label=”Password” value={password} onChangeText={setPassword} autoCapitalize=”none” autoCorrect={false}

1. secureTextEntry

207. The Auth Context

Use Auth Provider {isSignedIn: true}

src/context/createDataContext.js

export default reducer actions, default Value

IN ENGLISH: We are making a context and a provider. We are passing children to the context. We are attaching dispatches to these actions. Why are we looping through the actions?

PROVIDER: PROVIDES the data to each child component CONTEXT: How each child component can get ACCESS to the data/information??

---

src/context/AuthContext.js

import createDataContext

export const {Provider, Context } = createDateContext()

Which accepts the authReducer, {} and { isSignedIn: false } as arguments

above that

we make our authReducer. it’s a function that accepts state and action inside our function, we have our switch statement it accepts (action.type) which is followed by an object with our actions. Since we have no actions currently, we are going to default: return state

---

Now, we need to add this newly created provider to our overall app! import {Provider as AuthProvider } from src/context/authcontext

we are going to export default function

this is going to return our App surrounded by AuthProvider

BUT FIRST, we are going to turn our original export default into a variable of it’s own – App

208. What’s the Context Doing?

so we are going to add three things to our AuthContext

1. Signup
2. Signin
3. Signout

We are also going to make each of these dispatches available to our provider

Before doing anything with axios (next section) we are going to simply stub these out

for example:

signup is a function that takes a dispatch and returns a function (that takes object with both email and password) that… will eventually do some fun axios stuff.

209. Axios Setup

npm install axios src/api/tracker.js

import axios export default axios.create({ baseURL: ‘’ })

TO RUN NGROK WITHOUT GLOBAL INSTALLATION

npx ngrok http 3000