Search code examples
javascriptreact-nativeroutesreact-native-router-flux

With react-native-router-flux, how can I have a tab bar click specify which tab to switch to?


I have a tab bar, with a user profile tab. I want it to redirect to signup if a user is not logged in, but if they are logged in, to go to to the userProfile tab.

here's the code:

         <Tabs
           key="tabbar"
         >
           {/* Main Screen */}
           <Scene
             key="main"
             component={MainScreen}
             title="Main"
             tab
           />
           {/* User Profile */}
           <Scene
             key="profile"
             component={ProfileScreen}
             title="Profile"
             tab
             type="reset"
             tabBarOnPress={() => {
               if (this.props.userIsLoggedIn) {
                 // how to show the correct tab. tried this didn't 
                 // work:
                 // return NavigationActions.tabbar({routes: 1});
               }
               return NavigationActions.loginSignup();
             }}
           />
         </Tabs>

I have it so that if user is NOT logged in, it indeed navigates to the correct screen to sign up, but I do not know how to make it show the tab if the user is logged in.

EDIT: * we have tried doing

onEnter={() => {
  if (!this.props.userIsLoggedIn) {
    NavigationActions.loginSignup();
  }
});

however we very briefly see the profile screen, would ideally go directly to signup, without showing any of the profile screen.


Solution

  • Great question, not much documentation for this function, here is the answer.

    ({ scene, jumpToIndex }) => { jumpToIndex(scene.index); }