How to integrate a custom drawer navigator in a react-native app

In this shot, we will go over how to integrate a custom drawer navigator in a react-native project.

Before integrating the drawer navigator, we need to create a new react-native project. To create a new react-native project, use the command below in your terminal:

npx react-native init drawerexample

Now use the command below to enter into the project and open the project in VS Code:

cd drawerexample
code .

In order to integrate the drawer navigator, we need to install certain react-native navigation npm packages. First, install an npm package as shown below:

npm install @react-navigation/native

After installing it, run the following commands:

npm install react-native-screens react-native-safe-area-context

After installing these packages, change the code in your App.js to include Navigation Container from the react-native navigation package, as shown below:

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
 {/* Your Navigation Screens will be here */} 
    </NavigationContainer>
  );
}

To integrate drawer navigator in our project, we need to install another package:

npm install @react-navigation/drawer

We are now going to add our drawer navigator to our App.js.

App.js

import * as React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator >
        {/*Rest of the Navigation Code Comes here*/}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

In the code above, we include the drawer navigator package and also include the drawer navigator wrapper in our navigation container. The next step is to include drawer navigation screens in our react-native application. For that, we need to create a new component called `Tutorial Screen (or any other name we want) and import the component in App.js to use it in the drawer screens.

TutorialScreen.js

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

const TutorialScreen = () => {
  return (
    <View>
      <Text>React Native Tutorial from Educative io</Text>
    </View>
  );
};
export default TutorialScreen;

Import the Tutorial Screen component in App.js:

import TutorialScreen from './TutorialScreen'

Now, we need to include it as a drawer screen in our drawer wrapper, as shown below:

<Drawer.Screen name="Tutorial" component={TutorialScreen} /> 

The final code of App.js will be as follows:

App.js

import * as React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';

import TutorialScreen from './TutorialScreen';
const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Tutorial" component={TutorialScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

We have successfully integrated a Drawer navigator in our react-native project. Now, how can we open and close the drawer programmatically or through user interaction?

There are two ways to show and hide the drawer navigator:

• swipe from the left side in our emulator or real device.
• use a function called toggleDrawer() provided by the react-navigation package.

To use the second method, we need to go inside the TutorialScreen component and add a navigation prop in the component. All the components inside the navigation container will get the property of navigation, so we can use it to work with navigation.

TutorialScreen.js

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

const TutorialScreen = ({navigation}) => {
  return (
    <View>
      <Text>React Native Tutorial from Educative io</Text>
    </View>
  );
};
export default TutorialScreen;

The next step is to add text with an onPress prop:

<Text onPress={()=>navigation.toggleDrawer()}>
Toggle Drawer 
</Text>

Below is the full code for TutorialScreen.js:

TutorialScreen.js:

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

const TutorialScreen = ({navigation}) => {
  return (
    <View>
      <Text>React Native Tutorial from Educative io</Text>
      <Text onPress={() => navigation.toggleDrawer()}>Toggle Drawer</Text>
    </View>
  );
};
export default TutorialScreen;

If you press the text “Toggle Drawer,” you will be able to see that the drawer navigator is visible, and if you press on the text again, the drawer will hide.

Next, let’s integrate a custom drawer navigator. To do so, you have to make a new component called CustomDrawer. We are going to add View and Text in this component.

CustomDrawer.js

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

const CustomDrawer = () => {
  return (
    <View>
      <Text>Custom Drawer Educative io</Text>
    </View>
  );
};
export default CustomDrawer;

Import the CustomDrawer in App.js as shown below:

import CustomDrawer from './CustomDrawer'

You have to include the CustomDrawer component in the Drawer.Navigator wrapper as shown below:

<Drawer.Navigator drawerContent={props => <CustomDrawer {...props} />}>

Once you do this, reload the application and when you toggle the drawer, you will see that you have successfully integrated a custom drawer navigator in your react-native project.

You can customize further by adding multiple react-native tags and many more features in your custom drawer component.

You can see the complete code in this GitHub repository.