Hackernoon logoAmazon UI Clone with React Native #2 : Recommendations View by@absek

Amazon UI Clone with React Native #2 : Recommendations View

Author profile picture

@absekAbsek

Vue | React Native developer

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 the react-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.



Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!