I've been trying to implement an authentification system for my app using JWT. However when I can't figure out how can I pass my state through a navigator? This state will contain the token for the user. What I did is a easy system that check if the user has a token or not if he does not have one it will be redirected to the login page where he can either log in or register. If he choses to login I give him a token and then he's redirected to my homescreen using the Tab navigator I created. I know how to pass function through props using the navigator however I don't know when it comes to state. Here are some parts of code This is the logic of authentification part
newJWT(jwt){
this.setState({
jwt:jwt
});
}
render(){
if(this.state.isLoading){
return(
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Loading size={'large'} />
</View>
);
}
else if(!this.state.jwt){
return(
<Auth newJWT={this.newJWT}
/>
)
}
else if (this.state.jwt){
return(
<Navigator
deleteJWT={this.deleteJWT}
/>
)
}
}
}
const TabNavigator = createBottomTabNavigator(
{
Home: {screen : HomeScreen,
navigationOptions :{
tabBarIcon : ({tintColor}) => (
<Icon
name='star'
type='material'
size={22}
color={tintColor}
/>
)
}
},
Profile: {screen : ProfileScreen,
navigationOptions :{
tabBarIcon : ({tintColor}) => (
<Icon
name='pencil-outline'
type='material-community'
size={22}
color={tintColor}
/>
)
}
}
},
}
);
const Nav = createAppContainer(TabNavigator)
export default class Navigator extends React.Component{
render(){
return <Nav
screenProps={{deleteJWT : this.props.deleteJWT}}
/>
}
}
Here I am I tried to pass it as a props but it does not work... I don't really know what to do here. I know that if I pass it through a direct component such as my homescreen it works but I would lose my navigator.
Thanks in advance