This tutorial is the sixth chapter of our implementation of an AirBnB clone in React Native. In the previous chapter, we successfully implemented a loading modal. In case you need to get caught up, here are links to parts 1–5:
In part 6 of the implementation of our AirBnB clone, we’re going to continue from where we left off—implementing animated checkmarks on the login screen input fields, which validate if the email and the password are correct or not.
The implementation of animated checkmarks is pretty simple and can be used in many other cases as well. So it might be helpful for you to learn how to make use of them here. The idea is to show the checkmarks on the right side of the input fields when the email and password that we entered is correct.
This part of our clone implementation directly relates to part 2 of this tutorial series, where we implemented the Login UI—just in case any revision is needed.
So let’s get started!
This step doesn’t really relate to the actual implementation of animated checkmarks, but it might be helpful in many cases. Here, we’re going to change the keyboard style on the basis of which input type the input fields take.
In our Login screen, we have two input fields—one for an email and another for a password. So what we’re going to do is show the keyboard suitable for the email input field and the default keyboard for the password entry field. The code to implement this is provided in the code snippet below:
In the code snippet above, we’ve initialized a keyboardType constant inthe InputFields.js file, which takes a value as email-address if inputType equals email; otherwise it’s default.
Next, we’re going to bind this to our TextInput component of the InputField.js file, as shown in the code snippet below:
Now let’s test to see if this works in our emulator:
As a result, we can see that the keyboard style changes for the email fields.
In this step, we’re going to add the checkmarks on the right side of our input fields in Login Screen. The file we’re going to be working on is the InputField.js file. The idea here is to import the ‘checkmark’ icon from the react-native-vector-icons package and then add it to the Input fields.
First, we need to import the FontAwesome icons from the react-native-vector-icons package in the InputFields.js file, as shown below:
import Icon from ‘react-native-vector-icons/FontAwesome’;
Now we’re going to add those checkmark icons into our input fields by using the following piece of code:
As we can see in the code snippet, we have defined an Icon with name ‘check’ above the TextInput component. This will display the icons on our input fields, as we can see in the emulator screenshot below:
But, the icons are visible on the left side of the input fields. So we need to correct the positioning of the checkmark icons to the right side of the input fields.
Here we’ll position the checkmark icons on the right side of the input fields. For that, we need to wrap the Icon component with the View component. Then, we need to bind some styles to our View component. The code and style are provided in the code snippet below:
As we can see, the View component wraps the Icon component and checkmarkWrapper style is bound to it. The style configuration for the checkmarkWrapper is given below:
As a result, we get the checkmark icons on the right side of the input fields, as shown the emulator screenshot below:
Now we need to show those checkmark icons with the animations that communicate whether or not the email and password we entered are correct.
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...
As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.
Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.
Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.