How to authorize users across the react-navigation app? - react-native

Question

I have 2 groups of screens in my app.
1) AuthorizedScreens
2) NotAuthorizedScreens
As soon as the app loads I want to check if the user is logged in or not? If the user is logged in, the app loads AuthorizedScreens and if not, It loads NotAuthorizedScreens. How do i achieve this? I have included a sample of not working code but I guess that's how it could be!
App.js
import React from 'react';
import { AsyncStorage } from 'react-native';
import { Provider } from 'react-redux';
import { DrawerNavigator, StackNavigator } from 'react-navigation';
import store from './store';
export default class App extends React.Component {
async componentWillMount() {
const token = await AsyncStorage.getItem('facebook_token');
}
render() {
const AuthorizedScreens = DrawerNavigator(...
const NotAuthorizedScreens = DrawerNavigator(...
return (
<Provider store={store}>
{ (this.token) ? <AuthorizedScreens /> : <NotAuthorizedScreens /> }
</Provider>
);
}
}
Note!
I have an action creator that checks if the user is logged in. But I couldn't connect it to the App component, therefore I decided to use AsyncStorage to store a facebook_token, and if the token exist means user is logged in and if not the user is not...
"dependencies": {
"expo": "^20.0.0",
"react": "16.0.0-alpha.12",
"react-native": "https://github.com/expo/react-native/archive/sdk-20.0.0.tar.gz",
"react-navigation": "^1.0.0-beta.11",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
}

Answer 1

I have solved this issue by setting a state in componentWillMount and calling it from return.
import React from 'react';
import { AsyncStorage } from 'react-native';
import { Provider } from 'react-redux';
import { DrawerNavigator, StackNavigator } from 'react-navigation';
import store from './store';
export default class App extends React.Component {
state = {
login_token: '',
};
async componentWillMount() {
const token = await AsyncStorage.getItem('facebook_token');
this.setState({ login_token: token });
}
render() {
const AuthorizedScreens = DrawerNavigator(...
const NotAuthorizedScreens = DrawerNavigator(...
return (
<Provider store={store}>
{ (this.state.login_token) ? <AuthorizedScreens /> : <NotAuthorizedScreens /> }
</Provider>
);
}
}
I have solved this problem, but I am not sure if I did it the right way! Because, Redux is in charge of my state management, but I manually used the react state management by setting state.
I will appreciate your inputs if you know a better way.