AppDividend
Latest Code Tutorials

React Native Drawer Navigator Example

118

Get real time updates directly on you device, subscribe now.

React Native Drawer Navigator Example is today’s leading topic. 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. After this example, you can able to create a drawer which will toggle based on the button. Let us start this React Native Drawer Navigator Example by installing React Native on Mac.

React Native Drawer Navigator Example

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

#1: Install React Native.

Type the following command to install it globally.

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

#2: Create a HomeScreen for our application.

Inside the root folder, create one folder called screens. Inside that folder, create one file called HomeScreen.js. 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 App.js file write the following code. 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'
  }
});

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

We have already one file comes 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';

#4: Create one more screen.

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

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

Related Posts
1 of 8
// 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 startMainTab.js file inside 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 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 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

#6: Finishing the Drawer.

Inside the AnalyticsScreen.js file, we need to add an event that can toggle the Drawer. So 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 working Drawer. React Native Drawer Navigator Example is over. Thanks for taking. I have put this code on Github.

Github Code

Leave A Reply

Your email address will not be published.

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