react native router-flux multiple sub scenes

Question

I am trying to understand how to use router-flux and have multiple scenes/sub scenes similar to having multiple story boards, so that I can have a scene for the user sign up process, and then a scene for once the user is sign up and logged in.

At present I am doing this but it isn't given me the desired result

class NavigationRouter extends Component {
  render () {
    return (
      <Router>
        <Scene key='drawer' component={NavigationDrawer} open={false}>
          <Scene key='root' tabs={true}>
            <Scene key='account' hideNavBar={true} >
              <Scene initial key='Login' component={Login} title='Login' />
              <Scene key='SignUp' component={SignUp} title='SignUp' />
              <Scene key='Account' component={Account} title='Account' />
              <Scene key='Venue' component={Venue} title='Venue' />
            </Scene>
            <Scene key='auth' renderLeftButton={NavItems.hamburgerButton} navigationBarStyle={Styles.navBar} titleStyle={Styles.title} leftButtonIconStyle={Styles.leftButton} rightButtonTextStyle={Styles.rightButton} >
              <Scene key='MenuItems' component={MenuItems} title='Your Menu' />
              <Scene key='Orders' component={Orders} title='Orders' />
            </Scene>
          </Scene>
        </Scene>
      </Router>
    )
  }
}

The first part of the login/signup journey should not display the nav bar and allow the user to go back to the past step.

The second part should allow the logged in user to access the nav bar and side draw for the items which are defined in it

Can you tell what's the current behavior? It's hard to compile just by looking it. But I guess account scenes do show navbar and they also have access to the drawer. Your tabs={true} is at the wrong place, so you don't see any tabs at all right (no icons provided)? If these are correct, and if you provide some details, I'll happily help. — eden, Apr 06 '17 at 19:22
sure it skips from signup straight to next cluster of scenes even through I tell it to move to account. if I don't have a scene with the key auth and its all under the account key it flows as expected — Boss Nass, Apr 07 '17 at 09:09

eden · Accepted Answer · 2018-05-29T08:27:36.437

Even though grouping scenes with another scene looks more readable and correct, it makes Action not to work as expected, since Actions.SCENE() can only navigate within its siblings. In other words, two scenes should have the same parent.

Here's a modified version of your navigator tree. For example, you can start with Login scene, and route directly to tab1 by calling Actions.tabbar(). In your tabbar scene, there will be two subcomponents. User can manually navigate between tabs, or you can again call Actions.tab2(), since they're siblings too.

I prefer putting every scene sibling to another since it takes two chained actions. It looks a bit messy, but using spaces and comments help.

class NavigationRouter extends Component {
  render () {
    return (
      <Router>
        <Scene key='drawer' component={NavigationDrawer} open={false}>
          <Scene key='root'>

            {/* Authentications */}
            <Scene initial key='Login' component={Login} title='Login' />
            <Scene key='SignUp' component={SignUp} title='SignUp' />
            <Scene key='Account' component={Account} title='Account' />

            {/* Main */}
            <Scene key='Venue' component={Venue} title='Venue' />

            {/* Tabs... */}
            <Scene key='tabbar' tabs={true} renderLeftButton={NavItems.hamburgerButton} navigationBarStyle={Styles.navBar} titleStyle={Styles.title} leftButtonIconStyle={Styles.leftButton} rightButtonTextStyle={Styles.rightButton} >
              <Scene icon={Icon1} key='tab1' component={MenuItems} title='Your Menu' />
              <Scene icon={Icon2} key='tab2' component={Orders} title='Orders' />
            </Scene>

          </Scene>
        </Scene>
      </Router>
    )
  }
}

If you want to jump directly to the sub-scene of a sibling, say tabbar1, combine two actions:

Actions.callback({key:'tabbar',type:'push'});
Actions.callback({key:'tab1',type:'jump'});

The ugliest part of the tree above is styling multiple scenes at once. Such as removing navbar from 5 siblings. And there you can define an object of props and add them into corresponding sub-scenes {...customProps}

Better way of organizing: Split your scenes to smaller parts if needed.

Thanks for the heads up. For future visitors, please be aware that latest link refers to v3. @UncaughtException — eden, May 29 '18 at 08:28
Can you elaborate on the "Better way of organizing?". I'm having trouble accessing the redux store in scenes that I separated into different files (need access to action creators for bar buttons). Example of a scene that I want to pull out into its own file: const AnotherScene = (props) => ( ... Scene> ); module.exports = connect(null, actions)(AnotherScene) This gives me the error "React native cannot read property 'clone' of undefined" — Jake Cronin, Jul 16 '18 at 15:17

react native router-flux multiple sub scenes

1 Answers1