AirBnB Clone with React Native Part 6: Animated Checkmarks
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
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’;
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
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:
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
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
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.