react-native-router-flux: Actions error and navigationState.children conflicts with another child!

Version

  • react-native-router-flux v3.26.16
  • react-native v0.25.1

Expected behaviour

Actions.[SCENE_NAME] work correctly.

Actual behaviour

Actions.[SCENE_NAME] jump to another scene

Steps to reproduce

  1. scene config

    reducerCreate(params) {
         const defaultReducer = Reducer(params);
         return (state, action)=>{
            return defaultReducer(state, action);
        }
    }
    
    
    <Router
        createReducer={reducerCreate()}
        >
      <Scene key="modal" component={Modal}>
        <Scene key="root" hideNavBar={false} >
          <Scene key="product" component={Product} title="Item" />
          <Scene key="newsItem" component={NewsItem} title="News Item" />
          <Scene key="tabbar" tabs={true} initial={true} >
            <Scene key="main" title="Main" component={ProductList} />
            <Scene key="news" title="News" component={News} />
            <Scene key="order" title="Order" component={Order} />
          </Scene>
        </Scene>
      </Scene>
    </Router>
    
  • from the main page, is a product listview, click on the item will jump to product scene
  • on the product page, click a button jump to order scene by Actions.order( {title: ‘order’} ); this stey can by done in the componentDidMount() { Actions.order( {title: ‘order’} ); }
  • now the current page is the order scene. if you click on the tabbar News, then click on the News listview, normally it will jump to the newsItem scene, but it jump to product scene. if you click on the tabbar Main, then click on the ProductList listview, normally it will jump to the product scene, but it shows the red screen with the message: navigationState.clilcren[2].key"scene_1_product" conflicts with another child!

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 18 (3 by maintainers)

Commits related to this issue

Most upvoted comments

@AndrewHenderson

Try adding:

type={ActionConst.RESET}

as a prop to your ‘Login’ scene. You may also have to add the prop to the parent scene, if that’s what you navigate to. For example, when I logout I navigate to Actions.auth(), which starts at my login scene. So I had to add type={ActionConst.RESET} to the Auth scene as well.

Example:

            <Scene key="auth" barButtonIconStyle={{ tintColor:'black' }} type={ActionConst.RESET}  >
              <Scene key="login" 
                                    component={LoginForm} 
                                    title="Login" 
                                    type={ActionConst.RESET} />
              <Scene key="register" 
                                    component={RegisterForm} 
                                    title="Register" 
                                    onBack={() => this.onBackToLogin() }  />
            </Scene>

This worked for me, good luck!

Hi,

Not sure what unmountScenes does, so far seems this only sets index back to 0 but doesn’t actually reset history stack which is why I have the same problem.

Example: <Scene key="main" tabs unmountScenes hideTabBar>

<Scene key="auth">
    <Scene key="intro">
    <Scene key="login" type="push">
</Scene>
<Scene key="app" tabs hideTabBar={false}>
    <Scene key="dashboard">
     <Scene key="menu">
</Scene>

</Scene>

Steps to reproduce:

  1. auth is the initial tab & intro is the initial scene
  2. push from intro to login
  3. jump from auth to app
  4. jump from app to auth (on logout)
  5. now state for auth tab is broken because index (unmountScenes) is set to 0, but auth still has 2 children and child with index 1 is login and this is where push gets conflict

By setting login type to ActionConst.PUSH_OR_POP seems to work just fine, BUT…

Can someone confirm pushOrPop is the correct option here or my scene nesting is wrong?

@Ross-Landry @AndrewHenderson I understand this works for the log-out case, in which you indeed would want to reset the navigation stack. But I have the following scenario:

  1. user is on scene A and clicks a browse button which redirects to scene B
  2. user navigates further, from B to C, from C to D (amount of browsing can differ)
  3. at scene C, user does an action and now I want him to be redirected to scene A, currently scene A has type PUSH because you arrive, in the beginning at scene A via scene Z and you have to be able to use the back-button… so I try to Actions.sceneA(); but this throws the navigationState.children issue, because it is trying to add the scene again to the stack, is there a way for me to redirect to scene A without using REPLACE for example? Any suggestion?

@Ross-Landry That worked! Thanks for posting!

i think you’re doing nesting wrong. check out this code snippet from the Example:



                  <Scene key="tabbar" component={NavigationDrawer}>
                        <Scene key="main" tabs={true} >
                            <Scene key="tab1"  title="Tab #1" icon={TabIcon} navigationBarStyle={{backgroundColor:"red"}} titleStyle={{color:"white"}}>
                                <Scene key="tab1_1" component={TabView} title="Tab #1_1" onRight={()=>alert("Right button")} rightTitle="Right" />
                                <Scene key="tab1_2" component={TabView} title="Tab #1_2" titleStyle={{color:"black"}}/>
                            </Scene>
                            <Scene key="tab2" initial={true} title="Tab #2" icon={TabIcon}>
                                <Scene key="tab2_1" component={TabView} title="Tab #2_1" renderRightButton={()=><Right/>} />
                                <Scene key="tab2_2" component={TabView} title="Tab #2_2" onLeft={()=>alert("Left button!")} leftTitle="Left" duration={1} panHandlers={null}/>
                            </Scene>
                            <Scene key="tab3" component={TabView} title="Tab #3" hideTabBar={true} icon={TabIcon}/>
                            <Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
                            <Scene key="tab5" component={TabView} title="Tab #5" hideTabBar={true} hideNavBar={true} icon={TabIcon}/>
                        </Scene>
                    </Scene>