This tutorial is the second part of our Amazon UI clone using React Native. , we successfully implemented the menu bar section as well as the simple content section. This part of the tutorial is the continuation of where we left off in the last part. So, it is recommended to go through the previous part for better full-on insight and implementation of the overall project. In the previous part As mentioned in the first part, this tutorial series was inspired by the React Native Eccomerce template which helps us build some awesome and powerful ready to deploy eCommerce applications that anyone can use to build eCommerce startups or sell the application templates. And, this part is also the continuation of coding implementations and designs from the Youtube video tutorial by for the Amazon UI clone. The simple yet powerful UI elements in the Amazon app help its users or customers to use the application in the most efficient way possible making it easy for users every step of the way. Unsure programmer In this part, we are going to implement two main sections to our Amazon UI clone project which will showcase the highlight gallery and recommendation section from the actual app. The idea is to start by implementing the highlight gallery section first. Then, we will move on to implementing the recommendation section as a separate component to make it reusable and also include star ratings to it. So, let us begin!! Implementing Highlight Gallery In this step, we are going to implement the highlight gallery section as in the real Amazon app. The highlight gallery section is shown just below the content section that we implemented in the earlier tutorial. This section will contain a swiper with some images to highlight any popular products or advertisements. For the highlighted item, we are going to use mock data images from directory of our project. ‘./assets’ Importing swiper package In order to implement the highlight gallery swiper, we need to make use of the package. This package provides a simple and efficient component to implement the swiper in react native app. The command to install the react-native-swiper into the project is provided in the code snippet below: react-native-swiper yarn add react-native-swiper Now, we need to import the package into our Home.js screen file as a Swiper component as shown in the code snippet below: import Swiper from 'react-native-swiper'; Implementing the swiper section Here, we are just going to include a simple component wrapping three components with inline style binders as shown in the code snippet below: Swiper View <Swiper style={{ : }}> <View style={{ : }}> <View style={{ : }}> < height 100 < = }}> View style {{flex: 1 </ > View flex 1 </ > View flex 1 </ > View /Swiper> As a result, we will get blank elements on the screen with three swiper dot icons for three components as shown in the emulator screenshot below: View View Next, we need to add the image to the components inside the component. For adding images, we are going to use Image component from the react-native package with some inline styles. We need to import images from the folder in our project directory. View Swiper ‘./assets/’ We can include our own set of images into the assets folder and import it into the source prop of the Image component as shown in the code snippet below: <Swiper style={{ : }}> <Image style={{ flex: 1, height: null, width: null, resizeMode: 'contain', }} source={require('../assets/swiper_2.jpg')} /> </View> <View style={{flex: 1}}> <Image style={{ flex: 1, height: null, width: null, resizeMode: 'contain', }} source={require('../assets/swiper_3.jpg')} /> </View> <View style={{flex: 1}}> <Image style={{ flex: 1, height: null, width: null, resizeMode: 'contain', }} source={require('../assets/swiper_2.jpg')} /> </View> </Swiper> height 100 < = }}> View style {{flex: 1 Hence, we will get the following result in our emulator screen: As we can see, we have successfully implemented the highlight gallery section with the component. The components show three Image components which are easily swipable. Swiper Swiper Next, we are going to implement the recommendation section just below the highlight gallery section. The recommendation section shows different product recommendations according to the user’s preferences and data. Implementing Recommendation Section In this step, we are going to create the recommendation section UI which provides users with recommendations of different products in the Amazon app. This section will be located just below the highlight gallery section that we created in earlier steps. Creating Recommendation Topic card Here, we are going to set the title of the recommendation section using a component. We may have remembered that we used different components from the native-base package in our last tutorial. Here, we are going to use an additional set of components from the native-base package in order to create the overall recommendation section. Card First, we need to import the required components from the native-base as shown in the code snippet below: { Container, Content, Header, Left, Right, Icon, Item, Input, Card, CardItem, } ; import from 'native-base' Now, we are going to use the component which wraps the component with header style in order to create the title section of our recommendation section as shown in the code snippet below: Card CardItem <Card style={{ : , : }}> <Text>Your Recommendations</Text> < marginLeft 5 marginRight 5 < = , '# ' }}> CardItem header style {{ borderBottomWidth: 1 borderBottomColor: dee0e2 </ > CardItem /Card> Hence, we will get the following result in our emulator screen: As we can see, we have got the recommendation section title as ‘Your Recommendations’ using the and components from the native-base package. Now, we are going to create the list of recommended items below the title section. Card CardItem Now, we need to define another component just below the first component in order to implement the recommended items. component wraps two child components which are component from the react-native package and component from the native-base component. CardItem CardItem CardItem View Right The component will wrap the Image component in order to display the image to the left. component will contain some inline styles and prop for image URL acquired from assets directory. The component is used to align the elements to the right side of the screen. View Image source RIght Here, the component with flex style property wraps several components. component will include the details of the recommended product such as , etc. Right Text Text title, price, vendor, discount The overall coding implementation from this section is provided in the code snippet below: <CardItem> <Image style={{height: 90, width: 60}} source={require('../assets/recommended_1.jpg')} /> </View> <Right style={{ flex: 1, alignItems: 'flex-start', height: 90, paddingHorizontal: 20, }}> <Text>Your can Healing your life</Text> <Text style={{color: 'grey', fontSize: 11}}>Louise Hay</Text> <Text style={{fontSize: 14, fontWeight: 'bold', color: '#c4402f'}}> 10$ </Text> <Text> <Text style={{color: 'grey', fontWeight: '300', fontSize: 11}}> You save 2.5 </Text> </Text> </Right> < > View </ > CardItem Therefore, we will get the following result in our emulator screen: Separate Component for recommended items Here, we are going to implement a separate component file for the recommended items section of our Recommendation section. The separate component makes the template reusable anywhere in the entire project. For that, we need to create a component file named in our ‘ directory. Now, we need to import everything package required to implement the recommended items section as we did in the file. RecommendItem.js ./components’ Home.js Then, we need to define a class called and extend it to Component module as shown in the code snippet below: RecommendedItem React, {Component} ; {View, Text,Image} ; {Card,CardItem,Right} ; { (props) { (props); .state = {}; } render() { ( <Text> componentText </Text> ); } } RecommendedItem; import from 'react' import from 'react-native' import from 'native-base' class RecommendedItem extends Component constructor super this return < > View </ > View export default Next, we need to include the code from the second component in our file into the function of our file. Then, we need to replace the static data like source prop, text in component with the prop value that is to be passed from the parent component. CardItem Home.js render() RecommendedItem.js Text Here, the props that we require are as shown in the code snippet below: imageURI, itemName, ItemCreator, itemPrice and savings <CardItem> <Image style={{height: 90, width: 60}} source={this.props.imageUri} /> </View> <Right style={{ flex: 1, alignItems: 'flex-start', height: 90, paddingHorizontal: 20, }}> <Text>{this.props.itemName}</Text> <Text style={{color: 'grey', fontSize: 11}}> {this.props.itemCreator} </Text> <Text style={{fontSize: 14, fontWeight: 'bold', color: '#c4402f'}}> {this.props.itemPrice} </Text> <Text> <Text style={{color: 'grey', fontWeight: '300', fontSize: 11}}> You save </Text>{' '} ${this.props.savings} </Text> </Right> < > View </ > CardItem Adding Component to Home screen Now, we need to import the component into our screen file in order to use it multiple times. RecommendedItem Home.js For that, we need to use the code given in the code snippet below: import RecommendedItem from '../components/RecommendedItem'; Now, we need to include the component in the place where we implemented the second component as shown in the code snippet below: RecommendedItem CardItem <RecommendedItem itemName= itemCreator= itemPrice= savings= imageUri={ ( )} /> <RecommendedItem itemName="Ea UFC 3" itemCreator="Ea Sports" itemPrice="$44" savings="6" imageUri={require('../assets/recommended_3.jpg')} /> "You can heal your life" "Louise Hay" "$10" "2.5" require '../assets/recommended_1.jpg' < = = = = = ' / / ')} /> RecommendedItem itemName "Uncharted 4" itemCreator "Sony" itemPrice "$19.99" savings "17" imageUri {require( .. assets recommended_2.jpg In the code snippet above, we have passed down every prop required in the child component with its value. The component is used multiple times in order to display different lists of recommended items in the Recommendation section. RecommendedItem Hence, we will get the following result in our emulator screen: Therefore, we have successfully implemented the Recommendation section in our Amazon UI clone project. But it is not complete yet. We need to add one more component to it in order to make it look just like in real app UI. The component we need to add is the star ratings for each recommended item section. Adding Star Rating Here, we are going to add the star ratings to our recommended items section in our RecommendedItem.js component file. For that, we need to install an additional package that provides us with a simple component to add star ratings to the react-native app. The package name is . Now, we need to install the package by using the command shown in the code snippet below: react-native-star-rating yarn add react-native-star-rating Then, we need to import the react-native-star-rating package into our component file as component as shown in the code snippet below: RecommendedItem.js StarRating import StarRating from 'react-native-star-rating' Then, we need to add the component just below the last component inside the component. The component requires different props in order to make it look appealing. The are the props that need to be set as a static value. But the rating prop requires dynamic value for each recommended items which we will pass as a prop from the screen. StarRating Text CardItem StarRating color, size, maximum stars Home.js The implementation of component is given in the code snippet below: StarRating <StarRating disabled={ } maxStars={ } rating={ .props.rating} starSize={ } fullStarColor= emptyStarColor= /> true 5 this 12 'orange' 'orange' Now, we need to set the rating prop in the component defined in the screen and pass it to the child component as shown in the code snippet below: RecommendedItem Home.js <RecommendedItem itemName= itemCreator= itemPrice= savings= imageUri={ ( )} rating={ } /> <RecommendedItem itemName="Ea UFC 3" itemCreator="Ea Sports" itemPrice="$44" savings="6" imageUri={require('../assets/recommended_3.jpg')} rating={3} /> "You can heal your life" "Louise Hay" "$10" "2.5" require '../assets/recommended_1.jpg' 5 < = = = = = ' / / ')} = /> RecommendedItem itemName "Uncharted 4" itemCreator "Sony" itemPrice "$19.99" savings "17" imageUri {require( .. assets recommended_2.jpg rating {4} Hence, we will get the star ratings in each of the recommended items of our Recommendation section as shown in the code snippet below: Finally, we have successfully completed the implementation of the highlight gallery section. And, also the Recommendation section in our Amazon UI clone app. Conclusion This tutorial is the second part of the Amazon 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 make use of component from the package in order to create the highlight gallery. We also got insight on how to use additional native-base components in order to create the Recommendation section in a separate component. Swiper react-native-swiper We also got a detailed guide on the implementation of component from the package with different prop configurations. StarRating react-native-star-rating
