381 reads

Airbnb UI Clone with React Native Part #3 : Home View Around The World Section

by krissanawat October 14th, 2019

Too Long; Didn't Read

This tutorial series was inspired by React native template which helps us build some amazing ready to deploy applications that anyone can use to build startups or sell the application templates. This tutorial is the continuation of the same tutorial from where we left off in the last part. Here, we are going to implement a section that displays the home packages in the Home Screen UI. The idea is to include an image with some description, title, and price in the grid-style layout. We are also going to include the star-ratings from the react-native-star-rating package later on.

Companies Mentioned

featured image - Airbnb UI Clone with React Native Part #3 : Home View Around The World Section

This tutorial is the third part of our Airbnb Home Screen UI clone using React Native. In the previous part, we successfully implemented the Category and Airbnb plus sections. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous parts for better understanding and insight into the overall project.

As mentioned in the previous parts, this tutorial series was inspired by React native template which helps us build some amazing ready to deploy applications that anyone can use to build startups or sell the application templates. And, this third part is also the continuation of coding implementations and designs from the Youtube video tutorial by for the Airbnb clone.This part of our tutorial series is fairly simple. Here, we are going to implement a section that displays the home packages in the Home Screen UI. The idea is to include an image with some description, title, and price in the grid-style layout. Then, we are also going to include the star-ratings from the package later on.

So, let us begin!!

Adding Title

First, we are going to add a title to the home package section. For that, we need to make use of

Text

component with some inline styles in our Explore.js file just below the Airbnb Plus section.

Then, we need to wrap the

Text

component with the View component with some margin style as shown in the code snippet below:

<View style={{ marginTop: 40 }}>
       <Text
         style={{
           fontSize: 24,
           fontWeight: "700",
           paddingHorizontal: 20
         }}
       >
         Homes around the world
       </Text>

Hence, we get the following result in the emulator screen just below the Airbnb Plus section shown by an arrow:

Adding an Image and Description

Now, we need to add an image and its description just below the title section that we just implemented. For the image, we are going to use the

Dimensions

component provided by the react-native package. The

Dimensions

component enables us to get the full width and height of our app screen. So, we need to import the

Dimensions

component along with other components from the react-native package.

And then, we need to assign two constants height and width which are initialized to the entire height and width of the screen using get() method provided by

Dimentions

component as shown in the code snippet below:

import {
  View,
  TextInput,
  Text,
  Image,
  SafeAreaView,
  ScrollView,
  Dimensions
} from "react-native";
import Category from "../components/Category";
const { height, width } = Dimensions.get("window");

Then, we need to create new View wrappers. First, we need to define a parent View component and then, two View components inside the parent which are the child View components. The child View components are added to feature an image and a text description.The View component that wraps the Image component is styled by custom width and height which are initialized to half of the screen width and one-third of the screen height.

The Image component is bound to its own inline style properties as shown in the code snippet below:

<View style={{ paddingHorizontal: 20, marginTop: 20 }}>
     <View style={{ width: width / 2, height: width / 3 }}>
       <Image
         style={{
           flex: 1,
           width: null,
           height: null,
           resizeMode: "cover"
         }}
         source={require("../images/home.jpeg")}
       />
     </View>
     <View style={{ flex: 1 }}></View>
 </View>

As a result, we get a beautiful image just below the title as shown in the emulator screenshot below:

Now, it is time to add the description section just below the image. We have defined a child View component already for this section. Now, we are going to add three

Text

components inside this View component, all with their own inline style properties.

The View component itself has its own set of inline style properties which includes flex styles as shown in the code snippet below:

<View
  style={{
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "space-evenly",
    paddingLeft: 10
  }}
>
  <Text style={{ fontSize: 10, color: "#b63838" }}>
    Private Roome - 4 Beds
  </Text>
  <Text style={{ fontSize: 12, fontWeight: "bold" }}>
    The Spring House
  </Text>
  <Text style={{ fontSize: 10 }}>65$</Text>
</View>

As a result, we get the description section just below the image as shown in the emulator screenshot below:

Now, we have successfully created a home package section with just one package that is being displayed. But, we need to display multiple packages to the home package section. In order to do that, we are going to create a separate component for this package section. Then, reuse it multiple times in the Explore.js file to display the full home package section.

Implementing a Separate Component

In this step, we are going to create a separate component that includes the image section and the description section that we implemented earlier.

Here, we need to create a component file called Home.js in the
```
‘./components’
```
directory.
Then, in the Home.js file, we need to import all the necessary packages in order to implement the Image and description section.
Then, we need to create a class called
```
Home
```
which extends to Component module.
After that, we need to include the code for the image and description section that we implemented in the previous step inside the render() function of Home class.
Then, we need to replace the static data with props from the parent component.

The props we need to send from parent component and receive here in this Home.js child component are height and with properties, type, name, and price as shown in the code snippet below:

import React, { Component } from "react";
import { View, Text, StyleSheet, Image } from "react-native";

