A Beginner’s guide to create React Native Drawer Navigation

React Native is a very popular framework for developing cross-platform mobile applications. Having Navigation in a mobile application is very crucial. For handling Navigation in React Native we have React Navigation library that is widely used. In this blog we will be learning how we can create a drawer navigation system in React Native using React Navigation.

Getting Started

Before moving further into the code, make sure that you already have React Native project set up and React Navigation library installed, if not you can use the below commands to initialize one.

npx react-native init DrawerApp

then move to the project folder using command and install required libraries.

cd DrawerApp
npm install @react-navigation/native @react-navigation/drawer

Setting Up Basic Navigation

At first, you need to set up the basic navigation structure in App.js file. Import necessary modules from React Navigation library and then create a Drawer Navigator.

// App.js Component

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

// Import screens ( this we will be creating next )

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

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="About" component={AboutScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

The above setup will create a drawer navigation with two screens: Home and About. Let’s create the screen components in the next step.

Creating Screen Components

Create a screens folder and then create two screen components naming HomeScreen.js and AboutScreen.js inside it.

// HomeScreen.js

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

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to About"
        onPress={() => navigation.navigate('About')}
      />
    </View>
  );
};

export default HomeScreen;

// AboutScreen.js

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

const AboutScreen = ({ navigation }) => {
  return (
    <View>
      <Text>About Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
};

export default AboutScreen;

The above two components contain a Text element to display the screen name and Button that will help to navigate between the screens.

Adding Styles to Drawer

To make the drawer look more appealing, you can add custom styles into it. Update the App.js file to include custom drawer styles:

//App.js file

// ... previous code

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Home"
        drawerStyle={{
          backgroundColor: '#f0f0f0',
          width: 240,
        }}
        drawerContentOptions={{
          activeTintColor: '#3498db',
          itemStyle: { marginVertical: 5 },
        }}
      >
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="About" component={AboutScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

In the above example, the drawerStyle object sets the background color and width of the drawer, whereas the drawerContentOptions helps you to customize the appearance of the items inside the drawer.

Conclusion

React Navigation simplifies the process of creating navigation so that you can focus more on creating interactive user interfaces and seamless user-experience. Thank you for coming till the end and don’t forget to explore more features and customization options provided by React Navigation.

For more such blogs and updates follow Front-end Competency.

Follow NashTech Blogs for more amazing blogs.