React-native-router-flux: navigationState.children[i].key conflicts with another child

[chris-pikul]

Version

Tell us which versions you are using:

• react-native-router-flux v3.35.0
• react-native v0.32

Expected behaviour

I expect the nested scenes to traverse correctly. I also want to use nested scenes to keep compartmentalization of the routes.

Actual behaviour

Occasionally (not all the time), the big-red-error show's up saying...
navigationState.children[x].scene_1_xxx conflicts withanother child!
This happens on any scene and seemingly randomly. My log's show no previous errors that may just be bubbling up to this.

Code Example

<Scene key="root" hideNavBar > <Scene key="loading" component={Loading} title="Loading" initial={true} /> <Scene key="login" component={Login} title="Login" type={ActionConst.REPLACE} /> <Scene key="main" hideNavBar> <Scene key="threads" hideNavBar> <Scene key="threadsList" component={Threads} title="Threads" initial/> <Scene key="threadView" component={ThreadView} title="Thread" /> </Scene> </Scene> </Scene>

And to go to the scene I use
Actions.threads()

Is this wrong? Is there a better way? I was originally hoping to just be able to use Actions.main() and have it default to the threadsList key if possible, but that presented it's own errors.

[aksonov]

Looks like you have nested Router somewhere. It should be top-level component.

[chris-pikul]

I keep the "router" in a separate file...

_views/index.js_

const scenes = Actions.create(<Scene key="root" hideNavBar >
   <Scene key="loading" component={Loading} title="Loading" initial={true} />
   <Scene key="login" component={Login} title="Login" type={ActionConst.REPLACE} />
   <Scene key="main" hideNavBar>
      <Scene key="threads" hideNavBar>
         <Scene key="threadsList" component={Threads} title="Threads" initial/>
         <Scene key="threadView" component={ThreadView} title="Thread" />
      </Scene>
      /* ... */
   </Scene>
   /* ... */
</Scene>);
export default scenes;

Then it get's imported in the root component

import Views from './views/'
class App extends React.Component {
   render() {
      return <Router scenes={Views} />
   }
}

[ruskid]

I have the same scene structure and same problem. In my case I had a conflict after logout, try to use type={ActionConst.RESET} on login Scene to reset navigation.

[CoteViande]

It should be top-level component.

@aksonov also got the error, could you clarify what should be a top level component?

[ducduong]

I also have this issue, not all the times, but after some route change using Actions.key_of_route(). I have a socket waiting for some data from server.

When the data comes:

• the app to move to a screen
• user does something in that screen
• operation is done, app moves to another screen

It all works well, until the next event from the socket comes, the red screen shows up with: children[i].key conflicts with another child

I would love to know the general idea what causes that issue so I can read throw the code and debug my routes.

Thanks.

[MadeInMoon]

I had the same pb, and fixed it by adding type={ActionConst.REPLACE} props to my Home scene, which triggers the "go back to the initial scene". )
This is surely not a suitable solution if an animation is needed when landing on the Home scene.

See this line in the official exemple