Airbnb Home Screen UI Clone with React Native #4 : Animate Top Tag Section - Kriss

Airbnb Home Screen UI Clone with React Native #4 : Animate Top Tag Section - Kriss

This tutorial is the fourth part of our Airbnb Home Screen UI clone using React Native. In the previous part, we successfully implemented the Home Around The World sections with home packages. 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 insight and knowledge of the overall project.

As stated in the previous parts, this inspiration for this tutorial series came from React native real estate template which enables us to develop some amazing ready to deploy applications that anyone can use to build startups or sell the application templates. And, this fourth 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 react animations using React Native. The idea is to implement the tags section as in the original Airbnb app’s Home Screen at the bottom of the search bar. The animation comes into play when we scroll the Home Screen from top to bottom or vice-versa. During the scrolling phase from top to bottom, we are going to hide the tags section with animation and make it appear with animation when we scroll back to the top.

So, let us begin!

Implementing Tags Section

In this step, we are going to implement the overall tags section first with any animation. The idea is to implement the tags section in the Explore.js screen file and then move it to a separate component in order for it to be re-usable.

Importing Required Component

First and foremost we are going to import the necessary components for the overall tutorial. The component needed to be imported here is Animated component that provides the animation properties for react-native apps. So, let us import the Animated component from the react-native package as shown in the code snippet below:

import { 
 View, 
 Text, 
 StyleSheet, 
 SafeAreaView, 
 TextInput, 
 Platform, 
 StatusBar, 
 ScrollView, 
 Image, 
 Dimensions, 
 Animated } from "react-native";

Adding Tag Wrapper

Here, we are going to add a wrapper element for enclosing the tab section just below the search bar section in the Explore.js file. For the wrapper element. we are going to use is Animated View component that enables us to integrate the animation properties in the View component. Along with the Animated View wrapper, we are going to add some inline styles as shown in the code snippet below:

<Animated.View style={{ flexDirection: 'row', marginHorizontal: 20, position: 'relative' }}> 
</Animated.View>

Adding Tag

Now, we are going to create an actual tag inside the Animated View wrapper that we created in the previous step. For the tag section, we are going to use the Text component enclosed by the View element. The Text component will hold the text mentioning the tag name with some font styles and the View component will wrap the Text component with styles to make the tag area look proper and appealing. The code to implement this is provided in the code snippet below:

<View style={{ minHeight: 20, minWidth: 40, padding: 5, backgroundColor: "white", borderColor: "#dddddd", borderWidth: 1, borderRadius: 2, marginRight: 5 }}> 
  <Text style={{ fontWeight: "700", fontSize: 10 }}>Guest</Text> 
</View>

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

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.