Airbnb Home Screen UI Clone with React Native #2 : Recommended Homes - Kriss

Airbnb Home Screen UI Clone with React Native #2 : Recommended Homes - Kriss

[/sociallocker]This tutorial is the second part of our Airbnb Home Screen UI clone using React Native. In the previous part, we successfully implemented the bottom tab bar and the search bar at the top. 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 part for better understanding and insight into the overall project.

As mentioned in the first part, the inspiration for the creation of this tutorial series came from 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 part is also the continuation of coding implementations and designs from the Youtube video tutorial by Unsure programmer for the Airbnb clone.

In this part, we are going to implement two main sections to our Home Screen UI which will emphasize the recommended homes from the actual app. They are the Category section and Airbnb plus section on the Explore screen. The idea is to start by implementing the category section. Then, we will convert the category code implementation to a single component and make the component reusable. Then, we are going to move to the designing fo Airbnb section UI.

So, let us begin!!

Implementing Category Section

Importing Required Component

First, we are going to import the required components into the Explore.js file from the react-native package. The required components are ScrollView, Image and Text component which we are going to use in the Explore.js file to implement the Category section. All the imports are shown in the code snippet below:

import { View, TextInput, Text, Image, SafeAreaView, ScrollView } from "react-native";

Adding HeroText containing Description

In this step, we are going to make use of ScrollView and Text component that we imported before in the Explore.js file. The ScrollView component enables us to implement a view which users can scroll. We are going to implement it with scrollEventThrottle of value 16. Then, the ScrollView component wraps a View component with inline styles for proper view. Then, the View component wraps the Text component containing a description with some inline styles to make the description look as in the original app. The code to implement all this is provided in the code snippet below:

<ScrollView scrollEventThrottle={16}> 
 <View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}> 
   <Text style={{ fontSize: 24, fontWeight: "700", paddingHorizontal: 20 }} > What can we help you find, Varun? </Text> 
 </View> 
</ScrollView>

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

In this step, we are going to create a feature section in which we display the image of a home along with some text at the bottom. This section is to coded below the description section. For this, we need to add a new View Component that wraps another View component in the process. Both the View components will have inline styles for the correct view. The inner View component will wrap the Image component which has the source image acquired from ‘./images’ directory. We need to bind some styles to the Image component as well to make the image look proper and nice. Then just below the View component that wraps the Image component, we need to add another View component with some inline styles. Now, this View component will wrap the Text component which will contain some text describing the image. The code to implement all this is provided in the code snippet below:

Read more

react-native mobile-apps

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.