AirBnB Clone with React Native Part 1: Home Screen UI
Tags: programming, reactnative, mobiledevelopment, ui
Published: 2019-07-23 14:51:47

---
title: AirBnB Clone with React Native Part 1: Home Screen UI
published: true
tags: programming,react-native,mobile-development,ui
canonical_url: https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-1-home-screen-ui-b5ed1c9278ae
---

### 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-native/) 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.


#### Dynamic UI components with vector icons, props, and more


This tutorial is part one of a project designed to help us build an AirBnB clone with React Native.

To start things off, we’ll learn how to set up an Airbnb boilerplate clone using React Native and create a simple home screen UI. We all know what Airbnb is — a company that provides hospitality services in the form of traveling, booking various kinds of lodging and more.

Their services are used by millions of people worldwide. There website and apps are used widely for booking hotels, connecting with hosts, discovering locations with entire homes, etc.

In this tutorial, we’re just implementing a small part of their app UI — the home screen. We’ll cover the rest of the app’s interface and workings in upcoming tutorials.

Let’s get started!

### Create a new project

We need to create a new react-native project named _airbibcloneapp_ and run it on iOS using the following lines of code in our command line.

First, To initialize our React Native project, run the command:

react-native init airbnbcloneapp

Then, To run the project on iOS, run the command:

react-native run-ios

### Construct the application structure

In terms of application structure, first, we need to create a source i.e. “_src_” folder containing all the app files. Inside it, we need to create components and containers. After that, we move on to the creation of screens and “_img”_ and “_style”_ folders for images and CSS styles.

### Creating a color profile configuration

In this step, we need to create a color profile configuration for our clone app. First, we need to create a “_color ”_ subfolder in the “_style”_ folder and then create an “_index.js_ ” file inside it. Then, we need to open the file and fill the color code to array keys as shown in the following code snippet:

