How to get drawer over the header in react navigation?

Question

I am using react navigation. I want to show drawer over the header of the screen. Currently my header is not hiding below drawer when I open the drawer.

So how to show the header which is overlaped or covered with drawer of drawer navigation.

Currently its look like this

Answer 1

1. You should create a new StackNavigator for your CategoryScreen and ProductScreen
2. You set the header on CategoryScreen and ProductScreen navigation options

Here is what i meant

// wrap your screen inside the drawer into StackNavigator
const CategoryNavigator = createStackNavigator({
  CategoryList: {
    screen: CategoryScreen,
    navigationOptions: {
      title: "Category",
      header: // any custom header here
    }
  },
});

const drawerScreens = createDrawerNavigator({
  Category: CategoryNavigator,
  Products: ProductNavigator,
}, {
  initialRouteName: 'Category'
})


export default AppStack = createStackNavigator({
  drawer: {
    screen: drawerScreens,
  },
  cart: {
    screen: CartScreen
  }
}, {
  initialRouteName: 'drawer',
});

This is the result

Following will make a floating header which similar with your screenshot

Set the header mode to float (you don't need to wrap CategoryScreen and ProductScreen into StackNavigator)

export default AppStack = createStackNavigator({
  drawer: {
    screen: drawerScreens,
  },
  cart: {
    screen: CartScreen
  }
}, {
  headerMode: 'float', // set this header mode to float so you can share the header
  initialRouteName: 'drawer',
});

This is the result if you change the header mode to float