How do I add a navigation drawer to my App.js in React Native

·

3 min read

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>
      );
      }
}