How can I enable drawer only on certain screen?

Question

I am using react-navigation and trying to use drawer navigation only on Home Screen.

My code for navigation configuration is like below.

const WIDTH = Dimensions.get("window").width;

const DrawerConfig = {
  drawerWidth: WIDTH * 0.83,
  // drawerLockMode: "locked-open",
  contentComponent: ({ navigation }) => {
    return <SideDrawerScreen navigation={navigation} />;
  }
};

const AppNavigator = createStackNavigator(
  {
    Login: LoginScreen,
    Details: DetailsScreen,
    Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        header: null
      })
    }
  },
  { initialRouteName: "Login", headerMode: "none" }
);

const DrawerNavigator = createDrawerNavigator(
  {
    AppNavigator,
    Settings: {
      screen: SettingsScreen
    }
  },
  DrawerConfig
);

const AppContainer = createAppContainer(DrawerNavigator);

export default AppContainer;

I just want to enable drawer only on HomeScreen.
I was thinking to create drawer navigator on Homescreen and combine it with stack navigator, but I can't find a way and I don't know even it will work.

Is there any way to make it work??

Answer 1

Wrap your Home with other screens you want to use drawer as below.

const DrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        header: null
      })
    },
    Settings: {
      screen: SettingsScreen
    }
  },
  DrawerConfig
);

const AppNavigator = createStackNavigator(
  {
    Login: LoginScreen,
    Details: DetailsScreen,
    Home: {
      screen: DrawerNavigator,
      navigationOptions: () => ({
        header: null
      })
    }
  },
  { initialRouteName: "Login", headerMode: "none" }
);