fbpx

This tutorial is the seventh chapter of our implementation of an AirBnB clone in React Native. In the previous chapter, we successfully implemented animated checkmarks for our Login form. In case you need to get caught up, here are links to parts 1–6:

In part 7, we’re going to continue where we left off by implementing a “forgot password?” screen. The forgot password screen is available in most web and app systems in case a user forgets their login credentials. Here, the idea is to create a simple forgot password screen with an email input form. Then we’re going to use Firebase to handle the backend configuration.

Importing all necessary components

Before doing anything, we need to create a file named ForgetPassword.js in the ./screens directory of our project. In this file, we need to import a few necessary packages, provided in the code snippet below:

import.js

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

 

Here, we’ve also imported several custom components from our ./components folder. The InputField and NextArrowButton components that we implemented in earlier tutorials are imported from this folder.

Implementing “Forgot Password” screen

Now we need to define a class called ForgotPassword that extends to the Component module, as shown below:

export default class ForgotPassword extends Component {

In the render()function, we need to add the heading and sub-heading. For that, we’re going to add a View component with some styles wrapped by the KeyboardAvoidingView component, which enables us to solve the common problem of views that need to move out of the way of the virtual keyboard.

This component will automatically adjust its positions and paddings based on the position of the keyboard. The View component wraps two child Text components, which consist of text for the heading and sub-heading:

KeyboardAvoidingView.js

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

The styles required are provided in the code snippet below:

StyleSheet.js

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

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

As we can see, we have successfully implemented the heading and sub-heading sections. But there’s a white header at the top that needs to fit the style of the rest of the app. For that, we need to add a similar background color style to the header, as shown in the code snippet below:

navigationOptions.js

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

Here’s what this should look like:

Looking for new ways to elevate your mobile app’s user experience? With Fritz AI, you can teach your apps to see, hear, sense, and think. Learn how and start building with a free account.

Adding a form section

Next, we’re going to add a form that includes a single email input field. For that, we’re going to use the InputField component from the react-native package. The InputField component will contain several props for labels, color, border, etc., as shown in the snippet below:

InputField.js

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

A quick glance at what this looks like:

Adding a submit button

In this step, we’re going to add a ‘submit’ button to the ForgotPassword.js screen in order to submit our email address. For that, we’re going to make use of the NextArrowButton component that we implemented in earlier tutorial parts. We need to add the NextArrowbutton component to the bottom of the screen:

        < NextArrowButton _handelPress_={this.submitEmail} _disabled_={false} /> 
    </ KeyboardAvoidingView >

Here the submit button implemented from NextArrowButton component is set with two props. One is handlePress, set to the submitEmail function. When handlePress is triggered by the child component, the submitEmail function will be triggered in the parent component. The second prop is a disabled prop, which is set to false in order to enable the button.

Here’s what this will look like:

Configuring the form submission

Now we’re going to configure the form submission after pressing the submit button. For that, we’re first going to define an emailAddress state variable that handles the input from the InputField that we added earlier. The emailAddress state is defined as shown in the code snippet below:

new state.js

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

Now we need to create a function to handle the change of the input variable when something is entered in the InputField component. For that, we’re going to create a function called handleEmailChange, which takes in a parameter called email and sets the emailAddress state value to whatever a user types in the email InputField component. The function is provided in the code snippet below:

handleEmailChange.js

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

Now we need to add the handleEmailChange function to the onChangeText event of the InputField component:

event handle.js

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

At this point, we’ve successfully implemented the input form that takes in the entered email address from the user. Now we need to configure the submitEmail function, which will submit the email address entered by the user to Firebase.

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.

Adding Firebase

In this step, we’re going to add the Firebase to the project to handle the overall forgot password process. For that, we need to import the react-native-firebase package into our ForgotPassword.js file, as shown in the code snippet below:

import package.js

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

Note: We’re also importing the Alert component from the react-native package.

Now we’re going to use the Firebase configuration in our submitEmail function in order to send the email address entered in the input form to the Firebase account. The overall configuration for the submitEmail function with firebase config is provided in the code snippet below:

submitEmail.js

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

In the submitEmail function, we call the function sendPasswordResetEmail of thefirebase.auth() function and send an email address stored in the email state.

Then we relieve two callbacks: one for success and one for error. During the callbacks, we’re going to set an alert message using the Alert component as per the result of the callbacks. So whenever we submit the email address, we will get some kind of error on the screen.

Now we need to test our overall implementation. The test is shown in the emulator simulation below:

As we can see, when we enter an invalid email address, we automatically get the error alert on the screen. This means that firebase automatically handles the email address format validation. We can also see that when we enter a valid email address and if the email is not available then it shows another alert message automatically on the screen.

Now we need to test this system by using a valid email address:

As we can see, we get the success alert.

Firebase will then send us (the user) an automated email to help reset our password:

Now when we click on the link provided in the email body, Firebase automatically handles the rest by navigating us to the form screen to change the password, as shown in the screenshot below:

Now we just need to type in the new password and it will be set. This is all handled automatically by Firebase. After we enter the new password in the form shown in the above screenshot and click on ‘Save’, we’ll see the “Password changed”, which confirms the change:

And that’s it! We’ve successfully implemented a Forgot Password? screen with all the necessary configurations in our AirBnB clone project.

Conclusion

In this part of our Airbnb clone series, we learned how to implement a Forgot Password? screen. We also learned how to re-use the components we’ve already implemented, like the submit button. We also got detailed insight on how to handle password changes using the Firebase.

In the next chapter, we’ll learn how to handle Facebook logins, specifically for iOS.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from the different links provided in this article.

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.