No route found for key in stack navigator in react native

Question

I am making a react native project which got an error for no route found in stack navigator.First of all here is my code for navigation of my app.

const RootStack = createStackNavigator({
  Splash : { screen: Splash },
  ModelProfile: { screen: ModelProfile},
  HomeModel: {screen: modeldrawerNavigator},
  EnterOtp : { screen: EnterOtp},
  OtpChangePassword : { screen: OtpChangePassword},
}, {
  headerMode: 'none',
  initialRouteName: 'Splash'
})

const AppNavigator = createAppContainer(RootStack)
export default AppNavigator;

Now the code for modelDrawerNavigator is

const modeldrawerNavigator = createDrawerNavigator(
  {
    HomeScreen: { screen: homeStack},
    EditProfile : { screen: profileStack},
    BuyStar : { screen: StarStack},
    Notifications : { screen: nStackmodel},
    ResetPassword : { screen: ResetPassword},
  },
  {
    initialRouteName: 'HomeScreen',
    gesturesEnabled: true,
    contentComponent: props => <DrawerModel {...props} />
  },
);

And code for StarStack is

const StarStack = createStackNavigator({
  Buy : { screen: BuyStars},
  PaymentMode : { screen: PaymentMode},
 }, {
  headerMode: 'none',
  initialRouteName: 'Buy'
 });

Now when navigating inside drawer i want to clear stack to position 0.

<TouchableOpacity
  onPress={() => {
    this.props.navigation.navigate('BuyStar');
    const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: 'Buy' })],
    });
    this.props.navigation.dispatch(resetAction);
  }}
>
  <Text style={styles.drawertext}>Buy Stars</Text>
</TouchableOpacity>

Above code is what produces an error that

No route defined for key 'Buy',Must be one of 'Splash','EnterOtp' etc.

I am stuck in this situation . Please help me to resolve this issue. Thanks in advance .

That last bit with the `TouchableOpacity` is in the `BuyStars` component, correct? Mind sharing the rest of the code for it? — Danny Buonocore, May 22 '19 at 17:13
Yes BuyStars is a label on a drawer which takes to that screen.And also BuyStars is component which is in stack with key Buy — Vipin Dubey, May 22 '19 at 17:21

Danny Buonocore · Answer 1 · 2019-05-22T19:33:24.063

It seems like the issue is your code is attempting to navigate the root navigator (Splash and EnterOp are both keys on this navigator). According to the docs:

key - string or null - optional - If set, the navigator with the given key will reset. If null, the root navigator will reset.

So maybe you can try adding the key param to your reset action:

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Buy' })],
  key: 'BuyStar',
});

Here are some more resources that may help:

SO answer

Github Issue

Note that the implementation will likely depend on if you're using React Navigation 3.0+ or one of the earlier versions.

EDIT

The supplied key should be BuyStar - you're trying to navigate to the route Buy, which exists in the StarStack navigator. The StarStack navigator is located in the drawer navigator, so the key of this navigator is found in its keys:

const modeldrawerNavigator = createDrawerNavigator({
  ...
  BuyStar : { screen: StarStack },
  ...

The key should be the id of the navigator that contains the route you're trying to navigate to.

How can BuyStar be key if this belongs to a key of drawernavigator ? — Vipin Dubey, May 22 '19 at 17:59

No route found for key in stack navigator in react native

1 Answers1