This tutorial is the sixth part of our React Native Travel Article App UI clone series. In the , we successfully implemented the Delimiter dots animation while scrolling the Destination cards in the Destinations section. 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 in order to get the knowledge and insight into the overall project. previous part In case of wanting to learn from the beginning, all the parts for this tutorial series are available below: React Native Travel Article App UI Clone #1: Getting Started React Native Travel Article App UI Clone #2: Destinations Section React Native Travel Article App UI Clone #3: Destinations Info Section React Native Travel Article App UI Clone #4: Recommendation Section React Native Travel Article App UI Clone #5: Animated Delimiter Dots As mentioned in the previous tutorial part, the inspiration for this tutorial series came from the React Native Theme that delivers a wide variety of beautiful templates written in React Native and powered by universal features and design. The templates enable us to implement our own apps and even help us get started with our own startups. And, this sixth part is also the continuation of the same coding implementations and designs from the Youtube video tutorial by for the Travel Article App UI clone. The video tutorial seems to deliver the overall tutorial using fast coding which may be difficult to grasp for any developer especially the beginners. Hence, this article tutorial provides a step by step implementation which will be easier to understand and implement. So, the learners can relax and take their time to implement the UI. React UI Kit Overview In this sixth part of this tutorial series, we are going to add the icons in the required UI sections and also add star ratings to the . In this tutorial part, we are going to complete the implementation of the List screen as a whole. The idea is to add the vector icons to the required UI section of the list screen. Then, we are going to add the star ratings to the Recommendation section. Finally, we will also configure the star ratings to show the active and inactive stars on the basis of rating value. Recommendation cards So, let us begin!! Installing Vector Icons Package Here, we are going to install the package into our project. This package provides customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source, and full styling. Now, in order to install the package, we need to use the following command: react-native-vector-icons expo install react-native-vector-icons Now, we need to import the required icons into our List screen. For that, we need to use the code from the following code snippet: FontAwesome ; Octicons ; import from 'react-native-vector-icons/FontAwesome' import from 'react-native-vector-icons/Octicons' Here, we have imported the Font Awesome icon package in the form of component. And, we have also imported the icon package as Octicons component. FontAwesome Octicons Adding Icon to UI sections Now, we are going to add the icons that we imported to various sections of the List screen. Adding Icon to Recommendation Section Here, we are going to add the bookmark icon to the Recommendation cards. The bookmark icon will be set on the basis of the saved value from the destinations array data. If the saved value is true then the bookmark active icon will be set otherwise the bookmark inactive icon will be set. Now in order to implement this, we need to use the code from the following code snippet in the renderRecommendation() function: <View style={[styles.flex, styles.recommendationHeader]}> <View style={[ styles.flex, styles.row, styles.recommendationOptions ]}> <Text style={styles.recommendationTemp}> {item.temperature}℃ </Text> <FontAwesome name={item.saved ? 'bookmark' : 'bookmark-o'} color={theme.colors.white} size={theme.sizes.font * 1.25} /> </View> </View> < = = }} /> Image style {[styles.recommendationImage]} source {{ uri: item.preview Here, we have added the component which enables us to set the FontAwesome icons. We have also provided the color and size props to the component. FontAwesome FontAwesome Hence, we will get the following result in our emulator screen: As we can see, we have got the bookmark icons in the Recommendation cards section. Adding Icon to Destinations section In the Destinations section, we need to add two icons. One is the location icon in the component and the other is the greater than an arrow-like icon in the Info section. First, we are going to add the location marker icon to the component of the section. For that, we need to use the code from the following code snippet in the function: ImageBackground Destination ImageBackground Destinations renderDestination() <View style={[styles.column, { : , : theme.sizes.padding / }]}> <Text style={{ : theme.colors.white }}> <Text> {item.location}</Text> < flex 2 paddingHorizontal 2 {item.user.name} < = , ' '}}> Text style {{color : theme.colors.white fontWeight : bold </ > Text color < = = * } = /> Octicons name "location" size {theme.sizes.font 0.8 color {theme.colors.white} </ > Text /View> Here, we have added the component to add the icon from the Octicons package. We have selected the location icon of the Octicons icon package. The size and color props are also configured in the component. Octicons Octicons Hence, we will get the following result in our emulator screen: As we can see, we have got the location icon in the background image of the Destinations section. Now, we need to add an icon to the section. For that, we need to use the code from the code snippet below: Destinations Info <View style={[styles.column, styles.destinationInfo, styles.shadow]}> <View style={[ styles.row, { : , : }]}> <FontAwesome name= size={theme.sizes.font * } color={theme.colors.caption} /> < {item.title} < = , ' ', , }}> Text style {{ fontSize: theme.sizes.title fontWeight: 500 paddingBottom: 8 </ > Text justifyContent 'space-between' alignItems 'flex-end' {item.description.split('').slice(0, 50)}... < = }}> Text style {{ color : theme.colors.caption </ > Text "chevron-right" 0.75 </ > View /View> Here, we have added the component which provides us with access to Font Awesome icons. The size and color props are also configured. FontAwesome Hence, we will get the following result in the emulator screen: As we can see, we have got the 'greater than' icon in the Destination Info section as well. Hence, this completes our task of adding icons in the List screen. Now, we are going to add the star ratings to the section. Recommendation Card Adding Star Ratings to the Recommendation Card Section In this step, we are going to add the star ratings in the Recommendation Card Section. These star ratings will represent the overall rating given to the recommended travel destination. We might have remembered that we have added the rating value before. Now, we are going to add the star icons including the rating value. For that, we are going to define a new function called which will return the template for the ratings. The overall implementation of this function is provided in the code snippet below: renderRatings() renderRatings(rating) { stars = ( ).fill( ); ( stars.map( { activeStar = index < rating; ( const new Array 5 0 return ( ) => value, index const return ) }) ) } < = = ` ${ }`} = ? ' ' ' ']} /> FontAwesome name "star" key { star- index color {theme.colors[activeStar active : gray Here, in the function we have initialized a new Array variable called stars which can take up to 5 values. This function takes ratings as a parameter. Then, we have used the array function which enables us to iterate through each item of stars array. renderRatings() map() Inside the function, we have defined a new constant that stores the in order to give style accordingly. Then, we have returned the component with star icons. map() activeStars FontAwesome The component is configured with key and color props. The key prop to identify each item in array uniquely. And, the color is based on the constant. FontAwesome activeStar Now, we need to call this function in the function as shown in the code snippet below: renderRatings() renderRecommendation() <View style={[styles.flex, styles.column, styles.shadow, { : , : theme.sizes.padding / }]}> <Text style={{ : theme.colors.caption}}>{item.location}< Text> < justifyContent 'space-evenly' padding 2 {item.title} < = * , ' ', / , }}> Text style {{ fontSize: theme.sizes.font 1.25 fontWeight: 500 paddingBottom: theme.sizes.padding 4.5 </ > Text color /Text> <View style={[ styles.row, { alignItems: 'center', justifyContent: 'space-between', marginTop: theme.sizes.margin } ]}> <Text style={{ color: theme.colors.active }}> {this.renderRatings(item.rating)} {item.rating} </ </ > View /View> Here, we have called the function inside the component wrapping the rating value. We have passed the rating value of the item from the destinations data array. renderRatings() Text Hence, we will get the following result in our emulator screen: As we can see, we have got the star ratings with star icons and rating value in our Recommendation card section. But, all the ratings seem to be active and it does not seem appealing as well. Now, we are going to configure the active and inactive stars based on rating value as well as style the rating stars properly. Configuring the active rating star icons Here, we are going to configure the active ratings based on the rating value. For that, we need to make some configurations to the constant in the method as shown in the code snippet below: activeStar renderRatings() stars.map( { activeStar = .floor(rating) >= (index + ); ( ( ) => value, index const Math 1 return ) }) < = = ` ${ }`} = = ? ' ' ' ']} /> FontAwesome name "star" key { star- index size {theme.sizes.font} color {theme.colors[activeStar active : gray Here, we have taken the floor value of rating using Math function and index property. Then, we have also added the size prop to the component. FontAwesome Now, we need to make some changes to the function as well which is provided in the code snippet below: renderRecommendation() <View style={[styles.flex, styles.column, styles.shadow, { : , : theme.sizes.padding / }]}> <Text style={{ : theme.colors.caption}}>{item.location}< Text> < justifyContent 'space-evenly' padding 2 {item.title} < = * , ' ', / , }}> Text style {{ fontSize: theme.sizes.font 1.25 fontWeight: 500 paddingBottom: theme.sizes.padding 4.5 </ > Text color /Text> <View style={[ styles.row, { alignItems: 'center', justifyContent: 'space-evenly', marginTop: theme.sizes.margin } ]}> {this.renderRatings(item.rating)} <Text style={{ color: theme.colors.active }}> {item.rating} </ </ > View /View> Here, we have removed the function from the Text component and placed outside it. We have also added some style to the component wrapping the function. renderRatings() View renderRatings() Hence, we will get the following result in our emulator screen: As we can see, we have got the star ratings in accordance with the rating value. The rating section also looks appealing now as in the actual app. Now, we are going to add navigation to the Article screen while clicking on the Destination section cards. Adding Navigation to Article screen Here, we are going to add the navigation to screen. We are going to configure this navigation property into the Destination Section cards For that, we need to use the code from the following code snippet in the function: Article renderDestination() renderDestination(item){ ( <ImageBackground style={[styles.flex, styles.destination, styles.shadow]} imageStyle = {{borderRadius : theme.sizes.radius}} source= {{uri : item.preview}} > ………………………………….. </ImageBackground> ) } return this.props.navigation.navigate('Article', { article: item })}> < = = => TouchableOpacity activeOpacity {0.8} onPress {() </ > TouchableOpacity Here, we have wrapped the entire Destination card template by the component. Then, we have added the prop to the component to give the opaque effect while clicking. In the event of the component, we have configured the navigation using the navigate function provided by prop. The prop is automatically available to all the screens which are configured to our . TouchableOpacity activeOpacity TouchableOpacity onPress TouchableOpacity navigation navigation Navigator Now, we can navigate to Article screen by clicking on the Destination cards as shown in the emulator simulation below: As we can see, when clicking on each Destination cards, we can navigate to the Article screen. With this, we have come to the end of this part of the tutorial. Finally, we have successfully implemented each and every UI section in the List screen of our React Native Travel Article App UI clone. Conclusion This tutorial is the sixth part of the React Native Travel Article App UI clone tutorial series. In this part, we continued from where we left off in the fifth part of this tutorial series. In this part of the tutorial, we learned how to add the vector icons to the required UI section in our List screen. Then, we got the stepwise guidance on how to add the star ratings as well as configure the active ratings based on rating value. We also learned to add the navigation from the navigation prop in order to navigate to the Article screen. Finally, we have successfully completed the implementation of every UI section in the List screen of our Travel Article App UI clone.
