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 real estate 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 Unsure programmer 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 react-native-star-rating 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> 
</View>

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:

Read more

#mobile-apps #react-native