This tutorial is the third and final part of our Amazon UI clone using React Native. , 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. In the previous part 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 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. Unsure programmer 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 ser <Left style={{ : }}> <FAIcon name="amazon" style={{fontSize: 32, color: 'white'}} /> </Left> flexDirection 'row' this.props.navigation.openDrawer()} name="md-menu" style={{color: 'white', marginRight: 15}} /> < = => Icon onPress {() 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 file of our project and then import the native-base package with and components. Then, we are going to set up a drawer custom content handler function called 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. App.js Container Header CustomDrawerContentComponent We remember that we implemented the drawer navigator called 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 function to its option as shown in the code snippet below: MyDrawerNavigator CustomDrawerContentComponent contentComponent React ; {createDrawerNavigator} ; {createAppContainer} ; {Container, Header} ; Home ; CustomDrawerContentComponent = { ( <Header style={{backgroundColor: '#3a455c', height: 90}}></Header> ); }; MyDrawerNavigator = createDrawerNavigator( { : { : Home, }, }, { : , : CustomDrawerContentComponent }, ); createAppContainer(MyDrawerNavigator); import from 'react' import from 'react-navigation-drawer' import from 'react-navigation' import from 'native-base' import from './screens/Home' const => props return < > Container </ > Container const Home screen drawerPosition 'left' contentComponent export default As a result, we will get the customized drawer menu as shown in the emulator simulation below: Adding Drawer Menu Items In this step, we are going to add some menu option items to our customized drawer menu. For that, we need to use the additional components from the native-base package to structure the menu items properly. The required components are provided in the code snippet below: import { Icon, Container, Content, Header, Left, Body, Right, List, ListItem } from 'native-base' Now, we are going to implement the header section of the drawer menu first. For that, we need to make use of the Left component from the native-base package inside the component. The component with some flex style properties will wrap the Icon component showing a person icon. Header Left And also a component that will greet the user as shown in the code snippet below: Text <Left style={{ : , : , : }}> <Text style={{ marginLeft: 5, fontSize: 22, color: 'white', fontStyle: 'italic' }}>Hello, Kriss</Text> flex 1 flexDirection 'row' alignItems 'center' < = = ' ' }} /> Icon name "person" style {{ color: white </ > Left Both the and component for the header section contains some inline styles to make them look as in the real Amazon app. Icon Text Using FlatList for Menu Items Now, we need to add the menu items. For that, we are going to use the component from the react-native package. component allows us to set a particular data prop that takes in an array. Then, it allows just to render the template containing those array data in an iterative manner using the renderItem prop. FlatList FlatList Then, inside the function prop of the component, we are going to make use of component from the native-base package for rendering list items. The component wraps the component with the text value from the data prop of component. In a similar manner, we are going to create three sections in our customized drawer menu. renderItem FlatList ListItem ListItem Text FlatList FlatList The component wraps all three component below the Header component as shown in the code snippet below: Content FlatList <Content> <ListItem noBorder> <Text>{item}</Text> </ListItem> <FlatList style={{ borderTopWidth: 0.5, borderTopColor: '#f0f0f0' }} data={[ 'Your Wish List', 'Your Account', "Amazon Pay", "Prime", "Sell on Amazon" ]} renderItem={({ item }) => ( <ListItem noBorder> <Text>{item}</Text> </ListItem> )} /> <FlatList style={{ borderTopWidth: 0.5, borderTopColor: '#f0f0f0' }} data={[ 'Settings', 'Customer Service' ]} renderItem={({ item }) => ( <ListItem noBorder> <Text>{item}</Text> </ListItem> )} /> ( < = ' ', ' ', " ' " ]} = }) => FlatList data {[ Home Shop by Category Today s Deals renderItem {({ item )} /> Hence, we will get the following drawer menu with its items as shown in the emulator screenshot below: Finally, we have successfully completed the implementation of a customized drawer menu in our Amazon UI clone project. This brings us to the end of our Amazon UI clone tutorial series. Its been insightful, fun and interesting. Conclusion This tutorial is the third and final part of the Amazon UI clone tutorial series. In this part, we continued from where we left off in the second part of this tutorial series. Here, we learned how to implement the opening and closing of the drawer menu using the navigation prop. We got full-on detailed insight on how to customize the style of our drawer menu by using extra parametric options in our drawer navigator. Then, we also learned to implement the list of drawer menu items using the component from react-native. FlatList Well, this brings us to the end of our tutorial for implementing the Amazon UI clone. Hope it has been interesting and insightful in many ways. Do Stay Tuned for more Tutorial series!!
