fbpx

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! 

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:

{
   initialRouteName: "Home",
   headerMode: "none"
}

 

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:

componentDidMount() {
  firebase.auth().onAuthStateChanged(user => {
    if (user) {
    } else {
      alert("Your have not logged in");
      this.props.navigation.navigate("LoggedOut");
    }
  });
}

 

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

defaultNavigationOptions: ({ navigation }) => ({
    headerStyle: {
      backgroundColor: colors.green01,
      elevation: 0,
      shadowOpacity: 0
    },
    headerLeft: (
      <TouchableOpacity
        style={{ marginLeft: 20 }}
        onPress={() => navigation.openDrawer()}
      >
        <IonIcons name="md-menu" size={30} />
      </TouchableOpacity>
    ),
    
    headerTintColor: "#333333",
    headerTitleStyle: {
      fontWeight: "bold",
      color: "#ffffff"
    }
  })

 

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:

const DrawerNavigator = createDrawerNavigator({
  AppNavigator: {
    screen: AppNavigator,
    navigationOptions: {
      drawerLabel: "Home"
    }
  }
});

 

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:

export default createAppContainer(DrawerNavigator);

 

Configuring the Drawer Navigator

Next we’ll configure our drawer navigator with defaultNavigationOptions . For that, we need to use the code below:

defaultNavigationOptions: ({ navigation }) => ({
    headerStyle: {
      backgroundColor: colors.green01,
      elevation: 0,
      shadowOpacity: 0
    },
    headerLeft: (
      <TouchableOpacity
        style={{ marginLeft: 20 }}
        onPress={() => navigation.openDrawer()}
      >
        <IonIcons name="md-menu" size={30} />
      </TouchableOpacity>
    ),
    
    headerTintColor: "#333333",
    headerTitleStyle: {
      fontWeight: "bold",
      color: "#ffffff"
    }
  })

 

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:

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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares