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

This is the nninth chapter of our implementation of an Airbnb clone in React Native, 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:

headerRight: (
        <TouchableOpacity
          style={{ marginRight: 30 }}
          onPress={() =>
            Alert.alert("Logout alert", "Do you really want to Logout...", [
              {
                text: "NO",
                onPress: () => console.warn("NO Pressed"),
                style: "cancel"
              },
              {
                text: "YES",
                onPress: () =>
                  firebase
                    .auth()
                    .signOut()
                    .then(() => {
                      this.props.navigation.navigate("LoggedOut");
                    })
                    .catch(function(error) {
                      // An error happened.
                    })
              }
            ])
          }
        >
          <IonIcons name="md-log-out" size={30} />
        </TouchableOpacity>
      ),

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.

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.