React Native Navigation Drawer – Example using Latest Navigation

Navigation Drawer/Sidebar

This is an Example of React Native Navigation Drawer for Android and IOS. We will use react-navigation to create a navigation drawer in this React Navigation example. React Native Navigation Drawer could be a extremely popular component in React Native app development. It provides you to manage the amount of React Native app options in an exceedingly easy manner. A user can navigate from one screen to a different screen very easily by just pulling out the navigation drawer. Here is an example of a navigation drawer.

To Create React Navigation Drawer

const DrawerNavigatorExample = createDrawerNavigator({
  //Drawer Optons and indexing
  Screen1: { //Title
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: "Demo Screen 1"
    }
  },
  Screen2: {//Title
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: "Demo Screen 2"
    }
  },
  Screen3: {//Title
    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: "Demo Screen 3"
    }
  },
});
export default createAppContainer(DrawerNavigatorExample);

In this example, we will make a navigation drawer with Three screens. So let’s get started.

To Make a React Native App

Getting started with React Native will help you to understand more about the way you’ll be able to make a React Native project. We are getting to use react-native init to create our React Native App. Assuming that you just have node installed, you’ll be able to use npm to install the react-native-cli program line utility. Open the terminal and move to the workspace and run.

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the –version argument:

react-native init ProjectName --version X.XX.X

react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependencies

To install the dependencies open the terminal and jump into your project

cd ProjectName

1. Install react-navigation dependency to import createAppContainer

npm install react-navigation --save

2. Install react-native-gesture-handler dependency to support gesture navigation

npm install react-native-gesture-handler --save

3. Install react-navigation-drawer to import createDrawerNavigator

npm install react-navigation-drawer --save

4. Install react-native-reanimated for the drawer animation (Used internally by react-navigation-drawer)

npm install react-native-reanimated --save

These steps are enough for the drawer navigation but in this example, we are also using createStackNavigator to switch screens, so please follow the next step also

5. Install react-navigation-stack to import createStackNavigator

npm install react-navigation-stack --save

These commands will copy all the dependencies into your node_module directory.

CocoaPods Installation

After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the libraries but need to install pods.

In this example, we need to install the pods for react-native-gesture-handler and react-native-reanimated.

Please use the following command to install CocoaPods

cd ios && pod install && cd ..

Project Structure

To start with this Example you need to create a directory named pages in your project and create three files Screen1.js, Screen2.js, and Screen3.js in it.

To have the drawer Icon in Action Bar you have to make an image directory in your project and have to copy any drawer image with name drawer.png (For this example. You can change if you want but you need to change the file name in code too).

Code

Now Open App.js in any code editor and replace the code with the following code.

App.js

//This is an example code for NavigationDrawer//
import React, { Component } from 'react';
//import react in our code.
import { View, Image, TouchableOpacity } from 'react-native';
// import all basic components

//For React Navigation 3+
//import {
//  createStackNavigator,
//  createDrawerNavigator,
//  createAppContainer,
//} from 'react-navigation';

//For React Navigation 4+
import {createAppContainer} from 'react-navigation';
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createStackNavigator} from 'react-navigation-stack';
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';

class NavigationDrawerStructure extends Component {
  //Structure for the navigatin Drawer
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
          <Image
            source={require('./image/drawer.png')}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

const FirstActivity_StackNavigator = createStackNavigator({
  //All the screen from the Screen1 will be indexed here
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 1',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen2_StackNavigator = createStackNavigator({
  //All the screen from the Screen2 will be indexed here
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 2',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen3_StackNavigator = createStackNavigator({
  //All the screen from the Screen3 will be indexed here
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 3',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const DrawerNavigatorExample = createDrawerNavigator({
  //Drawer Optons and indexing
  Screen1: {
    //Title
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 1',
    },
  },
  Screen2: {
    //Title
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 2',
    },
  },
  Screen3: {
    //Title
    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 3',
    },
  },
});

export default createAppContainer(DrawerNavigatorExample);

Open pages/Screen1.js in any code editor and the Replace the code with the following code.

Screen1.js

//This is an example code for NavigationDrawer//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, Text } from 'react-native';
// import all basic components

export default class Screen1 extends Component {
  //Screen1 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 1 </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
  },
});

Open pages/Screen2.js in any code editor and the Replace the code with the following code.

Screen2.js

//This is an example code for NavigationDrawer//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, Text } from 'react-native';
// import all basic components

export default class Screen2 extends Component {
  //Screen2 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 2 </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
  },
});

Open pages/Screen3.js in any code editor and the Replace the code with the following code.

Screen3.js

//This is an example code for NavigationDrawer//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, Text } from 'react-native';
// import all basic components

export default class Screen3 extends Component {
  //Screen3 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 3 </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
  },
});

To Run the React Native App

Open the terminal again and jump into your project using.

cd ProjectName

To run the project on an Android Virtual Device or on real debugging device

react-native run-android

or on the iOS Simulator by running

react-native run-ios (macOS only).

Tags :

Website Designing Company in Delhi || Magento Development Company

website designing company in rohini

About Post Author

kishan kumar

administrator

Professional Web Apps and Hybrid Software Developer !! You can ping me if any Web Development or Hybrid Native or Cross-platform Apps Development work. Connect me on info@appfinz.com

See author's posts