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:
- AirBnB Clone with React Native Part 1: Home Screen UI
- AirBnB Clone with React Native Part 2: Login Screen UI
- AirBnB Clone with React Native Part 3: Email Authentication with Firebase
- AirBnB Clone with React Native Part 4: Login error notifications
- AirBnB Clone with React Native Part 5: Loading Modal Implementation
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!
Switching keyboards based on Input Types
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.
Implementing Checkmarks
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’;
Adding checkmark icons
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.
Positioning the checkmark icons correctly
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.
Handling checkmark icons with Animation
Finally, this is the step where we animate our checkmark icons and make them look more appealing. We’re also going to handle the hiding and showing of the checkmark icons when our entered email and password are correct.
First, we need to import the Animated and Easing component from the react-native package into our InputField.js file, as shown in the code snippet below:
Setting up Animation and Scale properties
Now we’re going to set up the animation configuration. Here, we need to initialize a state called scaleCheckmarkValue with a default Animated value, which is 0.
Next we need to define a function named scaleCheckmark(), which takes in boolean scale value as a parameter (either 1 or 0). In the function, we’re going to configure the overall animation properties. The code for the state variable and the function is provided in the code snippet below:
Now, for the function to handle the animation:
In the scaleCheckmark() function, the timing method in the Animated component is used to configure the overall animation. It takes the first parameter as scale value, which is scaleCheckmarkValue and the second parameter as an animation config option in which toValue is set to a boolean scale value which will be either 0 or 1, duration of animation is set to 400ms and easing animation style is set to easeOutBack from the Easing component.
Now, need to initialize the animate variable—i.e. scaleCheckmarkValue —inside the render() function of our InputField.js file:
Now by using the scaleCheckmarkValue, which provides an interpolate() method, we’re going to set the scale value for animation, which is defined in the iconScale constant. The interpolate() method takes an object parameter with an inputRange and outputRange for the scale values. The code for this is provided in the snippet below:
Now we’re going to wrap the View enclosing the Icon component withthe Animated component and add new a transpose style with iconScale as the scale value. The code for this is provided in the snippet below:
This helps to animate our checkmark icons. Now we need to handle the hiding and showing of checkmark icons by sending the prop condition value from Login.js to InputField.js based on the correct email and password entry.
Handling the showing of checkmark icons
Lastly, we’ll handle the visibility of our checkmark icons. They must only be visible when we enter the correct email and password.
For that, let’s send the boolean prop showCheckmark from the parent screen (Login.js) to the child component (InputField.js). The code to send the prop from Login.js is provided in the snippets below:
As we can see, we’ve sent the prop showCheckmark to both the input fields for email and password. If the conditions given in the curly braces of the showCheckmark value are valid, then true is sent as a prop to InputField.js; otherwise, false is sent.
Now it’s time to receive the prop value showCheckmark and handle the showing of checkmark icons in the InputField.js file. The code to receive the prop showCheckmark is given in the snippet below:
As we can see, the showCheckmark prop is received as a constant inside the render function of the InputField.js file.
Now we need to set the value of a scale value variable named scaleValue to either 1 or 0 based on the boolean value in 1 prop. Then we need to call the function that we defined earlier—scaleCheckmark() —with the parameter as a scaleValue. The code for this should be placed after the interpolate function that we configured earlier:
Now the scaleValue will dynamically change the toValue config option inside the timing() function of the Animated component. Hence, this will make the checkmarks visible when the condition to showCheckmark is true with an easing out animation.
Let’s see if everything works properly through the following simulation:
Finally, as we can see, we’ve successfully implemented animated checkmarks in our Login input fields using React Native.
Conclusion
In this tutorial, we learned how to implement animated checkmarks in the input fields of the login screen to simulate if the user’s entered email and password are correct or not. The same thing can be used to check the validity of email and password in other cases.
We also learned how to pass data between parent and child components as props in React Native. We got detailed insight on how to use the Animated component with all its configurations.
In the end, we successfully created animated checkmarks that appear when users enter the correct email address and password. This example can be used in many other features to make your React Native application more user friendly.
It’s very important to understand the animation features in React Native to build applications that have smooth and beautiful UIs. Thus, this is just a simple example to help get you started.
Editor’s Note:Heartbeat is a contributor-driven online publication and community dedicated to exploring the emerging intersection of mobile app development and machine learning. We’re committed to supporting and inspiring developers and engineers from all walks of life.
Editorially independent, Heartbeat is sponsored and published byFritz AI, the machine learning platform that helps developers teach devices to see, hear, sense, and think. We pay our contributors, and we don’t sell ads.
If you’d like to contribute, head on over to ourcall for contributors. You can also sign up to receive our weekly newsletters (Deep Learning Weekly andHeartbeat), join us onSlack, and follow Fritz AI onTwitter for all the latest in mobile machine learning.
Top comments (0)