title: Setting up customizable Header in React Native
body: <p>I wish to create Header for my Notes Storage App on React Native. I have Tried using stackNavigator till now but I am caught up on how to add menu icon which onPres will open the Drawer. I tried using HeaderLeft in stackDesignHead but it gives an error. Also using a FAB is not recommended.</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import HomePage from './src/HomePage/HomePage';
  import NotesFolder from './src/notes';
  import CreateNewFolder from './src/CreateNewFolder';
  import Icon from 'react-native-vector-icons/Ionicons';
  import Constants from 'expo-constants';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { createDrawerNavigator } from '@react-navigation/drawer';
  
  const Drawer = createDrawerNavigator();
  const Stack = createStackNavigator();
  const stackDesignHead = {
            title: "Notes Classifier", 
  
            headerTintColor:"white", 
            headerStyle:{ 
              backgroundColor:"#fcba03"
  
              },
              headerTitleStyle: {
                fontWeight: 'bold',
              },
              headerTitleAlign: 'center'
  }
  function LeftDrawer () {
    return(
  
  
            &lt;Stack.Navigator&gt;
            &lt;Stack.Screen 
            name="HomePage"
            component={HomePage} 
            options={stackDesignHead}
            /&gt;
            &lt;Stack.Screen 
            name="NotesFolder"
            component={NotesFolder} 
            options={{...stackDesignHead,title:"Notes"}}
            /&gt;
            &lt;Stack.Screen 
            name="CreateNewFolder"
            component={CreateNewFolder} 
            options={{...stackDesignHead,title:"+ new Folder"}}
            /&gt;
  
            &lt;/Stack.Navigator&gt;
    )
  }
  
  const menuDesignHead = {
    title: "Notes Classifier",
  
    headerTintColor:"white",
    headerStyle:{
      backgroundColor:"#fcba03"
  
      },
    headerTitleStyle: {
        fontWeight: 'bold',
      },
      headerTitleAlign: 'center'
  
  }
  
  function App () {
  
    return(
          &lt;View style={styles.container}&gt;
            &lt;Drawer.Navigator initialRouteName="Home"&gt;
                &lt;Drawer.Screen 
                name="Home"
                component={LeftDrawer} 
                options={{menuDesignHead}}
                /&gt;
                &lt;/Drawer.Navigator&gt;
          &lt;/View&gt;
    );
  }
  export default()=&gt;{
    return(
      &lt;NavigationContainer&gt;
        &lt;App/&gt;
  
      &lt;/NavigationContainer&gt;
    )
  }
  </code></pre>
  
  <p>I am new to react native and unaware of various ways to create header.</p>