React Native Drawer Navigation Component

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

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

React Native Drawer Navigator Example

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

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 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.

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

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.

Add the following content to create one file inside the screens folder called SideDrawer.js.

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;

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

Run the application using the following command.

react-native run-ios

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

React Native Drawer Example Tutorial

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

React Native Navigation Drawer Tutorial

Step 6: Finishing the Drawer.

Inside the AnalyticsScreen.js file, we need to add an event toggle to the Drawer. So the final file looks like the one 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.

Drawer Navigation in React Native

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

1 thought on “React Native Drawer Navigation Component”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.