class Home extends Component {
  render() {
    return (
      <View
        style={{
          width: this.props.width / 2 - 30,
          height: this.props.width / 2 - 30,
          borderWidth: 0.5,
          borderColor: "#dddddd"
        }}
      >
        <View style={{ flex: 1 }}>
          <Image
            style={{ flex: 1, width: null, height: null, resizeMode: "cover" }}
            source={require("../images/home.jpeg")}
          />
        </View>
        <View
          style={{
            flex: 1,
            alignItems: "flex-start",
            justifyContent: "space-evenly",
            paddingLeft: 10
          }}
        >
          <Text style={{ fontSize: 10, color: "#b63838" }}>
            {this.props.type}
          </Text>
          <Text style={{ fontSize: 12, fontWeight: "bold" }}>
            {this.props.name}
          </Text>
          <Text style={{ fontSize: 10 }}>{this.props.price}$</Text>
        </View>
      </View>
    );
  }
}
export default Home;

Now, after we have implemented the Home.js component, we need to include this component in our main screen that is our Explore.js file. So, we need to import the Home.js component into our Explore.js file as we did in the previous tutorials. Then, we need to include Home components into our View component for the Home package section with all the required props passed down to child component as shown in the code snippet below:

         <View
                style={{
                  padding: 20,
                  marginTop: 20,
                  flexDirection: "row",
                  flexWrap: "wrap",
                  justifyContent: "space-between"
                }}
              >
                <Home
                  width={width}
                  name="The Cozy Place"
                  type="PRIVATE ROOM - 2 BEDS"
                  price={82}
                />
                <Home
                  width={width}
                  name="The Cozy Place"
                  type="PRIVATE ROOM - 2 BEDS"
                  price={82}
                />
                <Home
                  width={width}
                  name="The Cozy Place"
                  type="PRIVATE ROOM - 2 BEDS"
                  price={82}
                />
              </View>

Hence, we get the following result in our emulator screen.

As we can see, now our Home Screen UI displays the home package section with three home packages in the grid style. But, it is not over yet. We still need to add one more thing to these grid package sections which is a star rating. The star ratings indicate the rating given by users who have bought those packages in the real app.

Implementing Star Rating

In this last step of this tutorial, we are going to add the star rating just below the Text component showing the price of the package. For that, we need to install the package which enables us to add the required star rating component with all the configurations required. This package delivers a React Native component for generating and displaying interactive star ratings available both in iOS and Android. So, in order to install this package we need to run the following command into our project directory:

yarn add react-native-star-rating

Next, we need to import the react-native-star-rating package into our Home.js file component as shown in the code snippet below:

import { View, Text, StyleSheet, Image } from "react-native";
import StarRating from 'react-native-star-rating'
class Home extends Component {

Then, we need to initialize the

StarRating

component that we imported just below the Text component featuring price of the package as shown in the code snippet below:

 <View style={{ flex: 1, alignItems: 'flex-start', justifyContent: 'space-evenly', paddingLeft: 10 }}>
    <Text style={{ fontSize: 10, color: '#b63838' }}>{this.props.type}</Text>
    <Text style={{ fontSize: 12, fontWeight: 'bold' }}>{this.props.name}</Text>
    <Text style={{ fontSize: 10 }}>{this.props.price}$</Text>
    <StarRating
        disable={true}
        maxStars={5}
        rating={this.props.rating}
        starSize={10}

    />
</View>

Here, some props are set to the StarRating component in order to configure it properly.

The disable prop has the value of true in order to make the stars read-only. maxStars prop has a value of 5 in order to display a total of 5 stars only.The ratings prop is set to the prop value that is to be received from the parent component. This rating prop is used to display the number of stars that a home package has among a total of 5 stars.

Now, we need to go to the Explore.js file and set another prop to our Home component. The rating prop with required value needs to be passed down to the Home child component as shown in the code snippet below:

<Home
  width={width}
  name="The Cozy Place"
  type="PRIVATE ROOM - 2 BEDS"
  price={82}
  rating={4}
/>
<Home
  width={width}
  name="The Cozy Place"
  type="PRIVATE ROOM - 2 BEDS"
  price={82}
  rating={3}
/>
<Home
  width={width}
  name="The Cozy Place"
  type="PRIVATE ROOM - 2 BEDS"
  price={82}
  rating={5}
/>

Hence, we get the following result with ratings shown in each package as shown in the emulator screenshot below:

Finally, we have successfully created all the sections required to display the Home packages section in the Airbnb Home Screen UI clone.

Conclusion

This tutorial is the third part of the Airbnb Home Screen UI clone tutorial series. In this part, we continued from where we left off in the first part of this tutorial series. Here, we learned how to implement the re-usable component and use it in multiple places in the screen files.

We also learned how to arrange the home package components in grid style making the use of

Dimensions

component. Then, we got an insight into how to use the react-native-star-rating package in order to display the star ratings into our home packages. And then, we finally displayed the Home Packages Section to our Home Screen UI clone using React Native.

In the next part, we will start implementing animations of the search bar.

L O A D I N G
. . . comments & more!