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.