React Native Drawer Navigator: The Complete Guide

React Native Navigation is a robust library that helps us create Navigation between different screens, Drawer Navigation, and Tab navigation in our React Native apps. We also use Ionicons to display the icons on the screen. 

React Native Drawer Navigator

To create a drawer navigator in React Native, use the react native navigation and toggle-based button. After this demo project, you can create a drawer toggle based on the button.

But first, let us start this React Native Drawer Navigator Example by installing React Native on Mac.

Step 1: Install React Native.

Install React Native using React Native CLI. If you have not installed the React Native CLI, install it globally by the following command.

sudo npm install -g react-native-cli

Now, create a React Native project using the following command.

react-native init drawer

Go into the project folder.

cd drawer

Install the third-party library using the following command.

yarn add react-native-navigation react-native-vector-icons

Now link these dependencies or configure them with our project using the following command.

react-native link

You also need to change one thing if not done correctly.

In Xcode, you will need to edit this file: AppDelegate.m.

Replace all of its code with this reference

Replace @"index.ios" with @"index" if you are using index.js as your entry point instead of index.ios.js and index.android.js (it is the default since React Native 0.49).

Step 2: Create a HomeScreen for our application.

Inside the root folder, create one folder called screens. Then, inside that folder, create one file called HomeScreen.js. Then, write the following code inside it.

// HomeScreen.js

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

export default class HomeScreen extends Component {

  onButtonPress = () => {
    console.log('Button Pressed!!')
  }

  render() {
    return (
      <View>
        <Text>Home Screen</Text>
        <Button title="Tab Navigation" onPress = { this.onButtonPress } />
      </View>
    );
  }
}

Okay, now, inside the App.js file, write the following code. First, we need to register the Navigation component.

// App.js

import { Navigation } from 'react-native-navigation';

import HomeScreen from './screens/HomeScreen';

Navigation.registerComponent('drawer.HomeScreen', () => HomeScreen);

Navigation.startSingleScreenApp({
  screen: {
    screen: 'drawer.HomeScreen',
    title: 'Home'
  }
});

Step 3: Create an index.ios.js file inside the root.

We already have one file with a project called the index.js, but we will not use it. Instead, we create iOS specifically. That is why its name is index.ios.js.

Write the following line of code inside the index.ios.js file.

// index.ios.js

import App from './App';

Step 4: Create one more screen.

Inside the screens folder, create one file called AnalyticsScreen.js and add the following code inside it.

// AnalyticsScreen.js

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

export default class AnalyticsScreen extends Component {
  render() {
    return (
      <View>
        <Text> Your AnalyticsScreen </Text>
      </View>
    )
  }
}

Now, register this screen inside the App.js file.

// App.js

import { Navigation } from 'react-native-navigation';

import HomeScreen from './screens/HomeScreen';
import AnalyticsScreen from './screens/AnalyticsScreen';

Navigation.registerComponent('drawer.HomeScreen', () => HomeScreen);
Navigation.registerComponent('drawer.AnalyticsScreen', () => AnalyticsScreen);

Navigation.startSingleScreenApp({
  screen: {
    screen: 'drawer.HomeScreen',
    title: 'Home'
  }
});

Step 5: Create a SideDrawer Component.

Create one file inside the screens folder called SideDrawer.js and add the following content.

This is the component we will display as a sidebar drawer.

// SideDrawer.js

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

export default class SideDrawer extends Component {
    render() {
      return (
        <View style = { styles.container }>
          <Text> SideDrawer </Text>
        </View>
      )
    }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 22,
    backgroundColor: 'white',
    width: Dimensions.get("window").width * 0.8
  }
});

We need one configuration file inside the startMainTab.js file inside the screens folder. So let us create it.

// startMainTab.js

import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons'; 

const startTabs = () => {
  Promise.all([
    Icon.getImageSource("ios-share-alt", 30),
    Icon.getImageSource("ios-menu", 30)
  ]).then(sources => {
    Navigation.startTabBasedApp({
      tabs: [
        {
          screen: 'drawer.AnalyticsScreen',
          label: 'Analytics',
          title: 'Analytics',
          icon: sources[0],
          navigatorButtons: {
            leftButtons: [
              {
                icon: sources[1],
                title: "Menu",
                id: 'sideDrawerToggle'
              }
            ]
          }
        }
      ],
      drawer: {
        left: {
          screen: 'drawer.SideDrawer'
        }
      }
    });
  });
}

export default startTabs;

So, here we have used one tab screen called AnalyticsScreen.js. Also, we have attached the Drawer to it. Now, we need to import this inside the HomeScreen.js file. So when the user clicks on the button, we can see the AnalyticsScreen tab.

// AnalyticsScreen.js

import React, { Component } from 'react';
import { View, Text,Button } from 'react-native';
import startMainTab from './startMainTab';

export default class HomeScreen extends Component {

  onButtonPress = () => {
    startMainTab();
  }

  render() {
    return (
      <View>
        <Text>Home Screen</Text>
        <Button title="Tab Navigation" onPress = { this.onButtonPress } />
      </View>
    );
  }
}

Okay, now run the application using the following command.

react-native run-ios

Now, you will see your Home Screen like the below image.

Now, click on the Tab Navigation, and you will see the following screen.

Step 6: Finishing the Drawer.

Inside the AnalyticsScreen.js file, we need to add an event toggle the Drawer. So the final file looks like below.

// AnalyticsScreen.js

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

export default class AnalyticsScreen extends Component {

  constructor(props) {
    super(props);
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
  }

  onNavigatorEvent = event => {
    if(event.type === "NavBarButtonPress") {
      if(event.id === "sideDrawerToggle") {
        this.props.navigator.toggleDrawer({
          side: 'left'     
        });
      }
    }
  }

  render() {
    return (
      <View>
        <Text> Your AnalyticsScreen </Text>
      </View>
    )
  }
}

Also, register the SideDrawer.js inside App.js file.

// App.js

import { Navigation } from 'react-native-navigation';

import HomeScreen from './screens/HomeScreen';
import AnalyticsScreen from './screens/AnalyticsScreen';
import SideDrawer from './screens/SideDrawer';

Navigation.registerComponent('drawer.HomeScreen', () => HomeScreen);
Navigation.registerComponent('drawer.SideDrawer', () => SideDrawer);
Navigation.registerComponent('drawer.AnalyticsScreen', () => AnalyticsScreen);

Navigation.startSingleScreenApp({
  screen: {
    screen: 'drawer.HomeScreen',
    title: 'Home'
  }
});

Save the file and go to the Simulator, and refresh the screen. Now you can able to toggle the Drawer.

Finally, we have achieved our goal and created a working Drawer. React Native Drawer Navigator Example is over. Thanks for taking it. I have put this code on Github.

Github Code