Can a stack navigator have 2 different routes in react navigation

Question

My project structure looks like this :

Tab navigator
|-Tab1
|-Tab2
    |-stack navigator
          |-login
              |
             screen1
              |
             screen2
               |
             screen3
|-Tab3
|-Tab4

I want my stack navigator route to start from screen1 once I enter the username and password for login screen. Is there any way we can achieve this? Can we reroute/change the routes of stack navigator?

Answer 1

Use SwitchNavigator to change/reroute the screen stack

I'm not using React Navigation V2, you should check the doc if you need more information about RNV2

Here's an example TODO:

in router.js (handling screen):

const Tab =  TabNavigator({
  Customer : {
    screen: Customer,
  }
});

const TabLogged =  TabNavigator({
  Handyman: {
    screen: Handyman,
  }
});
// here's the key to handle which account is logged
export const Check = SwitchNavigator({
  Auth: Auth,
  Account1: Tab,
  Account2: TabLogged
})

create Auth.js to check which account is logged or not:

class foo extends React.component{
  componentWillMount(){
    this.props.navigation.navigate(usertype == "isLoggedIn" ? 'Account2' : 'Account1');
  }

  render(){
    <View>
      <ActivityIndicator size="large" color="#0000ff" />
      <StatusBar barStyle="default" />
    </View>
  }
}

and in your app.js or index.js :

class app extends Component{
  render() {
    return <check/>;
  }
}