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

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

V4 announcement, v3 is obsolete now; closes #1,#2,#3,#4,#5,#6,#7,#8,#9,#10,#11,#12,#13,#14,#15,#16,#17,#18,#19,#20,#21,#22,#23,#24,#25,#26,#27,#28,#29,#30,#31,#32,#33,#34,#35,#36,#37,#38,#39,#40,#41,#... — committed to aksonov/react-native-router-flux by aksonov 7 years ago
V4 docs; closes #1,closes #2,closes #3,closes #4,closes #5,closes #6,closes #7,closes #8,closes #9,closes #10,closes #11,closes #12,closes #13,closes #14,closes #15,closes #16,closes #17,closes #18,cl... — committed to aksonov/react-native-router-flux by aksonov 7 years ago

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!

+14

Ross-Landry on Dec 28, 2016

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:

auth is the initial tab & intro is the initial scene
push from intro to login
jump from auth to app
jump from app to auth (on logout)
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?

andrispraulitis on Jan 4, 2017

@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:

user is on scene A and clicks a browse button which redirects to scene B
user navigates further, from B to C, from C to D (amount of browsing can differ)
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?

JeroenNelen on Jan 4, 2017

@Ross-Landry That worked! Thanks for posting!

AndrewHenderson on Dec 29, 2016

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>

281330 on Jun 6, 2016