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