How can i pass the token to my child component react native - react-native

Question

I was having trouble with how to get and save my token in my login component to my app component that is done now, I can't log out in because I don't know how to get the token from the local storage and I don't know how to pass it to the other screen and catch it there. this is my app component :
const App = () => {
const [userToken, setUserToken] = useState(0);
useEffect(() => {
AsyncStorage.getItem('token').then((value) => {
if (value) {
setUserToken(value);
}
});
}, []);
return (
<NavigationContainer>
<Stack.Navigator>
{userToken == null ? (
<>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Restablecer" component={RestablecerPasswd} />
<Stack.Screen name="Registrar" component={RegistrarNewUsr} />
</>
) : (
<>
<Stack.Screen name="Perfil" component={Perfil} />
<Stack.Screen name="Configuraciones" component={CambiarPsswd} />
<Stack.Screen name="Dietas" component={Dietas} />
<Stack.Screen name="Datos" component={Data} />
</>
)}
</Stack.Navigator>
</NavigationContainer>
);
};
this is my profile component , this is where i want to catch the data that i get from a http request including the token that i use to enter this screen :
const Perfil = ({navigation}) => {
return (
<SafeAreaView>
<ScrollView>
<Text>Datos del Usuario</Text>
<Button title="Configuraciones" onPress={() => navigation.navigate('Configuraciones')}/>
<Button title="Mis Dietas" onPress={() => navigation.navigate('Dietas')}/>
<Button title="Datos Semanales" onPress={() => navigation.navigate('Datos')}/>
</ScrollView>
</SafeAreaView>
)
}
this is the way i get the token before enter the Perfil component screen:
const Login = ({navigation}) => {
const INITIAL_TOKEN = 0;
const token = useState(INITIAL_TOKEN);
const [email,setEmail] = useState('');
const [password,setPassword] = useState('');
const onEndGetDatos = (payload) => {
AsyncStorage.setItem('token', payload.data.token);
};
const sendDataL = () => {
Axios.post('http://3.90.64.114/api/v1/web/login',{
email,
password
}
).then(response => {
onEndGetDatos(response);
}).catch(err => {
alert(err);
})
}
useEffect(() => {
if (token !== INITIAL_TOKEN) {
AsyncStorage.setItem('token', `${token}`);
}
}, [token]);
return (
<SafeAreaView>
<ScrollView>
<TextInput placeholder="Usuario(email)"
onChangeText={email => setEmail(email)}
keyboardType = 'email-address'
/>
<TextInput placeholder="Contraseña"
secureTextEntry={true}
onChangeText={password => setPassword(password)}/>
<Button title="Entrar" onPress={sendDataL}/>
<Button title="Olvide mi Contraseña" onPress={() => navigation.navigate('Restablecer')}/>
<Button title="Soy Nuevo" onPress={() => navigation.navigate('Registrar')}/>
</ScrollView>
</SafeAreaView>
)
}

Answer 1

Your app is already getting the token from local storage when the app first renders here:
useEffect(() => {
AsyncStorage.getItem('token').then((value) => {
if (value) {
setUserToken(value);
}
});
}, []);
You can set a state value such as userLoggedIn to true and you can use that state value throughout your app.
When you want to logout, just clear the token value in local storage and set userLoggedIn state to false.
To pass this value to child components, you can use props or useContext() hook.