Amazon UI Clone with React Native #2 : Recommendations View
This tutorial is the second part of our Amazon UI clone using React Native. In the previous part, 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.
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 Unsure programmer 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.
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 ‘./assets’ directory of our project.
Importing swiper package
In order to implement the highlight gallery swiper, we need to make use of thereact-native-swiper 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:
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 Swiper component wrapping three View components with inline style binders as shown in the code snippet below:
<Swiper style={{height: 100}}>
<View style={{flex: 1}}></View>
<View style={{flex: 1}}></View>
<View style={{flex: 1}}></View>
</Swiper>
As a result, we will get blank View elements on the screen with three swiper dot icons for three View components as shown in the emulator screenshot below:
Next, we need to add the image to the View components inside the Swiper 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 ‘./assets/’ folder in our project directory. 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={{height: 100}}>
<View style={{flex: 1}}>
<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>
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 Swiper component. The Swiper components show three Image components which are easily swipable.
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 Card 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. First, we need to import the required components from the native-base as shown in the code snippet below:
import { Container, Content, Header, Left, Right, Icon, Item, Input, Card, CardItem, } from 'native-base';
Now, we are going to use the Card component which wraps the CardItem component with header style in order to create the title section of our recommendation section as shown in the code snippet below:
<Card style={{ marginLeft: 5, marginRight: 5 }}>
<CardItem header style={{ borderBottomWidth: 1, borderBottomColor: '#dee0e2' }}>
<Text>Your Recommendations</Text>
</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 Card and CardItem components from the native-base package. Now, we are going to create the list of recommended items below the title section.
Now, we need to define another CardItem component just below the first CardItem component in order to implement the recommended items. CardItem component wraps two child components which are View component from the react-native package and Right component from the native-base component. The View component will wrap the Image component in order to display the image to the left. Image component will contain some inline styles and source prop for image URL acquired from assets directory. The RIght component is used to align the elements to the right side of the screen. Here, the Right component with flex style property wraps several Text components. Text component will include the details of the recommended product such as title, price, vendor, discount, etc. The overall coding implementation from this section is provided in the code snippet below:
<CardItem>
<View>
<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>
</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 RecommendItem.js in our ‘./components’ directory. Now, we need to import everything package required to implement the recommended items section as we did in the Home.js file. Then, we need to define a class called RecommendedItem and extend it to Component module as shown in the code snippet below:
import React, {Component} from 'react';
import {View, Text,Image} from 'react-native';
import {Card,CardItem,Right} from 'native-base';
class RecommendedItem extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View>
<Text> componentText </Text>
</View>
);
}
}
export default RecommendedItem;
Next, we need to include the code from the second CardItem component in our Home.js file into the render() function of our RecommendedItem.js file. Then, we need to replace the static data like source prop, text in Text component with the prop value that is to be passed from the parent component. Here, the props that we require are imageURI, itemName, ItemCreator, itemPrice and savings as shown in the code snippet below:
<CardItem>
<View>
<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>
</CardItem>
Adding Component to Home screen
Now, we need to import the RecommendedItem component into our Home.js screen file in order to use it multiple times. 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 RecommendedItem component in the place where we implemented the second CardItem component as shown in the code snippet below:
<RecommendedItem
itemName="You can heal your life"
itemCreator="Louise Hay"
itemPrice="$10"
savings="2.5"
imageUri={require('../assets/recommended_1.jpg')}
/>
<RecommendedItem
itemName="Uncharted 4"
itemCreator="Sony"
itemPrice="$19.99"
savings="17"
imageUri={require('../assets/recommended_2.jpg')}
/>
<RecommendedItem
itemName="Ea UFC 3"
itemCreator="Ea Sports"
itemPrice="$44"
savings="6"
imageUri={require('../assets/recommended_3.jpg')}
/>
In the code snippet above, we have passed down every prop required in the child component with its value. The RecommendedItem component is used multiple times in order to display different lists of recommended items in the Recommendation section.
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 react-native-star-rating. Now, we need to install the package by using the command shown in the code snippet below:
yarn add react-native-star-rating
Then, we need to import the react-native-star-rating package into our RecommendedItem.js component file as StarRating component as shown in the code snippet below:
import StarRating from 'react-native-star-rating'
Then, we need to add the StarRating component just below the last Text component inside the CardItem component. The StarRating component requires different props in order to make it look appealing. The color, size, maximum stars 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 Home.js screen. The implementation of StarRating component is given in the code snippet below:
<StarRating
disabled={true}
maxStars={5}
rating={this.props.rating}
starSize={12}
fullStarColor='orange'
emptyStarColor='orange'
/>
Now, we need to set the rating prop in the RecommendedItem component defined in the Home.js screen and pass it to the child component as shown in the code snippet below:
<RecommendedItem
itemName="You can heal your life"
itemCreator="Louise Hay"
itemPrice="$10"
savings="2.5"
imageUri={require('../assets/recommended_1.jpg')}
rating={5}
/>
<RecommendedItem
itemName="Uncharted 4"
itemCreator="Sony"
itemPrice="$19.99"
savings="17"
imageUri={require('../assets/recommended_2.jpg')}
rating={4}
/>
<RecommendedItem
itemName="Ea UFC 3"
itemCreator="Ea Sports"
itemPrice="$44"
savings="6"
imageUri={require('../assets/recommended_3.jpg')}
rating={3}
/>
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 Swiper component from the react-native-swiper 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. We also got a detailed guide on the implementation of StarRating component from the react-native-star-rating package with different prop configurations.
The post Amazon UI Clone with React Native #2 : Recommendations View 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
That’s a long work to do but it seems really interesting, thank you .
https://tweakbox.mobi/ https://wordcounter.onl/ https://tutuappx.com/