How to do Hamburger Menu in React-Native Application

Hello my friends,

We will learn “How to do Hamburger Menu in React-Native?” in this post. We used Windows in this application.

I’m thinking, you know “How to create new project in react native”. (If you don’t know you can check my other posts.) I skipped this step. Now, we created our project and opened with our IDE (I’m using visual studio code.) Now, we will create our hamburger menu pages. Firstly, we will create Pages folder in our root directory. You don’t have to create this folder or you can change folder name. But it’s important for project future.

Our pages folder is ready. Now, we will add some library in this project. This libraries are for our pages. We should run as follow commands in our command prompt page.

npm install native-base --save
react-native link
npm install react-native-elements

After this setup completed, we will create detail pages. I will use HomePage.js, ProfilePage.js, SettingsPage.js, NotificationPage.js This four page is enough for us. But if you want, you can add more pages. This pages will be empty.

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Header } from 'react-native-elements';
import { Left, Right, Icon } from 'native-base';

class HomePage extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Header
                    leftComponent={<Icon name="menu" onPress={() => this.props.navigation.openDrawer()} />}
                />
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>Home Page</Text>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});
export default HomePage;

You can use this code in other pages. Just you should change page name to your page name. This pages have a header and text component.

Demo pages are okay. We will add navigation library. You should run as follows code for this.

npm i react-navigation

After this setup completed, we will clear App.js file. It’s in root directory. We will add our libraries and pages. This libraries are as follows.

import React, { Component } from 'react';
import { Text, View, SafeAreaView, ScrollView, Dimensions, Image } from 'react-native';
import { createDrawerNavigator, DrawerItems, createAppContainer } from 'react-navigation';
import { Icon } from 'native-base';
import HomePage from './Pages/HomePage';
import SettingsPage from './Pages/SettingsPage';
import NotificationsPage from './Pages/NotificationsPage';
import ProfilePage from './Pages/ProfilePage';

We are ready for create a hamburger menu. Let’s start.

Firstly, we will design hamburger menu. If you know web programming, you can think as html.

We added logo area for application and then text area for username or application name.

After then text area, we added DrawerItems tag. It’s for our menu items. Pages will show in this area.

Finally, we will add two icon for contact, information or etc. These icons are clickable and will be in bottomed page.

We need to create assets folder in root directory. If we not, application will error. We created assets folder and then copied no-image.png We used this in menu. Menu design is as follows.

const CustomDrawerNavigation = (props) => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 250, backgroundColor: '#d2d2d2', opacity: 0.9 }}>
<View style={{ height: 200, backgroundColor: 'Green', alignItems: 'center', justifyContent: 'center' }}>
<Image source={require('./assets/no-image.png')} style={{ height: 150, width: 150, borderRadius: 60 }} />
</View>
<View style={{ height: 50, backgroundColor: 'Green', alignItems: 'center', justifyContent: 'center' }}>
<Text>John Doe</Text>
</View>
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
<View style={{ alignItems: "center", bottom: 20 }}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flexDirection: 'column', marginRight: 15 }}>
<Icon name="flask" style={{ fontSize: 24 }} onPress={() => console.log("Tıkladın")} />
</View>
<View style={{ flexDirection: 'column' }}>
<Icon name="call" style={{ fontSize: 24 }} onPress={() => console.log("Tıkladın")} />
</View>
</View>
</View>
</SafeAreaView>
);
}

Now, we will define pages. Firstly, we will create createDrawerNavigator item. We created menu design previous step and will use now. Our code screenshots are as follows.

const Drawer = createDrawerNavigator({
  Home: {
    screen: HomePage,
    navigationOptions: {
      title: 'Homepage'
    }
  },
  ProfilePage: {
    screen: ProfilePage,
    navigationOptions: {
      title: 'ProfilePage'
    }
  },
  Notifications: {
    screen: NotificationsPage,
    navigationOptions: {
      title: 'Notifications'
    }
  },
  SettingsPage: {
    screen: SettingsPage,
    navigationOptions: {
      title: 'SettingsPage'
    }
  }
},
  {
    drawerPosition: 'left',
    contentComponent: CustomDrawerNavigation,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
    drawerWidth: (width / 3) * 2
  });

You should repeat as follows code block for all new page.

SettingsPage: {
    screen: SettingsPage,
    navigationOptions: {
      title: 'SettingsPage'
    }
  }

After above step finished, we will add as follows code in bottom of our App.js file.

const App = createAppContainer(Drawer);

export default App;

Menu finished. When we started application, It will error. The screenshot is as follows.

The solution is easy. We stopped our application (With CTRL + C in command prompt) and then ran as follows code.

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

After finished setup, We will re-install application in virtual device. When setup is finished, we can use our hamburger menu.

After finished this step, we will add icon for menu items. It’s not requirement but If you add, your menu will look good. Before, We added native-base library in our project. Now, we will use this. We will add this code block in our all pages. This code block should be over to Render method.

static navigationOptions = {
        drawerIcon: ({ tintColor }) => (
            <Icon name="home" style={{ fontSize: 24, color: tintColor }} />
        )
    }

You can use https://ionicframework.com/docs/ionicons/ for menu icons. You should change name properties in above code. Finally, our project is as follows.

You can find project code in here.

Click here for Turkish.