React navigation - how to nest drawerNavigator inside stackNavigator

Question

I am using react-navigation, I want to open a drawer from MyProfile screen, having the options to go to EditProfile screen and Settings screen. But I can't figure out how to open a drawer when I click on MyProfile's header button.

App.js:

const MyProfileStack = createStackNavigator({
  MyProfile: {
    screen: profile,
    navigationOptions: ({navigation}) => {
      return {
        title: "My Profile",
        headerRight: (
          <Icon type="evilicon" name="navicon" size={40}
          onPress={() => navigation.dispatch(DrawerActions.openDrawer())}/>
        )
      };
    }
  }
})

const DrawerStack = createDrawerNavigator({
  Edit: { screen: EditProfileStack }
  Settings: { screen: SettingsStack }
})

const EditProfileStack = createStackNavigator({ 
  EditProfile: {
    screen: editProfile,
    navigationOptions: ({navigation}) => {
      return {
        title: "Edit Profile",
        headerLeft: (
          <Icon type="evilicon" name="chevron-left" size={50}
          onPress={() => navigation.navigate("MyProfile")}/>
        )
      };
    }
  }
});

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedStack },
  Profile: { screen: MyProfileStack },
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Drawer: DrawerStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

Simaroubaceous

Answer 1

Solution

You need to put your MyProfileStack in DrawerStack as below.

const DrawerStack = createDrawerNavigator({
  MyProfile: { screen: MyProfileStack }
  Edit: { screen: EditProfileStack }
  Settings: { screen: SettingsStack }
})


const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedStack },
  Profile: { screen: DrawerStack },
});

const AppContainer = createAppContainer(MainStack);

You can use various combination.

Why?

SwitchNavigator resign other Screens when you switch to another one. So you cannot call drawer from the screen already resigned.

p.s: You can use navigation events if you want to refresh your screen when change the screen. Use onWillFocus.

Engraving

Is there an easy way to force a component remount when navigating back from EditProfile to MyProfile? – Simaroubaceous

@Simaroubaceous Do you want to refresh MyProfile page when it come back from EditProfile? I added additional information on my answer. Good luck. – Engraving

Thank you, I am aware of the navigation events, but the tricky part is I have to figure out a way to only remount when navigating back from EditProfile and not Settings – Simaroubaceous

Wow, Great. Worked for me. Thank you !! – Postboy