How to authorize users across the react-navigation app?

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.