React Native StackNavigator initialRouteName

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.


I’ve also had this problem and currently the only good solution is the following example:

 const RootNavLogged = StackNavigator({
     ...
  },{
     initialRouteName : 'Home'
  });

  const RootNav = StackNavigator({
     ...
  },{
     initialRouteName : 'Login'
  });

  class App extends Component {
     render(){
         if (this.props.userLogged == true ){
            return (
               <RootNavLogged/>
            ) 
          } else {
             return(
                <RootNav/>
              ) 
          }
     }
 }