AirBnB Clone with React Native Part 6: Animated Checkmarks

AirBnB Clone with React Native Part 6: Animated Checkmarks

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!

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:

{% gist https://gist.github.com/razorabhu1995/5617650b77a13ac9ba03991e5f3db72d %}

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:

{% gist https://gist.github.com/razorabhu1995/54e574d32a3c066db4931d734d0bd668 %}

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:

{% gist https://gist.github.com/razorabhu1995/46980f4b7500f30b8f64884b5c74915c %}

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:

{% gist https://gist.github.com/razorabhu1995/a6c0568d62cf2d277f0d0b6c00448e17 %}

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:

{% gist https://gist.github.com/razorabhu1995/336bb604abeb094a447c6a74a771a385 %}

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.

Read more

react-native

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

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...

Build a simple React Native Pokemon app with React-Navigation

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 Developer in India | React Native Development

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.

Which is the best React Native app development company in New York?

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.