React Native Router Flux - Navigating to scene and back - conflicts with another child

Question

I am using react-native-router-flux and am having an issue navigating between scenes and it's driving me crazy!

This is my Router:

<Router navigationBarStyle={styles.navigationBody} titleStyle={styles.navigationTitle} duration={0} >
    <Scene key="root">
      <Scene key="addNode" component={HA_AddNode} socket={socket} rooms={["Living Room", "Master Bedroom", "Hall", "Office"]} nodes ={["Light Switch", "Socket"]} title="Add Node" backTitle="Back" backButtonTextStyle={{color: 'white'}} backButtonImage={require('./images/back_arrow_icon.png')} onLeft={()=> Actions.pop()} />
      <Scene key="addRoom" component={HA_AddRoom} socket={socket} locations={["Downstairs", "Upstairs"]} title="Add Room" backTitle="Back" backButtonTextStyle={{color: 'white'}} backButtonImage={require('./images/back_arrow_icon.png')} onLeft={()=> Actions.pop()} />
      <Scene key="tabBar" tabs style={styles.tabBar} initial={true}>
        <Scene key='dashboard' component={HA_Dashboard} title='Dashboard' initial={true} icon={HA_TabIcon} iconTitle="ios-home-outline" />
        <Scene key='rooms' component={HA_Rooms} title='Rooms' icon={HA_TabIcon} iconTitle="ios-list-box-outline" />
        <Scene key='settings' component={HA_Settings} title='Settings' icon={HA_TabIcon} iconTitle="ios-settings-outline" />
      </Scene>
    </Scene>
  </Router>

What am I trying to achieve is when I have pressed a button, after X seconds it navigates from the addRoom scene (which is accessed via link on the settings page) to the rooms tab scene. I am doing this with the following code:

timer.setTimeout(this, 'roomsNavigate', () => Actions.rooms(), 2500);

That works fine and navigates to the rooms page correctly.

Now the issue is that if I go back the settings page and click on the link to take me to the add room page then I get the following error:

navigationState.children[2].key "scene_addRoom_1_addRoom" conflicts withanother child!

I have also noticed that if I click on any other links on the settings page then it is taking me to the add room page and not its correct page.

How can I go about fixing this?

score 0 · Answer 1 · answered Feb 24 '17 at 07:24

0

How do you go back to the settings page?

Your "addRoom" scene is already added to the stack, that can explain this conflict.

You have several solutions to fix that (but that will changes the behavior).

A) Reset the stack when you open the addRoom scene

timer.setTimeout(this, 'roomsNavigate', () => Actions.rooms({type: ActionConst.RESET}), 2500);

B) Reset the stack when you are in the settings scene

<Scene type={ActionConst.RESET} key='settings' component={HA_Settings} title='Settings' icon={HA_TabIcon} iconTitle="ios-settings-outline" />

answered Feb 24 '17 at 07:24

jpclair

206
1
4

Option A removes the Dashboard and Settings from the tab bar, leaving just the rooms icon/title and also makes the statusbar black. Option B does the same but when you click on the settings icon. Removes Dashboard and Rooms. – Tenatious Feb 24 '17 at 11:35
Sorry, I didn't see it was inside a tabbar. The note from Ataomega is the right answer. You can't directly open a tab from outside. Only the initial tab from your tabbar can directly be reached. – jpclair Feb 24 '17 at 14:42

score 0 · Accepted Answer · answered Feb 24 '17 at 08:28

<Router navigationBarStyle={styles.navigationBody} titleStyle={styles.navigationTitle} duration={0} >
    <Scene key="root">
      <Scene key="addNode" component={HA_AddNode} socket={socket} rooms={["Living Room", "Master Bedroom", "Hall", "Office"]} nodes ={["Light Switch", "Socket"]} title="Add Node" backTitle="Back" backButtonTextStyle={{color: 'white'}} backButtonImage={require('./images/back_arrow_icon.png')} onLeft={()=> Actions.pop()} />
      <Scene key="addRoom" component={HA_AddRoom} socket={socket} locations={["Downstairs", "Upstairs"]} title="Add Room" backTitle="Back" backButtonTextStyle={{color: 'white'}} backButtonImage={require('./images/back_arrow_icon.png')} onLeft={()=> Actions.pop()} />
      <Scene key="tabBar" tabs style={styles.tabBar} initial={true}>
        <Scene key='dashboard' component={HA_Dashboard} title='Dashboard' initial={true} icon={HA_TabIcon} iconTitle="ios-home-outline" />
        <Scene key='rooms' component={HA_Rooms} title='Rooms' icon={HA_TabIcon} iconTitle="ios-list-box-outline" />
        <Scene key='settings' component={HA_Settings} title='Settings' icon={HA_TabIcon} iconTitle="ios-settings-outline" />
      </Scene>
    </Scene>
  </Router>

You cannot navigate to dashboard, rooms or settings from addNode or addRoom scenes. You can only navigate to tabBar scenes from them.

But from dashboard, rooms and settings scenes you can navigate to addNode or addRoom scenes.

Ah. I didn't realise that was the case. Can you possible explain or link me to an article that explains the rationale behind that? Would I in theory then then need to navigate to the tabBar and then to rooms? — Tenatious, Feb 24 '17 at 11:28
@Tenatious Well, I haven't any link which says so, but it took me some time to figure out what is possible in rn-router-flux. yes you can navigate to tabBar with passing some props. since dashboard is the initial view in your tabbar, you have to navigate again to another scene based on those props. I'm not sure if it's a good idea to do so or not. — Ata Mohammadi, Feb 24 '17 at 15:39

score 0 · Answer 3 · answered Feb 24 '17 at 18:17

Based on @Ataomega answer I went for the option of popping back to Settings and then to the rooms page which seems to work quite nicely:

timer.setTimeout(this, 'roomsNavigate', () => {
    Actions.pop()
    setTimeout(()=>{
        Actions.rooms()
    })
}, 2500);

React Native Router Flux - Navigating to scene and back - conflicts with another child

3 Answers3