React Native Drawer Navigation Example 2021

Drawer Navigation

A user can navigate from one screen to another screen by using a drawer. In drawer navigation views are accessible through a drawer that slides in from the left side of the screen.Just like tab navigation, a drawer navigator allows users to switch between equally important views quickly.

First we can import drawer navigator from the react-navigation library.

import {createDrawerNavigator} from 'react-navigation'

We will also need to install some dependencies that are used in conjunction with react-navigation.

npm install react-native-gesture-handler react-native-reanimated 
react-native-screens react-native-safe-area-context @react-native-community/masked-view

react-native-gesture-handler helps to manage gestures within the mobile app. react-native-reanimated allows for greater flexiblity and usage with the Animated API. react-native-screen exposes native navigation components.react-native-safe-area-context used to handle safe areas.

Example:

________________________________________________________

   import React, { Component } from 'react';
   import { View, Text, StyleSheet, Button } from 'react-native';
   import Icon from 'react-native-vector-icons/Ionicons';
   import {createAppContainer,createSwitchNavigator} from 'react- navigation';
   import {createDrawerNavigator} from 'react-navigation-drawer';
   import {createStackNavigator} from 'react-navigation-stack';

    export default class App extends Component {
        render() {
            return <AppContainer />;
        }
    }

    class WelcomeScreen extends Component {
        static navigationOptions = {
             title: 'Welcome',
        };
        render() {
            return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>WelcomeScreen</Text>
                    <Button
                        title="Go to DashboardScreen"
                    onPress={() => this. props.navigation.navigate ('Dashboard')}
                    />
                </View>
            );
        }
    }

    class DashboardScreen extends Component {
        static navigationOptions = {
             title: 'Dashboard',
        };

        render() {
            return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>DashboardScreen</Text>
                </View>
            );
        }
    }
    const DashboardStackNavigator = createStackNavigator(
        {
            DashboardNavigator: DashboardScreen
        },
        {
            defaultNavigationOptions: ({ navigation }) => {
            return {
                headerLeft: (
                    <Icon
                        style={{ paddingLeft: 10 }}
                        onPress={() => navigation.openDrawer()}
                        name="md-menu"
                        size={30}
                    />
                )
            };
            }
        }
    );

    const WelcomeStackNavigator = createStackNavigator(
        {
            WelcomeNavigator: WelcomeScreen
        },
        {
            defaultNavigationOptions: ({ navigation }) => {
                return {
                    headerLeft: (
                        <Icon
                            style={{ paddingLeft: 10 }}
                            onPress={() => navigation.openDrawer()}
                            name="md-menu"
                            size={30}
                        />
                    )
                };
            }
        }
    );
    const AppDrawerNavigator = createDrawerNavigator({
        Dashboard: {
            screen: DashboardStackNavigator
        },
        Welcome: {
            screen: WelcomeStackNavigator
        },
    });

    const AppSwitchNavigator = createSwitchNavigator({
        Dashboard: { screen: AppDrawerNavigator },
        Welcome: { screen: WelcomeScreen },
       });

    const AppContainer = createAppContainer(AppSwitchNavigator);
      const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center'
        }
    });