How do I add a navigation drawer to my App.js in React Native
Hi I'm trying to implement a side menu. How do I go about adding a navigation drawer to my header. I want it to appear on every screen except on login and register.
App.js
import { View, Image, TouchableOpacity, Platform, StatusBar, Button } from 'react-native';
import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {createAppContainer} from 'react-navigation';
import HomeScreen from './pages/home';
import NewsfeedScreen from './pages/newsfeed';
import SettingsScreen from './pages/settings';
import ContactsScreen from './pages/contacts';
import MapScreen from './pages/map';
import FaqScreen from './pages/faq';
import AngelsScreen from './pages/angels';
import SplashScreen from 'react-native-splash-screen'
import Login from './components/login';
import Signup from './components/signup';
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator
initialRouteName="Login"
screenOptions={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#000000',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}>
<Stack.Screen
name="Signup"
component={Signup}
options={{ title: 'Signup' }}
/>
<Stack.Screen
name="Login"
component={Login}
options={
{title: 'Login'},
{headerLeft: null}
}
/>
<Stack.Screen
name="Home"
component={HomeScreen}
options={
{ title: 'Home' },
{headerLeft: null}
}
/>
</Stack.Navigator>
);
}
export default class App extends Component<{}> {
componentDidMount() {
SplashScreen.hide();
}
render() {
return (
<NavigationContainer>
<MyStack />
<StatusBar barStyle = "light-content" hidden = {false} backgroundColor = "#000000" />
</NavigationContainer>
);
}
}