React-native-router-flux: navigationState.children[2].key "scene_addRoom_1_addRoom" conflicts withanother child!

[Evaske]

Version

Tell us which versions you are using:

• react-native-router-flux v3.37.0
• react-native v0.41.2

Expected behaviour

When navigating back to a tab bar scene, I should be able to once again get back in to the scene I've just been on.

Actual behaviour

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

Steps to reproduce

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?

[cridenour]

What you can do is create a "separate" Rooms scene called roomsModal which is not a tab. It would use the same component, but it will be able to jump on the stack as a normal scene and get removed correctly.

[goshasawicka]

I had the same error.

I had bunch of Scenes under one ("main") parent because I wanted to use 'back' functionality. Unfortunately I couldn't use that without this error popping up, so I've put every Scene to a separate parent and used onLeft parameter instead to get back to the 'List' scene. That's a small project I do, so as a temporary solution it works fine.

I'm using v3.37.0.

<Scene key="main">
        <Scene key="bookList">
            <Scene key="bookListScene" component={ BookList } title="Books" />
        </Scene>
        <Scene key="bookInfo">
            <Scene key="bookInfoScene" component={ BookInfo } leftTitle="List"  onLeft={ () => Actions.bookList()  } />
        </Scene>
...
</Scene>