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

Commits related to this issue

Most upvoted comments

Every scene needs a key. Try add key to scene within tabs(myitem, feed, saveditem)

I just had to replace my ActionConst.RESET with ActionConst.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() or Actions.main(), to go back on instead of using Actions.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 ?