AirBnB Clone with React Native Part 2: Login Screen UI
Tags: mobiledevelopment, heartbeat, reactnative, ui
Published: 2019-08-02 14:24:35

---
title: AirBnB Clone with React Native Part 2: Login Screen UI
published: true
tags: mobile-development,heartbeat,react-native,ui
canonical_url: https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-2-login-screen-ui-999773e860e4
series: AirBnB clone with React Native
cover_image: https://miro.medium.com/max/2400/1*iIEhgq6z5aE3Ipn7Ejz8GQ.jpeg
---

### Make a fully functional real estate app in minutes
Become the next Trulia, Zillow or Airbnb by releasing a real estate app for both iOS and Android in minutes. Download our functional [React Native Real Estate](https://www.instamobile.io/app-templates/real-estate-app-template-react-nativeref=4094&campaign=dev.to) app template, integrated with Firebase Backend, to literally launch your own app today. Crafted with extreme attention to details, this beautiful app template written in React Native represents the best way to jumpstart the development of your new mobile app.


> This tutorial is part two of a project designed to help us build an AirBnB clone with React Native. Find part 1 [here](https://dev.to/kris/airbnb-clone-with-react-native-part-1-home-screen-ui-3dnl).

In this tutorial, we’re going to continue from where we left off in part one where we implemented the home screen UI for our AirBnB clone. Here, we’re going to create the login screen UI in the same project. So I highly recommended going through part one of the tutorial to get a better understanding of the overall React Native AirBnB clone project structure.

We’re just going to create a simple Login Screen clone of AirBnB as shown in the screenshot below:

![](https://cdn-images-1.medium.com/max/558/0*LTcA8T56BymY8viy)

So let’s get started!

#### Creating a Login Screen Component

First of all, we need to create a _Login.js_ file in our _screens_ folder. Then, we can get started with coding the Login.js component with the general starter code shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/d64a9582bac0be7fefef555d80162a91 %}

Here, different React Native components and modules are imported from the package as well as a _color_ CSS file for styling. The Text component with login is wrapped around the ScrollView and ViewComponents. Some styles are also added to the wrapper.

Next, we need to include Login.js in _App.js_ by replacing the LoggedOut component. To do that, we need to first import the Login component and add it to our render function, as shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/b647f64113c4c582563480af72989b56 %}

As a result, we’ll see the following screen in our emulator:

![](https://cdn-images-1.medium.com/max/335/1*jh0JLYTgRxTJjC0LAp6l7Q.png)

Next, we need to bootstrap the screen wrapper with the KeyboardAvoidingView and ScrollView components to handle the form that makes the screen flexible with a virtual keyboard:

{% gist https://gist.github.com/krissnawat/10ed69e2849131bf03cb17219833a9c8 %}

We also need to add some styles to our components:

{% gist https://gist.github.com/krissnawat/90758e47555fe1fa95c18c7c1017ab6b %}

We’re adding CSS styles to following components in the view:

- wrapper: A global wrapper that contains and integrates styles in all children components.
- scrollViewWrapper: Adding some margin to make space between the screen and device by integrating styles to scrollViewWrapper_._
- avoidView: Making space between the left, right, and top device borders by integrating styles to avoidView.
- loginHeader: Adding some font styles like weight, size, and color to the loginHeader component.

As a result, we get the following screen in the emulator:

![](https://cdn-images-1.medium.com/max/379/1*VN9vYldWdNlnHmgy_3v2Cw.png)

> The next revolution in mobile development? Machine learning. Don’t miss out on the latest from this emerging intersection. [Sign up for weekly updates from our crew of mobile devs and machine learners](https://www.fritz.ai/newsletter?utm_campaign=heartbeat-newsletter-fomo2&utm_source=heartbeat).

#### Creating a Form Component

In this step, we’re going to create a form component to capture user credential entries in form fields. To do this, we’re going to create a form component inside the component folder. Then, we’re going to create a _InputFiled.js_ file, bootstrap the form with simple components, and receive props and settings to the component, as shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/59e9c933a91f93f08aec60b11db1c677 %}

Next, we need to include the InputField component in our Login.js component by importing it, as shown below. Then, we need to place the InputField component after the form title:

{% gist https://gist.github.com/krissnawat/3bdc1818216fcb29e14a51d0b8f18ebb %}

Then, we get the following result in our emulator screen:

![](https://cdn-images-1.medium.com/max/379/1*3KhtCLooX5aX6ID5k77_KQ.png)

Now, we need to create a form to handle email and password entries. For this, we need to assign different variables to props and style:

{% gist https://gist.github.com/krissnawat/7c9e6c0ba7cf4a8cd4f9f6f085719c2f %}

First, we need to receive props in order to configure the form and set the default value:

{% gist https://gist.github.com/krissnawat/665e606f504e2bde8387cbc0c6e3b7b9 %}

Then, we use props that we receive to add them to the style, which makes for a more dynamic configuration of our form component. In the end, we export the InputField component.

{% gist https://gist.github.com/krissnawat/dea100982ccecffcbf8e469a309d229a %}

Now, we go to _Login.js_ and include _InputField.js_ and assign our prop:

{% gist https://gist.github.com/krissnawat/38726420a6ca80f27a76552ca84170bb %}

Now, we can see the result of our login screen UI below with form input fields:

![](https://cdn-images-1.medium.com/max/379/1*soajDUbOCl6SOyfUD_r_Tw.png)

#### Adding ‘Next’ Button

In this step, we are going to add a **Next** button for submitting form data. We need to create a file named _NextArrowButton.js_ in our components/buttons directory and import all the packages shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/21018e7a2ce9d4c42f3d5e54483d2d03 %}

The highlight here is the _vector icons_, which we import to display the icon in the form input. The vector icons are imported as Icon from the Fontawesome package:

{% gist https://gist.github.com/krissnawat/9d8188fe10bb6115497403fa6345a7ca %}

Here, we need to include a TouchableHighlight component that makes a button highly customizable, and then add Icon and attribute it for specifying the icon property.

Lastly, we need to manage and handle props using propTypes, as shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/c45a7071af731d01b354f52b2779dc40 %}

For our stylesheet, we have a button container, button body, and icon with the following styling configuration:

{% gist https://gist.github.com/krissnawat/0510399ab02c078fb420c16e1bf24ff9 %}

Here, we need to include a color config in the component. And to use the vector icon angle properly, we need to put the icon at the center of the button.

Next, we need to import the NextArrowButton.js component in _Login.js_ and then integrate the component outside the ScrollView component, wrapping it as shown below:

{% gist https://gist.github.com/krissnawat/12b86319fe0961f4f1d88025af8f9e3d %}

Here’s what this should look like now in our emulator screen:

![](https://cdn-images-1.medium.com/max/267/1*l87vvofpcXEYYjqyicGsrg.gif)

#### Password Toggling

In this step, we’re going to add a password toggle button. We need to follow the design of the login screen component and complete the task to implement password toggling, i.e. show or don’t show the password characters in the password form field.

First, we need to open our _InputField.js_ file and create a constructor and state:

{% gist https://gist.github.com/krissnawat/4d290ba0a82fc006033958e37b1df9c4 %}

We’ve named the state variable secureInput for toggling the form type between password to text or email, which reveals the true form of the password field.

In our render function — const { secureInput } = this.state—we need to define our constant from the state for use in the form.

{% gist https://gist.github.com/krissnawat/5f158f9f3f33fff7255094ef1247efbd %}

In the form component, we need to add new TouchableOpacity and Text components to implement the _show_ and _hide_ text by getting state from secureInput_._ Then, we need to change this state by calling the toggleShowPassword function, as shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/14c45b451841423bb6c60533fb30016a %}

And we need to remember to add styles to the two buttons we define for the TouchableOpacity and Text components:

{% gist https://gist.github.com/krissnawat/d84e1afc01178839c0fb02c420b80ccd %}

Now we need to test to see if the password toggle is working or not. We can see the test being performed in the emulator simulation below:

![](https://cdn-images-1.medium.com/max/267/1*rBhXICx0IJdRAVa1ECcSHg.gif)

As we can see, we got an error while trying to toggle the password between hiding and show. This is because we didn’t bind the new function to it. In order to solve this error, we need to bind the toggleShowPassword function, as highlighted in the code snippet below:

{% gist https://gist.github.com/krissnawat/189dfb68882253dbbe8a4b8727afb766 %}

Let’s try the password toggle test again.

![](https://cdn-images-1.medium.com/max/267/1*IRuBhL5d1S9ziR6JBRJs5w.gif)

Finally, as we can see in the emulator simulation above, the password toggle is successful. This marks the end of this tutorial, as we’ve successfully cloned the AirBnB login screen UI using React Native.

### Recap

In this tutorial, we learned how to implement the AirBnB login screen clone. We learned how to use props for creating a reusable component and how to construct a layout as well.

We also gained insight into how to implement password toggling. In the next part of this tutorial, we’re going to integrate login functionality with Firebase. You can get the overall code for this tutorial [here](https://github.com/krissnawat/airbnbclone-with-react-native).

#### Resource

[AirBnb React Native Clone with Cubui](https://www.youtube.com/watch?v=78Mr7gN6mE4&list=PLOg2mrFoc1TuKfcp4Ll-h2AFzSmujppnZ)

> Looking for new ways to elevate your mobile app’s user experience? [With Fritz, you can teach your apps to see, hear, sense, and think](https://www.fritz.ai/features/?utm_campaign=enhance1&utm_source=heartbeat). Learn how and start building with a free account.

_Editor’s Note:_[_Join Heartbeat on Slack_](http://bit.ly/heartbeatslack) _and follow us on_[_Twitter_](https://twitter.com/fritzlabs) _and_[_LinkedIn_](https://www.linkedin.com/company/fritz-labs-inc/) _for all the latest content, news, and more in machine learning, mobile development, and where the two intersect._

* * *