AirBnB Clone with React Native Part 9: Persistent login, drawer navigation, and logout
Tags: firebase, reactnative
Published: 2019-12-20 23:32:07


---
title: AirBnB Clone with React Native Part 9: Persistent login, drawer navigation, and logout
published: true
tags: Firebase,React native 
canonical_url: https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-9-persistent-login-drawer-navigation-and-logout-7a6f08a8ec56
cover_image: https://cdn-images-1.medium.com/max/2560/1*iIEhgq6z5aE3Ipn7Ejz8GQ.jpeg
---


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](https://www.instamobile.io) 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:

![](https://cdn-images-1.medium.com/max/800/1*fIouS3eb5DmvIwPqTRECZw.gif)

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

*****

> 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
AI.](https://www.fritz.ai/product/standard.html?utm_campaign=buildapps8&utm_source=heartbeat)

*****

### 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
below:

Next, we create a new navigator called `DrawerNavigator` that’s set to the
`createDrawerNavigator` function. Then we include our old stack navigator in the
`DrawerNavigator`:

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:

![](https://cdn-images-1.medium.com/max/800/1*Vg7wINww9_sZ-hnVI1HhPQ.gif)

*****

> 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
learners.](https://www.fritz.ai/newsletter?utm_campaign=heartbeat-newsletter-fomo2&utm_source=heartbeat)

*****

### 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:

![](https://cdn-images-1.medium.com/max/800/1*FEJUlCbFL1RQxUm0tYz3AQ.gif)

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.

*****

*Editor’s Note:*[ Heartbeat](http://heartbeat.fritz.ai/)** ***is a
contributor-driven online publication and community dedicated to exploring the
emerging intersection of mobile app development and machine learning. We’re
committed to supporting and inspiring developers and engineers from all walks of
life.*

*Editorially independent, Heartbeat is sponsored and published by*[ Fritz
AI](http://fritz.ai/)*, the machine learning platform that helps developers
teach devices to see, hear, sense, and think. We pay our contributors, and we
don’t sell ads.*

*If you’d like to contribute, head on over to our*[ call for
contributors](https://heartbeat.fritz.ai/call-for-contributors-october-2018-update-fee7f5b80f3e)*.
You can also sign up to receive our weekly newsletters (*[Deep Learning
Weekly](https://www.deeplearningweekly.com/)* and*[
Heartbeat](https://www.fritz.ai/newsletter)*), join us on*[
](https://join.slack.com/t/fritz-ai-community/shared_invite/enQtNTY5NDM2MTQwMTgwLWU4ZDEwNTAxYWE2YjIxZDllMTcxMWE4MGFhNDk5Y2QwNTcxYzEyNWZmZWEwMzE4NTFkOWY2NTM0OGQwYjM5Y2U)[Slack](http://fritz.ai/slack)*,
and follow Fritz AI on*[ Twitter](https://twitter.com/fritzlabs)* for all the
latest in mobile machine learning.*