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

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:

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:

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

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

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:

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:

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:

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:

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

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:

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

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 theAnimated 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:

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:

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

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

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:

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:

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

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 appeared first on Kriss.

Disclosure

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