Airbnb Home Screen UI Clone with React Native #4 : Animate Top Tag Section
Tags: reactnative, airbnbclone, layout
Published: 2019-10-12 11:30:59

---
title: Airbnb Home Screen UI Clone with React Native #4 : Animate Top Tag Section
published: true
date: 2019-10-07 08:04:18 UTC
tags: React native,airbnb clone,layout,react native
canonical_url: https://kriss.io/airbnb-home-screen-ui-clone-with-react-native-4-animate-top-tag-section/
cover_image : https://kriss.io/wp-content/uploads/2019/10/airbnb-part-2.png
---

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](https://www.instamobile.io/app-templates/real-estate-app-template-react-native/?ref=4094&campaign=dev.to) 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](https://www.youtube.com/watch?v=amvHRGNY9Z4) 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:

```javascript
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:

```javascript
<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:

```javascript
<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:

![](https://kriss.io/wp-content/uploads/2019/10/img_5d9a8fca0231c.png)

As we can see, we have the tag just below the search bar but the tag is sticking to the bottom of the search bar section. So, in order to solve this, we are going to add some styles in order to get the tag into the right position. Some styles containing the top and margin properties are to be added to the `Animated View` component as shown in the code snippet below:

```javascript
</View> 
<Animated.View style={{ flexDirection: "row", marginHorizontal: 20, position: "relative", top: 5 }}>
```

Therefore, we will get the following result on our emulator screen:

![](https://kriss.io/wp-content/uploads/2019/10/img_5d9a90329fecf.png)

Now, we are going to create the second tag by copying the same piece of code inside the tag’s `Animated View` component and paste it below the View element enclosing the first tag with a different name. Then, we will get the following result with two tags on the emulator screen:

![](https://kriss.io/wp-content/uploads/2019/10/img_5d9a90a01a54e.png)

As we can see, we have successfully created the tag section. But, copying the same overall code for the tag section again and again to show multiple tags seems illogical. Hence, we are going to move the overall coding implementation of tags section to a new component in order to make it reusable.

### Creating a new Component for the Tags section

In this step, we are going to create a new component into our ‘./components’ directory. So, let us create a new file named Tag.js inside the ‘./components’ directory. Then, inside the Tag.js component file, we need to import all the necessary components required for the tags section that we imported before in the Explore.js screen. After that, we need to create a `class` called `Tag` which extends to the `Component` module. And inside the `Tag` class `render()` method, we need to include the code template required for a single tag from the Explore.js file.

Practically speaking, we need to copy the code that is enclosed inside the `Animated View` component of the Explore.js screen and then paste it here inside the `render()` function. Then, we need to replace the tag name inside the `Text` component with a prop value called `name` which is to be passed down from the parent component.  All the coding implementation required for the tag component is provided in the code snippet below:

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

class Tag extends Component { 
  render() { 
    return ( 
      <View style={{ minHeight: 20, minWidth: 40, padding: 5, backgroundColor: "white", borderColor: "#dddddd", borderWidth: 1, borderRadius: 2, marginRight: 5 }} > 
        <Text style={{ fontWeight: "700", fontSize: 10 }}> {this.props.name} </Text> 
      </View> 
    ); 
  } 
} 
export default Tag;
```

Now, we need to import our `Tag` component from ‘./components’ directory into the Explore.js screen file as shown in the code snippet below:

```javascript
import Tag from "../components/Tag";
```

Now, we need to include the `Tag` component inside our `Animated View` component with a `prop` called `name` defined with the proper tag name. The `name` prop is passed down to the `Tag` component  as shown in the code snippet below:

```javascript
 <Animated.View style={{ flexDirection: "row", marginHorizontal: 20, position: "relative", top: 5 }}> 
   <Tag name={"Guest"} />
   <Tag name={"Dates"} /> 
 <Animated.View> 
</View>
```

Hence, we get the same result as before but with the utilization of component as shown in the emulator screenshot below:

![](https://kriss.io/wp-content/uploads/2019/10/img_5d9a9201bbbe0.png)

As we can see, we have successfully implemented the tag section by creating the separate Tag component. Now, it’s time to work on animation.

## 

## Implementation of Animation

In this section, we are going to implement the animation on the tag section. The idea is to hide the tag section when scrolling from top to bottom and make the tag section reappear when scrolling back to the top.

### Configuring Vertical Animation

Here, we are going to add the animation configuration to the `ScrollView` component in the Explore.js screen file. For that, we need to include the `event` method configuration provided by `Animated` component inside the `onScroll` event of `ScrollView` component to extract the offset in Y-axis to a variable as shown in the code snippet below:

```javascript
<ScrollView scrollEventThrottle={16} 
  onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: this.scrollY } } }] )}>
```

Next, we need to define an animated variable called `scrollY` initialized to value 0. Then, we also need to define the start height of the tab section as `startHeaderHeight` initialized to value 0. Likewise, end height of the tab section as `endHeaderHeight` initialized to 50 as shown in the code snippet below:

```javascript
constructor(props) { 
  super(props); 
  this.scrollY = new Animated.Value(0); 
  this.startHeaderHeight = 80; 
  this.endHeaderHeight = 50; 
}
```

Now, we are ready to add the animation to the tab section.

## Adding Scroll Animation

Here, we are going to add the vertical animation using the `scrollY` animation variable to the `animatedHeaderHeight` variable. The idea of animation is to reduce the height of the` Animated View` wrapper when scrolling down and increasing the height back to normal when scrolling back. The `scrollY` variable initialized to Animated value provides an `interpolate()` method which takes the parameter as `inputRange` and `outputRange` configuration along with `extrapolate` option. The `outputRange` is configured to start height and end height of the tab section with `extrapolate` option as `clamp` as shown in the code snippet below:

```javascript
this.animatedHeaderHeight = this.scrollY.interpolate({ 
  inputRange: [0, 50], 
  outputRange: [this.startHeaderHeight, this.endHeaderHeight],
  extrapolate: "clamp" 
});
```

Next, we need to trigger animation at the main search bar. For that, we need to add a  wrapper of `Animated View` . Then, we need to add `animatedHeaderHeight` variable that we configured earlier to the `height` property of `Animated View`  in its style property as shown in the code snippet below:

```javascript
<Animated.View style={{ backgroundColor: "white", height: this.animatedHeaderHeight, borderBottomWidth: 1, borderBottomColor: "#dddddd" }}>
```

Hence, we get the following result in our emulator simulation below:

![](https://kriss.io/wp-content/uploads/2019/10/2019-10-07-09.27.42.gif)

As we can see, the tabs section disappears when we scroll down and reappears when we scroll to the top. But, the animation is not smooth yet. So, we need to add some additional animation properties and styles to make it transition smoothly.

## Adding Opacity property to Animation

Now, we are going to add the opacity property to the `Animated View` wrapper of the tags section. For that, we need to define a variable called `animatedOpacity.` Then, initialize it to the `interpolate()` method as shown in the code snippet below:

```javascript
this.animatedOpacity = this.scrollY.interpolate({ 
  inputRange: [this.endHeaderHeight, this.startHeaderHeight], 
  outputRange: [0, 1], 
  extrapolate: "clamp" }
);
```

Then, we add the `animatedOpacity` variable to the opacity style property of the `Animated View` component as shown in the code snippet below:

```javascript
<Animated.View style={{ flexDirection: "row", marginHorizontal: 20, position: "relative", top: 5, opacity: this.animatedOpacity }}> 
  <Tag name={"Guest"} /> 
  <Tag name={"Dates"} /> 
</Animated.View>
```

As a result, we get the smooth animation of the tabs section as shown in the emulator simulation below:

![](https://kriss.io/wp-content/uploads/2019/10/2019-10-07-11.03.19.gif)

Finally, we have successfully implemented the tags section template. And, also configured the animation to show and hide the tags section.

## Conclusion

This tutorial is the fourth part of the Airbnb Home Screen UI clone tutorial series. In this part, we continued from where we left off in the third part of this tutorial series. Here, we learned how to implement the tags section into a re-usable component and use it in multiple places which gave a tags section. We also learned how to add the vertical animation style by making use of `Animated` component and its properties.  And then, we finally displayed the tabs section with hiding and showing animation during scrolling to our Home Screen UI clone using React Native.

## Recap Series

Till now in this tutorial series, we learned how to bootstrap the layout just like Airbnb in React native. We also learned how to create different sections with components and add animation as well. In upcoming parts, we will how to setup react native navigations.

The post [Airbnb Home Screen UI Clone with React Native # 4: Animate Top Tag Section](https://kriss.io/airbnb-home-screen-ui-clone-with-react-native-4-animate-top-tag-section/) appeared first on [Kriss](https://kriss.io).

## Disclosure
This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article