React-native-router-flux: nested routes with same scene

[ms88privat]

Version

Tell us which versions you are using (react native 0.26 is required for v3):

• react-native-router-flux v3.26.0
• react-native v0.26.2

Expected behaviour

The navigator should route to the UserView within its current tab. This was working with v2 and a similar route setup.

Actual behaviour

The navigator routes always to the UserView in the last tab defined.

Steps to reproduce

/* <Scene key='modal' component={Modal} > */
/* <Scene key='root' > */
<Scene key='homeView' tabs>
  <Scene key='addTab' title='create' icon={TabIconComponent}>
     <Scene key='add' component={CreateTabView} title='Create' />
     <Scene key='user' component={UserView} title='User' />
   </Scene>
   <Scene key='peopleTab' title='people' icon={TabIconComponent}>
      <Scene key='people' component={PeopleContainer} title='People'  />
      <Scene key='user' component={UserView} title='User' />
    </Scene>
</Scene>

Actions.add() -> Actions.user() => now we are in peopleTab -> user instead of addTab -> user

[ms88privat]

related to https://github.com/aksonov/react-native-router-flux/issues/209 and this pr

@joenoon did you find a solution yet?

[joenoon]

Can you try something like this?

/* <Scene key='modal' component={Modal} > */
/* <Scene key='root' > */
<Scene clone key='user' component={UserView} title='User' />
<Scene key='homeView' tabs>
  <Scene key='addTab' title='create' icon={TabIconComponent}>
     <Scene key='add' component={CreateTabView} title='Create' />
   </Scene>
   <Scene key='peopleTab' title='people' icon={TabIconComponent}>
      <Scene key='people' component={PeopleContainer} title='People'  />
    </Scene>
</Scene>

Actions.add() -> Actions.user()
Actions.people() -> Actions.user()

You should see the user added to the current tab's nav stack

[ms88privat]

hm, this is only resulting in a "popup" style of navigation. So the navbar will overlay the current navbar without a transition and so on. I would be fine with this, but I got another problem with the navbar. It is immediately be visible instead of being animated with the view transition. Also somehow I'm missing the back button.

I think I have to sleep another night and reproduce it step by step with some example data

[joenoon]

Ok. Also try this against my branch https://github.com/joenoon/react-native-router-flux/tree/jn-wip if you can. That is currently pending PR and possibly addresses some of the stuff you mentioned with navbar.

[ms88privat]

Thanks a lot. Yes, I will try your branch tomorrow.

[jdmunro]

Did anyone make any progress with this issue? I'm having similar problems.

[joenoon]

@jdmunro can you check the example app: "Go to TabBar page", "push new scene", then "push new scene hideNavBar=? hideTabBar=?". That should demo being able to push new scenes into the current tab. Also the keys should be unique if you want to define it without clone as the OP did - you can't have 2 'user' keys defined. The last 'user' overwrites the first 'user' immediately as the JSX is executed which is probably why the OP reported the last one always being triggered. So the issue could be as simple as making it user1 and user2. FYI I'm using 3.35.x