Drawer Navigator

Drawer Navigator renders a navigation drawer on the side of the screen which can be slides in and out from the left or right side of the screen.

To use this navigator, install the necessary react native package by running following command

npm install @react-navigation/drawer

Also install dependencies using following command

npm install react-native-gesture-handler react-native-reanimated

To configure react-native-reanimated add Reanimated’s Babel plugin to your babel.config.js.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

Example:

1. Create DashboardScreen component folder in src folder with following code in DashboardScreen.js file

import React from 'react';
import {Text, View} from 'react-native';

const DashboardScreen = () => {
  return (
    <View>
      <Text>Dashboard screen</Text>
    </View>
  );
};

export default DashboardScreen;

and also create index.js file

import DashboardScreen from './DashboardScreen';

export {DashboardScreen};

2. Second create AboutScreen folder with AboutScreen .js file and index.js files

import React from 'react';
import {Text, View} from 'react-native';

const AboutScreen = () => {
  return (
    <View>
      <Text>About screen</Text>
    </View>
  );
};

export default AboutScreen;

import AboutScreen from './AboutScreen';

export {AboutScreen};

3. Replace App.js file with following code

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {DashboardScreen} from './src/screens/DashboardScreen';
import {AboutScreen} from './src/screens/AboutScreen ';
import {createDrawerNavigator} from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

const MyDrawer = () => {
  return (
    <Drawer.Navigator initialRouteName={'Dashboard'}>
      <Drawer.Screen
        name="Dashboard"
        component={DashboardScreen}
        options={{title: 'Welcome'}}
      />
      <Drawer.Screen name="About" component={AboutScreen } />
    </Drawer.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
};

export default App;