{% gist https://gist.github.com/krissnawat/01de2155381ec0ea580ae8a18e70d216 %}

Then, we need to add an image “_airbnb-logo.png_” file to the image folder, as shown in the screenshot below:

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

### Bootstrap Home Screen

In this step, we begin implementing our home screen UI. In the “_screen_” folder, we need to create a “_LoggedOut.js_” component file, which is used for displaying a home screen when the user is in logout mode. We can do this by using the code in the following code snippet:

{% gist https://gist.github.com/krissnawat/20ff5df521e00ac9d148ac65264c0868 %}

Then, we need to add the component to the “_App.js_” file as shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/463f9ff6930545980c57f503f2a4d96f %}

Now, if we run the emulator for testing, we can see “Hello World” printed at top-left of the screen:

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

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

### Change Background and Add a Logo Image

In this step, we need to include color configuration and add an Airbnb logo image to “_LoggedOut.js_” component. Then, we need to create a style for two wrappers _main_ and _welcome_ and also add style to the logo. We can implement all these by using the code in the following snippet:

{% gist https://gist.github.com/krissnawat/26626a240216528061485eb4f152602f %}

Here, we have two components which are _Logo_ image and _Text_ that are wrapped by _welcomeWrapper_ as we can see in the first section on the code snippet above. Then, we have a main wrapper that wraps all component on the page named _wrapper._

Next, we need to add general styles following design to the component, for which we will use the styles in the code snippet below:

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

For _wrapper:_ We add background color that changes the whole screen color.

For _welcomeWrapper:_ We add margin and padding to handle the layout for two-component.

For _Logo_ and _welcomeText:_ Not too fancy. We just add general styles to make them look clean and nice.

Now, we need to save and reload the emulator. We’ll see the following result:

![](https://cdn-images-1.medium.com/max/476/1*29Ghw96vuJMsT2LCpLA1zw.png)

### Adding Buttons

In this step, to follow up on the design, we need to add two buttons — _Facebook login_ and a normal _Register_ button. These two buttons share the same rounded style. Then we need to create a component name RoundedButton in the button folder inside components, as shown in the screenshot below:

![](https://cdn-images-1.medium.com/max/288/1*HhJ9SEp1V7-ooJ2T8QhQcg.png)

Then, we need to open the “_RoundedButton.js”_ file and use the code shown in the snippet below:

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

Here, we make use of the TouchableHighlight component imported from the react-native package, as shown in the code above.

Then we need to include this button component in our “_LoggedOut.js”_ component by importing it:

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

As a result, we’ll get a button on our screen.

The result of our coding up until now is shown in the emulator screenshot below:

![](https://cdn-images-1.medium.com/max/476/1*hg-H09ja41-IUWwEe4Xopg.png)

We can see that it works properly. So next, we need to style it back to RoundedButton and import prop-type and color configuration files, and we need to make a dynamic component using props.

We start by adding the PropTypes package to help control property values.

We can add this by using the following command:

Using Yarn:yarn add prop-types

And then run the command: reac-native run-ios again.

Next, we need to include it in the RoundedButton component as shown in the code snippet below:

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

First, we need to de-structure the prop value and use it in the Text component. Then we need to create a rule that will require a value when calling this component. We can implement this using the code snippet above.

After, the result in the emulator console will look like:

![](https://cdn-images-1.medium.com/max/476/1*RA2AqR-J2cNLFHh3MtW3QA.png)

Here, when we do not assign a prop’s name text when calling the RoundedButton component, it will show the warning as seen in the above screenshot.

Next, we need to call the TouchableHighlight component to wrap the Text component in order to make it a button and add style, as shown below:

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

First, we need to import TouchableHighlight then extract text from props and use as Text for Button and add propTypes for control prop variable as shown in the code snippet above.

{% gist https://gist.github.com/krissnawat/7343222032b9792f61caf8912ef27803 %}

Secondly, we need to add general style to _wrapper_ and _buttonText_ as shown in the style code snippet above.

Now, we can see the following result in our simulator:

![](https://cdn-images-1.medium.com/max/476/1*9uw_myq058HMrmpix_e0nw.png)

Next, we need to assign more props to configure our button style. We do this by using the following code snippet:

{% gist https://gist.github.com/krissnawat/6ef465976c3be7bed8eff153e3c198d9 %}

Here, we need to extract more props like _textColor_ and _backgroundColor_ that we pass from the parent component to make it similarly. These pieces of code are what’s been added to our previous file.

Now we need to pass an additional parameter from “_LoggedOut.js”_:

{% gist https://gist.github.com/krissnawat/93e80810f00b570004687fd8f93d45b1 %}

The result will look like this:

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

We need to add a default color to the textColor and backgroundColor CSS styles, as shown in the code snippet below:

{% gist https://gist.github.com/krissnawat/0e808704161a6d9baec753fc03b75c5c %}

### Assigning Vector icons

In this step, we assign vector icons to our button, which is wrapped by our TouchableHighlight component.

We follow the design implementations and add a vector icon to a button using the following command:

Using NPM:

npm install react-native-vector-icons

Using yarn:

yarn add react-native-vector-icons

We can follow the instructions [here](https://github.com/oblador/react-native-vector-icons#ios) to install this icons package. Then, we need to make sure that we re-run react-native run-ios again. Next, we add the icons to our buttons using the following code:

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

Here, we can see that we get an error in our emulator:

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

To solve this error, we add view tags wrapping our button and icon, as shown below:

{% gist https://gist.github.com/krissnawat/31d2d5d6cbb596528fc2ad73366d539e %}

Now we can see that our code works properly, and we get the following result in our emulator screenshot:

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

Our next step is to make the icon dynamic by using the prop again. We can implement this by using the code in the following snippet:

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

Then, we need to move all of our react-native-vector-icons code to the LoggedOut.js component, as shown in the code snippet below:

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

Next, we need to adjust the icon wrapper style:

{% gist https://gist.github.com/krissnawat/732358c0d31a72e756e575598dac5b86 %}

And add some CSS styles:

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

Then, we do the same for the Facebook button — we add the Facebook icon and then some CSS styles to it, as shown below:

{% gist https://gist.github.com/krissnawat/78e22fbdc2a31dddc5e11ca561fccca9 %}

And to edit the CSS style:

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

Now we can see the result of adding a Facebook icon to our button in the emulator screenshot below:

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

### Creating an Account Button

In this step, we create an account button, much the same as we did with the Facebook button, using the RoundedButton component, as shown in the code snippet below:

```
\<RoundedButton text="Create Account" textColor={colors.white} /\>
```

The result of adding the “Create Account” button will look as follows:

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

Similarly, we need to add some CSS styles to this button as well. So we need to come back to _Roundedbutton.js_ and add CSS style to a wrapper:

{% gist https://gist.github.com/krissnawat/08cd1af6adb6f102a8c01bd8a29c461a %}

After reloading the emulator, we can see the following result:

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

### Adding More Option Text

Lastly, we follow the design implementation of our home screen UI and add some more options using the Text component:

{% gist https://gist.github.com/krissnawat/60626b85be4ff97afa9c46c6d1acc53e %}

Here, we have a lot of Buttons that will link to multiple pages which we will add to the view screen later on.

Then, we need to add some CSS styles following design to those options to make it look cool clean using the following snippet:

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

We’ve successfully completed our implementation of the Airbnb clone home screen UI. The final result can be seen in the emulator screenshot below:

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

### Recap

In this tutorial, we learned about how to bootstrap React Native UI with many components. We also learned how to set up and use vector icons to make our buttons look sleek. We also got an idea of “props ”in order to make dynamic components. Next, we implement a login screen that takes a lot of styling technique that you should follow in order to complete our Airbnb clone.

### Resources

[AirBnB Clone using React Native from Cubui](https://www.youtube.com/playlist?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. [Learn how](https://www.fritz.ai/features/?utm_campaign=enhance1&utm_source=heartbeat) 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 the all the latest content, news, and more in machine learning, mobile development, and where the two intersect._

* * *