AirBnB Clone with React Native Part 9: Persistent login, drawer navigation, and logout

This tutorial is the ninth chapter of our implementation of an Airbnb clone in

React Native. In the previous chapter, we successfully implemented the Firebase

Facebook login feature. this tutorial series came from the [React Native Mobile Templates]( from instamobile

In part 9, we’re going to continue where we left off by implementing a

persistent login state and a logout feature. The idea here will be to check

whether the user is logged in or not. If not, we want to navigate to the Logout

screen with an alert. Then, we’re going to implement the Home screen with the

drawer navigation and add the Logout feature to the Home screen header.

*So let’s begin!*

### Re-configuring Navigation

In this first step, we’re going to make a small change to our navigation code.

We’re going to set the default initial route to the Home screen so that whenever

we launch the app, we are directed to the Home screen. For that, we need to use

the code from the following snippet:

Here, we’ve set the initialRouteName to the Home screen. However, we need to

be in the logged-in state in order to navigate to the Home screen. If we aren’t,

we won’t be able to view the Home screen. For this, we need to check the

presence of the user on the Home screen. If present, we stay in the Home

screen—otherwise, we navigate to the Logout screen.

We need to add the user state checking code in the componentDidMount hook of

the Home screen, as shown in the snippet below:

Here, we’ve called the auth function of the firebase module to check for the

user. If the user is present, we won’t do anything. But if the user isn’t

present, then we navigate to the LoggedOut screen.

Hence, we’ll get the following result in the emulator screen:


As we can see, we end up being navigated to the Logout screen with the alert



Did you know: It’s possible for mobile apps to easily see, hear, sense, and

think — all in real-time. [Learn how and start building for free with Fritz



### Adding a Drawer Navigator

Now, we’re going to add a drawer navigator to our navigation. The drawer

navigation is provided by the react-navigation package itself. So we need to

import it as a createDrawerNavigator function, as shown in the code snippet


Next, we create a new navigator called DrawerNavigator that’s set to the

createDrawerNavigator function. Then we include our old stack navigator in the


Here, we’ve added our stack navigator called AppNavigator to the

createDrawerNavigator function with the drawerLabel set to Home.

Lastly, we need to export the DrawerNavigator in place of the AppNavigator:

### Configuring the Drawer Navigator

Next we’ll configure our drawer navigator with defaultNavigationOptions . For

that, we need to use the code below:

We’ve set the style of the header bar provided by DrawerNavigator. We’ve also

added a menu icon to the left of the header bar using the headerLeft option.

Then, we wrapped the icon with TouchableOpacity component. The

TouchableOpacity component has an onPress event in which the openDrawer

method is called. This will help to slide open the drawer from the left when we

press the icon.

We get the following result in our emulator:



The next revolution in mobile development? Machine learning. Don’t miss out on

the latest from this emerging intersection. [Sign up for weekly updates from our

crew of mobile devs and machine



### Implementing Firebase Logout

In this last phase of this tutorial, we’re going to implement a Logout feature

in our app. Here, we’re going to add a Logout button to the right side of our

header bar on the Home screen. For that, we need to use the code below in the

Home screen file:

Here we’ve made use of the headerRight option of the navigationOptions

config on the Home screen. In the headerRight option, we’ve returned the

template for the Logout button. This template consists of an icon wrapped by the

TouchableOpacity component.

In the onPress event of the TouchableOpacity component, we’ve set the alert

to check whether or not the user really wants to log out. If the user chooses

no, then we cancel the alert. But if the user selects yes, then we call the

firebase module for logging out and navigate to the loggedOut screen.

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


As we can see, when we tap on the logout icon on the header, we’re shown an

alert. And when we choose “Yes” in the alert dialog, we are logged out of the

app and navigated to the Logout screen.

And that’s it! We’ve successfully implemented a drawer navigator and a logout

feature in our AirBnB clone with React Native.

### Conclusion

In this part of our AirBnB clone tutorial series, we first learned how to add a

persistent login state with Firebase. We then implemented a drawer navigator

into our app using the react-navigation package. Then, we learned how to

configure the style and header bar of the drawer navigator in order to display

the menu icon on the Home screen. Lastly, we added a logout button to the header

bar and configured to work with the app’s logout feature.