AppDividend
Latest Code Tutorials

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

After this project, you can able to create a drawer that will 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, then 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

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

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.

Inside the screens folder, create one file 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
  }
});

Now, we need one configuration file called 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.

React Native Drawer Example Tutorial

Now, 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 that can 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.

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 Comment
  1. Zunaira says

    Device: (13:5915) No default export of ‘App.js’ to render!
    why am i getting this error ?

Leave A Reply

Your email address will not be published.

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