Airbnb Home Screen UI Clone with React Native #3 : Home Around the world - Kriss

Airbnb Home Screen UI Clone with React Native #3 : Home Around the world - Kriss

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

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.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

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.

Create React Native eCommerce Mobile App

Find out how to build eCommerce mobile application with React Native. Tips and tricks to save time, efforts, and money.

Top React Native Mobile App Development Companies in New York

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.