React Native - navigationState.children[3].key "SCENE_2" conflicts with another child

Question

We have a problem with the current navigation in our react-native app. We use the react-native-router-flux module.

Our router structure looks like this:

<Router createReducer={this.reducerCreate.bind(this)} getSceneStyle={getSceneStyle}>
    <Scene key="root" hideNavBar={true}>
        <Scene key={PROFILE_TABBAR} hideNavBar={true}>
            <Scene key={PROFILE} hideNavBar={true} component={ProfileContainer}/>
            <Scene key={PROFILE_PASSWORD} hideNavBar={true} component={PasswordContainer}/>
        </Scene>    
        <Scene key="tabbar" hideNavBar={true} component={TabBar} initial={true}>
            <Scene key="tabbar_inner" tabs={true} hideNavBar={true}>
                <Scene key={TAB_1} component={Tab1Container} number={1} title={TAB_1} hideNavBar={true}/>
                <Scene key={TAB_2} component={Tab2Container} number={2} title={TAB_2} hideNavBar={true} />
                <Scene key={TAB_3}  component={Tab3Container} number={3} title={TAB_3} hideNavBar={true} />
            </Scene>                           
        </Scene>
    </Scene>
</Router>

We use our own TabBar, which looks like this:

import {Actions, DefaultRenderer} from 'react-native-router-flux';

import TabBar from './bar';

..

export default class extends Component {

    render(){

        const children = this.props.navigationState.children;
        const state = children[0];

        return (
            <View style={styles.container}>            
              <DefaultRenderer
                navigationState={state}
                key={state.key}
                {...state}
                onNavigate={this.props.onNavigate}
              />
              <TabBar />
            </View>
        );

    }

}

The TabBar holds a few buttons. One of them has the action to the profile-scene. Like so:

{()=>Actions[PROFILE_TABBAR]()}

If I click on the profile-button, it only works on the first time. When I go back and click again on the profile-button button I got the error:

navigationState.children[3].key "scene_2_PROFILE_TABBAR" conflicts withanother child!

What's wrong with the code? Did I use the Actions wrongly? How else can I structure my code?

score 5 · Answer 1 · edited Oct 20 '16 at 06:37

5

Try this:

Actions.pop()
   setTimeout(()=>{
   Actions[PROFILE_TABBAR]()
})

edited Oct 20 '16 at 06:37

Knut Holm

3,988
4
32
54

answered Oct 19 '16 at 09:57

Phuong Phan

147
1
5

mohamed al-ashry · Answer 2 · 2017-08-14T11:40:18.120

try add type={ActionConst.RESET} this to your top level scene like so:

<Router createReducer={this.reducerCreate.bind(this)} getSceneStyle={getSceneStyle}>
<Scene key="root" hideNavBar={true}>
    <Scene key={PROFILE_TABBAR} hideNavBar={true}  type={ActionConst.RESET}>
        <Scene key={PROFILE} hideNavBar={true} component={ProfileContainer}/>
        <Scene key={PROFILE_PASSWORD} hideNavBar={true} component={PasswordContainer}/>
    </Scene>    
    <Scene key="tabbar" hideNavBar={true} component={TabBar} initial={true}>
        <Scene key="tabbar_inner" tabs={true} hideNavBar={true}  type={ActionConst.RESET}>
            <Scene key={TAB_1} component={Tab1Container} number={1} title={TAB_1} hideNavBar={true}/>
            <Scene key={TAB_2} component={Tab2Container} number={2} title={TAB_2} hideNavBar={true} />
            <Scene key={TAB_3}  component={Tab3Container} number={3} title={TAB_3} hideNavBar={true} />
        </Scene>                           
    </Scene>
</Scene>

you can find more here: https://github.com/aksonov/react-native-router-flux/issues/782

React Native - navigationState.children[3].key "SCENE_2" conflicts with another child

2 Answers2