Error importing context with React native

Question

I'm learning to use context with React native, actually i'm following a blog where define how use createContext and useContext for Authentication logic in any app with React and Navigation. In the blog not define how to import the class AuthService and use the context in another component, and i have an error because the functions and the state not exist when i try to import them in my Navigator page or my Login page.

The code:

AuthService.tsx

import React, {createContext, useState, useEffect} from 'react'
import AsyncStorage from '@react-native-community/async-storage'

const AuthContext = createContext({});

const AuthProvider = ({ children }) => {
   const [auth, setAuthState] = useState({});

   useEffect(() => {
     GetLogedUser();
   }, []);

   const GetLogedUser=async()=> {
     try {
        let userData = await AsyncStorage.getItem("userloged"|| {});
        let data = JSON.parse(userData);
        return data;
      } catch (error) {
        console.log("Something went wrong", error);
        setAuthState({});
        return null;
      }
   }

   const LoginUser=async(AuthData)=>{
     try{
        //many code omited...
        if(response.status==200 && json.response === true && json.error===""){
            let authUser = {id : json.data.id, nick: AuthData.nick, services: json.data.services };
            await AsyncStorage.setItem("userloged", JSON.stringify(authUser));
            setAuthState(authUser);
            return "OK";
        }
        else{
            return "Error response Login Service - "+ json.error; 
        }
     }catch(err){
        return "Error connecting or timeout service."; 
     }
   }

   return (
     <AuthContext.Provider value={{ auth, LoginUser }}>
      {children}
     </AuthContext.Provider>
   );
 }

 export { AuthContext, AuthProvider };

Navigator.tsx (How use the auth imported state?)

import React, {useContext} from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import Login from '../Views/Login'
import Home from '../Views/Home'
import {AuthContext} from '../Services/Auth/AuthService'

const Stack = createStackNavigator();

const Navigator= (props) =>{
  const { auth } = useContext(AuthContext);

  return (
        <Stack.Navigator>
            {auth.id ? // <-- error undefined is not and object
                (<>    
                    <Stack.Screen name="Home" component={Home} options={{headerShown:false}}/>
                </>)
            :   (<>  
                    <Stack.Screen name="Login" component={Login}  options={{headerShown:false}}/>
                    <Stack.Screen name="Register" component={Register} options={{title:'Register.'}}/>                        
                </>)
            }
        </Stack.Navigator>
    );
 }

 export default Navigator;

Login.tsx (How use the LoginUser imported function ???)

//..another imports omited
import {AuthContext} from '../Services/Auth/AuthService'

const Login=(props)=>{
   const {LoginUser} = useContext(AuthContext); //<---how here?
   const {navigation, users} = props;
   const [userName, setUserName] =useState('');
   const [password, setPassword] =useState('');

   return(
    <View style={styles.container}>
            <View style={styles.middleContainer}>
                <TextInput placeholder="Username..." defaultValue={userName} onChangeText={txt=> setUserName(txt)} style={styles.txtInputsLog}/>
                <TextInput placeholder="Password..." defaultValue={password} onChangeText={txt=> setPassword(txt)} style={styles.txtInputsLog} secureTextEntry={true}/>
                <Button primary style={styles.btnLogin} onPress={async ()=> await ValidateFields(userName, password) ? navigation.navigate('Home') : null}> 
                    <Text style={styles.txtLogin}>Login</Text> 
                </Button>            
            </View>     
    </View>
  );

  async function ValidateFields(userName:string, password:string){
    let result = await LoginUser({nick:userName, password: password}); //<--Error LoginUser is not a function
    return result==="OK" ? true: false;
  }
}

export default Login;

filipemelo032 · Answer 1 · 2021-04-24T01:19:26.950

1

could you show where you import and use your <AuthProvider />?

It seems that you are not using your <AuthProvider /> component. So you can try by wrapping your Navigator component with your <AuthProvider />, like so:

<AuthProvider>
    <Navigator />
</AuthProvider>

In your code example, you simply created an AuthProvider hook, imported it's data but you were not putting the code into the context. So in order to the context to fully work, your components that need that context need to be wrapped in it.

edited Apr 24 '21 at 01:19

answered Apr 24 '21 at 01:11

filipemelo032

133
8

In both pages i import like: import {AuthContext} from '../Services/Auth/AuthService' – Dr oscar Apr 24 '21 at 01:14
You need to wrap your code with your ``, and you get the access to the data with your `AuthContext`. In other words, you need to wrap your code with the `` component – filipemelo032 Apr 24 '21 at 01:16
Can you put an answer like an example? please – Dr oscar Apr 24 '21 at 01:18
But how can i use the function LoginUser in login page ? – Dr oscar Apr 24 '21 at 01:26
Since the login page is instantiated within the Navigator component, it will presumably work. – filipemelo032 Apr 24 '21 at 01:29
In the code you can see how in the login button i call another function for after call the LoginUser function inside, if i wrap the – Dr oscar Apr 24 '21 at 01:41
You don't need to wrap every single component. Think of it as a tree: You wrapped your Navigator; The Navigator has your Login page in it; Your Login Page has your button. Since each of them are within the other, they all bellong to the same context – filipemelo032 Apr 24 '21 at 01:57
Answering you question, you can simply create a new function (eg.: submit) and assign it to your button's onPress (`onPress={submit}`), and finally, within your submit function, you add whatever flux you want – filipemelo032 Apr 24 '21 at 02:00
But the properties and the function not exists: https://ibb.co/z8h88Y2 – Dr oscar Apr 24 '21 at 02:08

Error importing context with React native

1 Answers1