Amazon UI Clone with React Native #3 : Drawer menu - Kriss

Amazon UI Clone with React Native #3 : Drawer menu - Kriss

This tutorial is the third and final part of our Amazon UI clone using React Native. In the previous part, we successfully implemented the highlight gallery and recommendation section. This part of the tutorial is the continuation of where we left off in the last part. So, it is recommended to go through the previous part for full-on insight and development of the overall project.

As mentioned in the previous parts, this tutorial series was inspired by the React Native Eccomerce template which helps us build some awesome and powerful ready to deploy eCommerce applications that anyone can use to build eCommerce startups or sell the application templates. And, this part is also the continuation of coding implementations and designs from the Youtube video tutorial by Unsure programmer for the Amazon UI clone. The Amazon app’s UI makes it easier for users to navigate to various screens instantly and efficiently with better menu options.

In this part, we are going to implement the drawer menu with customized menu items. The idea is to start by implementing the drawer menu which is set up by drawer navigator which we implemented in the first part of this tutorial. Then, we will customize the drawer menu style and its items according to the need of the actual UI.

So, let us begin!!

Opening and Closing Drawer menu

In the first part of this tutorial series, we remember that we added a menu hamburger icon to the left side of the menu bar. Now in this step, we are going to add an event to the menu icon which helps open and close the drawer menu. For that, we need to add an onPress event to the Icon component having the menu icon. In the onPress event of the Icon component, we are going to add openDrawer() method provided by navigation prop which will trigger the opening and closing of the drawer menu. The overall coding implementation for this section is provided in the code snippet below:

<Left style={{flexDirection: 'row'}}>
  <Icon
    onPress={() => this.props.navigation.openDrawer()}
    name="md-menu"
    style={{color: 'white', marginRight: 15}}
  />
  <FAIcon name="amazon" style={{fontSize: 32, color: 'white'}} />
</Left>

Hence, we will get the following result in our emulator screen:

As we can see, we have successfully implemented the opening and closing of the drawer menu. But, the menu contains no style, just a plain background with a Home screen navigation link. So, now we are going to add some style to the drawer menu in order for it to look just like in the real Amazon app UI.

Customizing Drawer style

In this step, we are going to customize the drawer style in order for it to look just like in the real app. For that, we need to go to the App.js file of our project and then import the native-base package with Container and Header components. Then, we are going to set up a drawer custom content handler function called CustomDrawerContentComponent which takes props as a parameter. This handler function is defined to return the template for a customized drawer menu. Then, we need to implement a Header component with the necessary inline style to return from the handler function.

We remember that we implemented the drawer navigator called MyDrawerNavigator in the first part of this tutorial series. In the navigator, we only passed the screen config as a first parameter. Now, we need to configure the second parameter in order to position and style the drawer menu. For that, we need to set the drawerPosition to left in the second parameter object as well as pass the CustomDrawerContentComponent function to its contentComponent option as shown in the code snippet below:

import React from 'react';
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';
import {Container, Header} from 'native-base';
import Home from './screens/Home';
const CustomDrawerContentComponent = props => {
  return (
    <Container>
      <Header style={{backgroundColor: '#3a455c', height: 90}}></Header>
    </Container>
  );
};
const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: Home,
    },
  },
  {drawerPosition: 'left', 
    contentComponent: CustomDrawerContentComponent
  },
);
export default createAppContainer(MyDrawerNavigator);

As a result, we will get the customized drawer menu as shown in the emulator simulation below:

Read More

react-native mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

Create React Native eCommerce Mobile App

Find out how to build eCommerce mobile application with React Native. Tips and tricks to save time, efforts, and money.