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. I
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. this tutorial series inspired from the React Native Templates
So let’s begin!
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
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 message.
export default createAppContainer(DrawerNavigator);
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
Here, we’ve added our stack navigator called
AppNavigator to the
createDrawerNavigator function with the
drawerLabel set to
Lastly, we need to export the
DrawerNavigator in place of the
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 learners.
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
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
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.
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.