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

Join Hacker Noon

Create your free account to unlock your custom reading experience.