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
@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:
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>
Steps to reproduce:
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:
@Ross-Landry That worked! Thanks for posting!
i think you’re doing nesting wrong. check out this code snippet from the Example: