react-native-router-flux: There is no route defined for key key0. Must be one of: 'key3','< clone view key >' (nested scenes)
Version
Tell us which versions you are using:
- react-native-router-flux v4.0.0-beta.18 (v3 is not supported)
- react-native v0.47.1
Expected behaviour
I have my router set up like this:
<Router>
<Scene key='root' hideNavBar>
<Scene key='onboarding'>
<Scene key='welcome' component={Welcome} title='Welcome' />
<Scene key='selectItems' component={SelectItems} title='Select Items' />
</Scene>
<Scene
key='main'
showLabel={false}
tabs={true}
initial={this.props.user.onboarded}
showIcon={true}
iconStyle={{width: 100, height: 30}}
>
<Scene key='tab1' title='My Items' icon={TabIcon} iconName='glass'>
<Scene component={MyItems} />
</Scene>
<Scene key='tab2' title='Items' icon={TabIcon} iconName='search' initial={true}>
<Scene component={Feed} />
</Scene>
<Scene key='tab3' title='Saved' icon={TabIcon} iconName='heart'>
<Scene component={SavedItems} />
</Scene>
</Scene>
<Scene key='itemShow' back clone component={ItemShow} />
</Scene>
</Router>
When the app loads initially (with no persisted data), the scene of key "welcome"
is loaded. A button on that component calls Actions.selectItems()
, and navigates to the scene of key "selectItems"
.
The component in SelectItems
has a button that calls Actions.main()
(as well as firing an action which sets user.onboarded
to true).
I’d expect that the scene of key "main"
would load, which in turn would load it’s initial scene, "tab2"
.
Actual behaviour
When Actions.main()
is called from SelectItems
, an error is thrown:
There is no route defined for key key0. Must be one of: 'key3','itemShow'
.
However, if the app is reloaded (now that this.props.user.onboarded
= true
, the app successfully loads to the Feed
component.
Note: the reason I have nested the scenes within their tab scenes is that otherwise, when navigating to a clone view, the tab for the scene which you navigated from is replaced with a tab for the clone view (which is reproducible in the Example app by navigating to tab3 and then the echo view. tab3 will disappear).
Steps to reproduce
Please let me know if you need me to fork the example app.
Thanks!!
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 21
Every scene needs a key. Try add key to scene within tabs(myitem, feed, saveditem)
I just had to replace my
ActionConst.RESET
withActionConst.REPLACE
@shamanking @saurabhabh and anyone else who is having this problem, and is probably also doing Stephen Grider’s React-Native course that this example seems to be from. You need to call
Actions.pop()
orActions.main()
, to go back on instead of usingActions.employeeList({ type: 'reset' })
;.try the following if the key is named main:
`export const employeeSave = ({ name, phone, shift, uid }) => { const { currentUser } = firebase.auth();
return () => { firebase.database().ref(
/users/${currentUser.uid}/employees/${uid}
) .set({ name, phone, shift }) .then(() => { Actions.main(); }); }; };`or this if you just want to go back one; they both should have the same result:
`export const employeeSave = ({ name, phone, shift, uid }) => { const { currentUser } = firebase.auth();
return () => { firebase.database().ref(
/users/${currentUser.uid}/employees/${uid}
) .set({ name, phone, shift }) .then(() => { Actions.pop(); }); }; };`I already have a key for all my scenes but still getting that error.
@shamanking Did you solve this issue ?