Search code examples
reactjsreact-nativereact-navigationasyncstorage

React Native StackNavigator initialRouteName


In React Native Navigation library 'react-navigation'

How could I set StackNavigator initialRouteName by AsyncStorage?

function getInitialScreen() {
    AsyncStorage.getItem('initialScreen')
        .then(screenName => {
            return (screenName)
                ? screenName
                : 'Login';
        })
        .catch(err => {});
}

const Navigator = StackNavigator({
    Splash: { screen: Splash },
    Login: { screen: Login },
    WebPage: { screen: WebPage }
}, {
    initialRouteName: getInitialScreen()
});

Solution

  • Full Solution from React Native Navigation on Restart:

    const Navigator = StackNavigator({
        InitialScreen: {
            screen: InitialScreen
        },
        Splash: {
            screen: Splash
        },
        LanguageStartup: {
            screen: LanguageStartup
        },
        Login: {
            screen: Login
        },
        Register: {
            screen: Register
        }
    }, {initialRouteName: 'InitialScreen'});
    
    export default Navigator;
    

    My Initial Screen

    import React, {Component} from 'react';
    import {connect} from 'react-redux';
    import * as GeneralPref from './../preferences/GeneralPref'
    import Log from './../utils/Log'
    import {AsyncStorage, View} from 'react-native';
    import * as Pref from './../preferences/Preferences';
    import {NavigationActions} from 'react-navigation'
    
    const TAG = 'InitialScreen'
    
    class InitialScreen extends Component {
        static navigationOptions = {
            header: false
          };
        componentWillMount() {
            Log(TAG+' Mount')
            const {navigate} = this.props.navigation;
            GeneralPref
                .getInitialScreen()
                .then(value => {
                    Log(TAG+' Initial',value)                
                    if (value != null) {
                        Log(TAG+' Initial',value)                                    
                        return value
                    } else {
                        Log(TAG+' No Initial','Splash')                                    
                        return 'Splash'
                    }
                })
                .then(screenName => this.props.navigation.dispatch(NavigationActions.reset({
                    index: 0,
                    actions: [NavigationActions.navigate({routeName: screenName})]
                })))
                .catch(err => {
                    Log(TAG+' Initial Error',value)                                
                    this.props.navigation.dispatch(NavigationActions.reset({
                        index: 0,
                        actions: [NavigationActions.navigate({routeName: 'Splash'})]
                    }))
                });
        }
        render() {
            return null;
        }
    }
    
    export default InitialScreen;
    

    then in Language Screen

    changeLanguageTo(language) {
        Log(TAG+'Change Language', "Change Language To: " + language.code);
        // Log(TAG, 'Current State');
        Log(TAG+' Language State', language);
        GeneralPref.setInitialScreen('Login');
    
        this
          .props
          .actions
          .changeLanguage(language);
          I18nManager.forceRTL(true);      
        // Immediately reload the React Native Bundle
        RNRestart.Restart();
      };