Building an app like Uber using React-Native

Part 6: Add drawer navigation to our app

If you are coming here for the first time please follow my previous tutorials to know more about this app.

In the previous tutorial we discussed how to book a ride, view all rides and creating header. Now that we have all our major screens ready we will see how we can navigate across the various screens in our app. We will be using react-native-navigation 3.0 component to achieve our navigation use case

React Native provides drawer-navigation, stack-navigation and tab-navigation. We will be using both drawer-navigation and stack-navigation in our app. We will take up stack-navigation will be the next part.

We will be creating a new sub module named mycab_drawer_navigation in our github for this part. I have done the navigation configuration in /app/config/navigation.js and the styles for this screen is present in /app/styles/navigation-styles.js

1. First lets install react-navigation

npm install --save react-navigation

2. Next we need to install react-native-gesture-handler for our navigation to work

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

3. Once done we need to link the components using “react-native link”. “react-native link” is an automatic way for installing native dependencies. It is an alternative to manually linking the dependency in your project.

react-native link

The code for our drawer navigation is

To display the user details in the top along with image we will be using custom component. This is will be defined in our

{
  initialRouteName: 'Home',
  drawerBackgroundColor: 'grey',
  drawerPosition: 'left',
  drawerWidth: 250,
  drawerType : 'slide',
  contentOptions: {
    activeTintColor: 'red',
    inactiveTintColor :'black',
    activeBackgroundColor :'white'
  },
  contentComponent: DrawerMenu,   <-- specify custom component
}

The code for custom component is:

const DrawerMenu = (props) => (
 <SafeAreaView style={{ flex: 1 }}>
 <View style={styles.drawermeniview}>
 <Image source={require(‘../images/user.png’)}
 style={styles.drawermenuimage}>
 </Image>
 <View style={styles.drawermenutext}>
 <Text style={styles.drawername}>User1</Text>
 <Text style={styles.drawermobno}>9988776655</Text>
 </View> 
 </View>
<ScrollView>
 <DrawerItems {…props}>
 </DrawerItems>
 </ScrollView>
 </SafeAreaView>
)

We will use AppContainer to render the code in our app

const AppContainer = createAppContainer(MyDrawerNavigator);
export default AppContainer

Our index.js file will look like

import {AppRegistry} from ‘react-native’;
import navigation from ‘./app/config/navigation’;
import {name as appName} from ‘./app.json’;
AppRegistry.registerComponent(appName, () => navigation);

One the above changes are done run the app using “react-native run-android” and the output will look like below screen.

In the next part we will see how to navigate between the screens using stack navigation. Also when user clicks on the user name or image in the drawer we will display the user profile data. We will handle this in future sections