React Native StackNavigator initialRouteName

Question

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()
});

Answer 1

Changing InitialRouteName with multiple Route depending upon your requirement. I have got it working this way.

create router file import all your screens.

export a stateless function call it createRootNavigator with params as (load="<Your initial screen>")

export const createRootNavigator = (load="<Your Initial Screen>") => {
  return stackNavigator({
     Initialize: {
       screen: Initialize,
     },
     Main: {
      screen: Main,
     },
     { 
       initialRouteName: load
     }
  })
}

In your main app,

state = {
  load: "<Your Initial Screen>"
}

eg:

state = {
   load: "Initialize" // value is string
}

Set the state accordingly in componentDidMount() method. And finally render new layout.

render() {
  const Layout = createRootNavigator(this.state.load);
  <Layout />
}

The above method worked fine for me. Hope it helps somebody.