title: How to get drawer over the header in react navigation?
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  import { createStackNavigator, createDrawerNavigator  } from 'react-navigation';
  import CategoryScreen from './CategoryScreen';
  import ProductsScreen from './ProductsScreen';
  import CartScreen from './CartScreen';
  
  
  const drawerScreens = createDrawerNavigator ({
      Category: CategoryScreen,
      Products: ProductsScreen,
  },{
      initialRouteName: 'Category'
  }
  )
  
  
  export default AppStack = createStackNavigator(
      { 
          drawer: {
              screen: drawerScreens,
              navigationOptions: ({ navigation }) =&gt; ({
                  header: &lt;View style={styles.container}&gt;&lt;Text&gt;Header&lt;/Text&gt;&lt;/View&gt;
                }),
          }, 
          cart: {screen: CartScreen} 
      },
      {
          initialRouteName: 'drawer',
      }
  );
  
  const styles = StyleSheet.create({
      container: {
          height: 100,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'orange',
      }
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>So how to show the header which is overlaped or covered with drawer of drawer navigation.</p>
  
  <p>Currently its look like this </p>
  
  <p><a href="https://i.stack.imgur.com/FiN1v.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FiN1v.png" alt="enter image description here"></a></p>