Stack navigator not working inside drawer navigator in react native

Question

I am making an react native android app in which i have both stack navigator and drawer navigator like this.

const orderstack = createStackNavigator({
  OrderHistory : {screen : OrderHistory},
  HistoryDetails: {screen : HistoryDetails},
  TrackOrder: {screen : TrackOrder},

},{
  headerMode: 'none',
  navigationOptions:({navigation}) => ({
    header: null,
  }),

})

and drawer is

const drawerNavigator = createDrawerNavigator({
  HomeScreen: {
    screen: orderstack,
  },
  ProfileScreen:{
    screen: profile,

  },
  MOrderScreen: {
    screen: customstack,

  },{}
}

Now when i go to HomeScreen in drawer then it should open orderstack which is stack navigator.This is working fine until i am not in the HomeScreen inside drawer,i mean,suppose i am inside HomeScreen and inside that i am in HistoryDetails then when i press again HomeScreen in drawer then it does not goes in OrderHistory.I tried setting initialRoutename but it does not works?But if i click from MOrderScreen or ProfileScreen then its working fine and OrderHistory is opening first.

ValdaXD ValdaXD · Accepted Answer · 2019-01-30T14:43:24

The drawer only knows that it has to navigate to the "orderstack" screen, in this case, is a stacknavigator, but when you are in HistoryDetails or TrackOrder , you are still in the "orderstack" screen , the drawer doesn't handle deep navigation. It only navigates between the screens that you have provided it. you need to define a custom contentcomponent to handle navigation in your way. This behaviour of going back to the initial screen is already present in tabnavigator of react anvigation 3.0 so you should try it out to see if it fits your needs.

Check here for how to implement a customcomponent that resets the stack navigator , or just use a tabnavigator wich is the recommended for reseting screens (that's how youtube app does it)

Stack navigator not working inside drawer navigator in react native

1 Answers