Search code examples
react-nativereact-navigationstack-navigator

React Native first time user stacknavigator


I have a stacknavigator with a intro screen and a login screen.

export const StackerIntro = createStackNavigator({ 
  Intro: {
    screen: Intro,
    navigationOptions: {
      header: null
    }
  },
  Login: {
    screen: Login,
    }
  }, {
 InitialRouteName: "Intro"
})

How can I make the initial route be "Login" if it isnt the users first time in the app?


Solution

  • For conditional rendering you might have to use switchNavigation.

    1 .Save the key in async storage if the user logs in for the first time.

    1. When the user comes again for the second time, get the key in navigation class using async-await and if you get the key then navigate to the desired location or else navigate to login.

    2. Use SwitchNavigation for conditional navigation.

    You can also try :

        const routeName = () => {
          var routeName =
            global.isSignUpScreen == false || global.isSignUpScreen == undefined
              ? "LoginScreen"
              : "SignUpScreen";
          console.log("routeName >> " + routeName);
          return routeName;
        };
    
    
        const SignUpStack = createStackNavigator(
          {
            LoginScreen: {
              screen: LoginScreen,
              navigationOptions: {
                header: null
              }
            },
            SignUpScreen: {
              screen: SignUpScreen,
              }
          {
            initialRouteName: routeName()
          }
    }
        );