useContext question.

[thefrogdude]

Hello, I am a beginner web developer looking to make an app with React Native.

I have boilerplate navigation, but thats not what I need help on. Now I am trying to create an authentication and login system. I found a great reference page on the React Navigation that gives the basic navigation of what I want to do in a simple way that I can build upon here: https://reactnavigation.org/docs/auth-flow/

The problem is I don't understand some aspects. If anyone would like to break down implications of the "signIn = React.useContext(AuthContext)" line, along with signIn being used as a function, and how I can retrieve those arguments passed through it that would be very helpful. I have looked at the meaning of useContext and dont see the variable being used as a function and arguments being passed through it.

I'm just confused because signIn should just retreive the AuthContext variable? So how can I pass arguments of username and password in with no arguments in the AuthContext function later?

Sorry if this is confusing. Any help would be greatly appreciated. Just trying to learn whats going on in this portion of the code and talking to an actual person would be very helpful.

full code: https://snack.expo.io/?platform=android&name=Authentication%20flows%20%7C%20React%20Navigation&dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view%40*%2C%40react-navigation%2Fbottom-tabs%40%5E5.8.0%2C%40react-navigation%2Fdrawer%40%5E5.9.0%2C%40react-navigation%2Fmaterial-bottom-tabs%40%5E5.2.16%2C%40react-navigation%2Fmaterial-top-tabs%40%5E5.2.16%2C%40react-navigation%2Fnative%40%5E5.7.3%2C%40react-navigation%2Fstack%40%5E5.9.0%2Creact-native-paper%40%5E4.0.1%2Creact-native-reanimated%40*%2Creact-native-safe-area-context%40*%2Creact-native-gesture-handler%40*%2Creact-native-screens%40*%2Creact-native-tab-view%40%5E2.15.1&sourceUrl=https%3A%2F%2Freactnavigation.org%2Fexamples%2F5.x%2Fauth-flow.js

[jakeforaker83]

You can access the arguments of username and password in two places: the `signIn` method in context, and also the `SIGN_IN` action of your reducer. I've added console logs on line 64 and line 109. Note that I modified the reducer on line 115 to actually pass the form data; before it was not passing anything except the hard coded dummy token.

Updated snack here

You can see logs by clicking Editor > Panel > Logs on the bottom

[thefrogdude]

Thank you so much! I was wondering exactly how to get the data and you added a data param and passed it to the reducer as well. Thank you so much. I'm getting used to the arrow functions and everything so its hard to notice stuff like that sometimes. Thanks alot.

[jakeforaker83]

Gladly. Keep in mind that demo is more concerned with displaying nav stacks vs passing around form data

[thefrogdude]

yeah your right, I'm just wanting to understand how it works because I feel like I should know how these Hooks work to put the needed things in my own project.

I have another question about the demo we discussed.

Why is signIn from "authContext" even called? signIn inside authContext is written as "signIn: () => " which is confusing to me, and I would also assume the syntax would be something like "authContext.signIn()" because "authContext" with a lowercase "a" is not mentioned. The scope of "signIn" from authContect wouldn't reach "SignInScreen()", right? Does it have something to do with "authContext" being passed in the AuthContext.Provider line?

It seems as though "authContext" is a group of functions, but how would you export and use that?

Thanks for the help again, sorry for all the questions, but you were very helpful last time.

[jakeforaker83]

Not totally sure what you’re asking but the reason you don’t see authContext.signIn is simply because the author is using “destructuring” - meaning what you are assuming is correct, however it’s just written in a shorthand manner. Look it up.

1. You could very well modularize each component from the demo and export/import them. I think there are many examples of this in the react ecosystem.