Can I use conditionals in Stack Navigator?

Question

I am new in this so I want to understand if I can use conditionals if and else inside navigate parameters.

So before Stack Navigator I was using the following code inside app.js

render() {
    var renderMainView = () => {
      if (this.props.user_id) {
        return (
          <Main />
        );
      } else {
        return (
          <Login />
        );
      }
    }
    return (
      <View style={{flex: 1}}>
        <StatusBar barStyle="light-content"/>
        {renderMainView()}
        <AlertContainer/>
      </View>
    )
}

Now it looks like this

render() {
    return (
      <View style={{flex: 1}}>
        <StatusBar barStyle="light-content"/>
        <AppNavigator />
        <AlertContainer/>
      </View>
    )
  }

Inside Login.js it used to look like this

<TouchableOpacity onPress={handleSubmit(_signIn)} style={{margin: 10, alignItems: 'center'}}>
  <Text style={{
   backgroundColor: 'steelblue', color: 'white', fontSize: 16,
   height: 37, width: 200, textAlign: 'center', padding: 10
}}>Login</Text>

My question now is how shall I pass inside onPress={() => this.props.navigation.navigate('Main')}, before going to Main screen, first call this handleSubmit(_signIn) and then check this.props.use_id

Answer 1

You can use SwitchNavigator To achieve desired behavior

here's the example code:

const AppStack = StackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = StackNavigator({ SignIn: SignInScreen });

export default SwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

SwitchNavigator reference

SwitchNavigator(RouteConfigs, SwitchNavigatorConfig)

expo example