React-native-router-flux: There is no route defined for key key0. Must be one of: 'key3','< clone view key >' (nested scenes)

[brandonjyuhas]

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!!

[joel611]

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

[brandonjyuhas]

@joel611 that worked! Thanks so much!

[greenzeal]

worked for me also! thanks!

[ghost]

I just had to replace my ActionConst.RESET with ActionConst.REPLACE

[hossein-kheirabadi]

@joel611 that worked! Thanks so much!

[hugoh59]

I already have a key for all my scenes but still getting that error.

[shamanking]

I have same issue, this is my code:

`

  <Scene key="root" hideNavBar >
    <Scene key="auth">
      <Scene key="login" component={LoginForm} title="Please Login" />
    </Scene>
    <Scene key="main">
      <Scene
        key="employeeList"
        rightTitle="Add"
        onRight={() => { Actions.employeeCreate(); }}
        component={EmployeeList}
        title="Employees"
      />
      <Scene key="employeeCreate" component={EmployeeCreate} title="Employee Create" />
    </Scene>
  </Scene>
</Router>`

When I try: Actions.employeeList({ type: 'reset' });
It has error: there is no route define for key employeeList, must be one of 'auth', 'main'

[chelseaisgood]

@shamanking Same here. I used Actions.main or Actions.pop to resolve this. But I do want to know how to navigate to some scene like employeeList, not the direct sub-scene of the root scene.

[shamanking]

@chelseaisgood : Thank you. I call employeeList from Scene employeeCreate. In Scene employeeCreate, I call action like:

`
export const employeeDelete = ({ uid }) => {

const { currentUser } = firebase.auth();
return () => {
   firebase.database().ref(`/users/${currentUser.uid}/employees/${uid}`)
     .remove()
     .then(() => {
         Actions.employeeList();
      });
 };

};
`

If I try: Actions.employeeList({ type: 'reset' }); It has error.

[selvesandev]

@shamanking Did you solve this issue ?

[abohannon]

I am also getting this error.

There is no route defined for key key1. Must be one of: 'key2'

Was working fine until I introduced the modal + the additional 'rootPrivate' scene as the docs detail for setting up the modal.

<Router getSceneStyle={this.getSceneStyle}>
        <Scene key="root" hideNavBar>
          <Scene key="public">
            <Scene
              key="login"
              component={LoginForm}
              title="Please Login"
              rightTitle="Sign up"
              onRight={() => Actions.signup()}
              hideNavBar
            />
            <Scene
              key="signup"
              component={SignupForm}
              title="Create Account"
              hideNavBar
            />
          </Scene>
          <Scene key="private" hideNavBar>
            <Modal>
              <Scene key="rootPrivate">
                <Scene
                  key="nearby"
                  component={Nearby}
                  title="Nearby"
                  leftTitle="Settings"
                  onLeft={() => Actions.push('settings')}
                  rightTitle="My places"
                  onRight={() => Actions.userDash()}
                  titleStyle={styles.titleStyle}
                  rightButtonTextStyle={{ color: GREY_DARK }}
                />
                <Scene
                  key="userDash"
                  component={MyPlaces}
                  title="My places"
                  titleStyle={styles.titleStyle}
                  backTitle="Nearby"
                  backButtonTextStyle={{ color: GREY_DARK }}
                  navBarButtonColor={GREY_DARK}
                />
              </Scene>
              <Scene
                key="settings"
                component={Settings}
                title="Settings"
                titleStyle={styles.titleStyle}
                rightTitle="Nearby"
                onRight={() => Actions.pop()}
                direction="leftToRight"
              />
            </Modal>
          </Scene>
        </Scene>
      </Router>

[Blapi]

@abohannon try adding a key to your Modal View ?

[saurabhabh]

@shamanking @selvesandev I am facing the same issue. Any suggestions as to how to fix it?

[tlesick]

Try Action.pop()

[JanSros1]

hello
How are you?
so did you solve error?

[JanSros1]

[daviscabral]

Hey guys, could you fork the project and make a broken version of the Example app with the same error? That would help me a lot to check it out with the short free time that I have to dedicate to this project lately. Thank you.

[daviscabral]

Also, not sure if is the same error - so, please, open a new issue, and be sure to put all the possible information to make easier to reproduce this error. Thank you again.

[mightym]

Same issue here.
"react-native-router-flux": "^4.0.0-beta.31",
All scenes and stacks have a unique key. Btw. I'm encountering this since around beta.18 from time to time. The only way to reproduce it is to do a long time nothing with the app. Happens also on iOS simulator. Wonder if its happening when the app returns from background/sleep sometimes.

[jwilliamson1]

@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();
});
};
};`

[saurabhabh]

Thank you so much.

On Wed, Jul 4, 2018, 4:32 AM jwilliamson1 [e-mail] wrote:

@shamanking https://github.com/shamanking @saurabhabh
https://github.com/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();
});
};
};`

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aksonov/react-native-router-flux/issues/2439#issuecomment-402315814,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AITZsaNeYCYWM_MoVTM-S2jdHxzOwE1jks5uC_gYgaJpZM4PksAU
.