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 for better understanding and insight into the overall project. previous parts As mentioned in the previous parts, this tutorial series was inspired by React native 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 for the Airbnb clone. Unsure programmer 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 package later on. react-native-star-rating 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 component with some inline styles in our Explore.js file just below the Airbnb Plus section. Text Then, we need to wrap the component with the View component with some margin style as shown in the code snippet below: Text <View style={{ : }}> marginTop 40 Homes around the world < = , " ", }} > Text style {{ fontSize: 24 fontWeight: 700 paddingHorizontal: 20 </ > Text 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 component provided by the react-native package. The component enables us to get the full width and height of our app screen. So, we need to import the component along with other components from the react-native package. Dimensions Dimensions Dimensions And then, we need to assign two constants height and width which are initialized to the entire and of the screen using method provided by component as shown in the code snippet below: height width get() Dimentions { View, TextInput, Text, Image, SafeAreaView, ScrollView, Dimensions } ; Category ; { height, width } = Dimensions.get( ); import from "react-native" import from "../components/Category" const "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={{ : , : }}> <Image style={{ flex: 1, width: null, height: null, resizeMode: "cover" }} source={require("../images/home.jpeg")} /> </View> <View style={{ flex: 1 }}></View> paddingHorizontal 20 marginTop 20 < = / , / }}> View style {{ width: width 2 height: width 3 </ > 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 components inside this View component, all with their own inline style properties. Text The View component itself has its own set of inline style properties which includes flex styles as shown in the code snippet below: <View style={{ : , : , : , : }} > <Text style={{ : , : }}> The Spring House < Text> flex 1 alignItems "flex-start" justifyContent "space-evenly" paddingLeft 10 Private Roome - 4 Beds < = , "# " }}> Text style {{ fontSize: 10 color: b63838 </ > Text fontSize 12 fontWeight "bold" /Text> <Text style={{ fontSize: 10 }}>65$</ </ > View As a result, we get the description section just below the image as shown in the emulator screenshot below: Now, we have successfully created a home package section with just one package that is being displayed. But, we need to display multiple packages to the home package section. In order to do that, we are going to create a separate component for this package section. Then, reuse it multiple times in the Explore.js file to display the full home package section. Implementing a Separate Component In this step, we are going to create a separate component that includes the image section and the description section that we implemented earlier. Here, we need to create a component file called Home.js in the directory. ‘./components’ Then, in the Home.js file, we need to import all the necessary packages in order to implement the Image and description section. Then, we need to create a class called which extends to Component module. Home After that, we need to include the code for the image and description section that we implemented in the previous step inside the function of Home class. render() Then, we need to replace the static data with props from the parent component. The props we need to send from parent component and receive here in this Home.js child component are and with , , , and as shown in the code snippet below: height properties type name price React, { Component } ; { View, Text, StyleSheet, Image } ; { render() { ( <View style={{ flex: 1 }}> <Image style={{ flex: 1, width: null, height: null, resizeMode: "cover" }} source={require("../images/home.jpeg")} /> </View> <View style={{ flex: 1, alignItems: "flex-start", justifyContent: "space-evenly", paddingLeft: 10 }} > <Text style={{ fontSize: 10, color: "#b63838" }}> {this.props.type} </Text> <Text style={{ fontSize: 12, fontWeight: "bold" }}> {this.props.name} </Text> <Text style={{ fontSize: 10 }}>{this.props.price}$</Text> </View> </View> import from "react" import from "react-native" class Home extends Component return < = / , / , , "# " }} > View style {{ width: this.props.width 2 - 30 height: this.props.width 2 - 30 borderWidth: 0.5 borderColor: dddddd ); } } export default Home; Now, after we have implemented the Home.js component, we need to include this component in our main screen that is our Explore.js file. So, we need to import the Home.js component into our Explore.js file as we did in the previous tutorials. Then, we need to include Home components into our View component for the Home package section with all the required props passed down to child component as shown in the code snippet below: <View style={{ : , : , : , : , : }} > <Home width={width} name="The Cozy Place" type="PRIVATE ROOM - 2 BEDS" price={82} /> <Home width={width} name="The Cozy Place" type="PRIVATE ROOM - 2 BEDS" price={82} /> </View> padding 20 marginTop 20 flexDirection "row" flexWrap "wrap" justifyContent "space-between" < = = = = /> Home width {width} name "The Cozy Place" type "PRIVATE ROOM - 2 BEDS" price {82} Hence, we get the following result in our emulator screen. As we can see, now our Home Screen UI displays the home package section with three home packages in the grid style. But, it is not over yet. We still need to add one more thing to these grid package sections which is a star rating. The star ratings indicate the rating given by users who have bought those packages in the real app. Implementing Star Rating In this last step of this tutorial, we are going to add the star rating just below the Text component showing the price of the package. For that, we need to install the package which enables us to add the required star rating component with all the configurations required. This package delivers a React Native component for generating and displaying interactive star ratings available both in iOS and Android. So, in order to install this package we need to run the following command into our project directory: react-native-star-rating yarn add react-native-star-rating Next, we need to import the package into our Home.js file component as shown in the code snippet below: react-native-star-rating { View, Text, StyleSheet, Image } ; StarRating { import from "react-native" import from 'react-native-star-rating' class Home extends Component Then, we need to initialize the component that we imported just below the Text component featuring price of the package as shown in the code snippet below: StarRating <View style={{ : , : , : , : }}> <Text style={{ : , : }}>{ .props.name}< Text> flex 1 alignItems 'flex-start' justifyContent 'space-evenly' paddingLeft 10 {this.props.type} < = , '# ' }}> Text style {{ fontSize: 10 color: b63838 </ > Text fontSize 12 fontWeight 'bold' this /Text> <Text style={{ fontSize: 10 }}>{this.props.price}$</ < = = = = /> StarRating disable {true} maxStars {5} rating {this.props.rating} starSize {10} </ > View Here, some props are set to the StarRating component in order to configure it properly. The disable prop has the value of true in order to make the stars read-only. prop has a value of 5 in order to display a total of 5 stars only.The prop is set to the prop value that is to be received from the parent component. This prop is used to display the number of stars that a home package has among a total of 5 stars. maxStars ratings rating Now, we need to go to the Explore.js file and set another prop to our Home component. The rating prop with required value needs to be passed down to the Home child component as shown in the code snippet below: <Home width={width} name= type= price={ } rating={ } /> <Home width={width} name="The Cozy Place" type="PRIVATE ROOM - 2 BEDS" price={82} rating={5} /> "The Cozy Place" "PRIVATE ROOM - 2 BEDS" 82 4 < = = = = = /> Home width {width} name "The Cozy Place" type "PRIVATE ROOM - 2 BEDS" price {82} rating {3} Hence, we get the following result with ratings shown in each package as shown in the emulator screenshot below: Finally, we have successfully created all the sections required to display the Home packages section in the Airbnb Home Screen UI clone. Conclusion This tutorial is the third part of the Airbnb Home Screen UI clone tutorial series. In this part, we continued from where we left off in the first part of this tutorial series. Here, we learned how to implement the re-usable component and use it in multiple places in the screen files. We also learned how to arrange the home package components in grid style making the use of component. Then, we got an insight into how to use the package in order to display the star ratings into our home packages. And then, we finally displayed the Home Packages Section to our Home Screen UI clone using React Native. Dimensions react-native-star-rating In the next part, we will start implementing animations of the search bar.
