'Insert' (login) screen before tabnavigator routing

Hello
I am looking for help to insert a screen (login) before entering in the tab navigation system (app generated using tab template). Login screen must be the first screen (after splash) and after tapping login button it shows the tabs and tab navigation

Thanks a lot

Hi,

In your RootStackNavigator in RootNavigation.js, you can add a new sceen Login and set the initialRouteName to Login :

const RootStackNavigator = StackNavigator(
  {
    Login: { screen: Login },
    Main: {
      screen: MainTabNavigator
    }
  },
  {
    navigationOptions: () => ({
      headerTitleStyle: {
        fontWeight: "normal"
      },
      initialRouteName: "Login",
    })
  }
);

Then, to navigate to you main tab navigation, in the Login screen you can navigate with the navigation props

class LoginScreen extends React.Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <Text>Login screen</Text>
      </ScrollView>
    );
  }
}

LoginScreen.navigationOptions = ({ navigation }) => ({
  headerLeft: (
    <TouchableOpacity onPress={() => navigation.navigate("Main")}>
      <Text>To Main Tabs</Text>
    </TouchableOpacity>
  )
});

But i recommend to use the new SwitchNavigator released by react-navigation bump your react-navigation dependency to the latest and use it :sweat_smile: you have an exemple for authentifications flows
https://reactnavigation.org/docs/auth-flow.html

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.