I am using react-navigation in React Native and I want to create a sidebar menu which opens as an overlay that comes from left to the right and fills up around 80-90% of the width.

Without react-navigation, this is possible with packages such as react-native-side-bar, but I am wondering if I can get the exact same feature with DrawerNavigator.

But it seems DrawerNavigator has menu buttons. Isn't it possible to configure the overlay myself?

Edit

Solution 1

One way would be to use

const MyStackNavigator = StackNavigator({
  A: { screen: AScreen },
  B: { screen: BScreen },
  C: { screen: CScreen }
});

const RootNavigator = DrawerNavigator({
  A: { screen: MyStackNavigator },
}, {
  // set content of side bar
  contentComponent: (props) => <Sidebar />
});

but then it will possible to drag in the drawer from all screens AScreen, BScreen, and CScreen, while I only want it to be there for AScreen, since the StackNavigator is nested in the DrawerNavigator.

Solution 2

Another solution would be to use

const MyDrawerNavigator = DrawerNavigator({
  A: { screen: AScreen },
}, {
  // set content of side bar
  contentComponent: (props) => <Sidebar />
});

const RootNavigator = StackNavigator({
  A: { screen: MyDrawerNavigator },
  B: { screen: BScreen },
  C: { screen: CScreen }
});

but then the header of AScreen will be on top since the DrawerNavigator is nested in A.