How to add Review/Rating Feature in React Native Application (Javascript)
Amazon-like Review System using React Native Expo
Hello, React Native Developers..!!
When you are building an e-commerce website then it is important to add a Review and Rating system. So, that the users can give you proper feedback about the product. As a developer, you often wonder, how to make a Rating system like Amazon or Flipkart. Where you can click and give a rating in stars. If they like the products they give 5 stars if not then 1 star. So, let’s build a rating system in React Native Expo. Grab your seat and take a cup of coffee and let’s begin the hack.
Set-up and Installation of React Native Expo
1. Make a directory and navigate to it.
2. Open the terminal or command prompt and run the command: expo init Rating
3. Choose the blank template and proceed with the download
4. Navigate to “Rating” and Install the few npm packages using the command:
npm install native-base@2.13.0
npm install react-native-easy-grid
5. Let the installation completes.
After the completion of all 5 steps, you will see something like this.
We are done with the installation part. Now, open this project in your favorite text editor and start the code.
Code of Rating System In React Native Expo
Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad
App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Rating from './Rating';export default function App() {
return (
<View style={styles.container}>
<Text>
<Rating rating='1' />
</Text>
<Text>
<Rating rating='2' />
</Text>
<Text>
<Rating rating='3' />
</Text>
<Text>
<Rating rating='4' />
</Text>
<Text>
<Rating rating='5' />
</Text><StatusBar style="auto" />
</View>
);
}const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
In App.js we just import the Rating props from the Rating.js file. For visualization purposes, we use 5 ratings inside the text tag. Now look at the Rating.js
Rating.js
import React, { useState } from 'react'
import { Text, TouchableWithoutFeedback } from 'react-native';
import { Icon } from 'native-base';
import { Row } from 'react-native-easy-grid';export default function Rating(props) {
const [rating, setRating] = useState(rating)
const styles={
starStyle:{
color: 'orange'
}
}
return (
<Row>
<Text>Rating: {props.rating}</Text>
{rating >= 1 ? (
<TouchableWithoutFeedback onPress={() => setRating(1)}>
<Icon type="FontAwesome" name="star" style={styles.starStyle} />
</TouchableWithoutFeedback>
) : (
<TouchableWithoutFeedback onPress={() => setRating(1)}>
<Icon type="FontAwesome" name="star-o" />
</TouchableWithoutFeedback>
)}
{rating >= 2 ? (
<TouchableWithoutFeedback onPress={() => setRating(2)}>
<Icon type="FontAwesome" name="star" style={styles.starStyle} />
</TouchableWithoutFeedback>
) : (
<TouchableWithoutFeedback onPress={() => setRating(2)}>
<Icon type="FontAwesome" name="star-o" />
</TouchableWithoutFeedback>
)}
{rating >= 3 ? (
<TouchableWithoutFeedback onPress={() => setRating(3)}>
<Icon type="FontAwesome" name="star" style={styles.starStyle} />
</TouchableWithoutFeedback>
) : (
<TouchableWithoutFeedback onPress={() => setRating(3)}>
<Icon type="FontAwesome" name="star-o" />
</TouchableWithoutFeedback>
)}
{rating >= 4 ? (
<TouchableWithoutFeedback onPress={() => setRating(4)}>
<Icon type="FontAwesome" name="star" style={styles.starStyle} />
</TouchableWithoutFeedback>
) : (
<TouchableWithoutFeedback onPress={() => setRating(4)}>
<Icon type="FontAwesome" name="star-o" />
</TouchableWithoutFeedback>
)}
{rating >= 5 ? (
<TouchableWithoutFeedback onPress={() => setRating(5)}>
<Icon type="FontAwesome" name="star" style={styles.starStyle} />
</TouchableWithoutFeedback>
) : (
<TouchableWithoutFeedback onPress={() => setRating(5)}>
<Icon type="FontAwesome" name="star-o" />
</TouchableWithoutFeedback>
)}
</Row>
)
}
Here in the Rating function, we used React hooks concept. The initial state is set to “rating”. After the user gives the rating then it is updated accordingly and the new rating will be set in “setRating”. This is a react hooks concept. The Amazon rating is in orange color, so we set the color like orange. Now we know that the rating is in row format so we return the Rating function in the Row tag. After that, the basic if-else conditions are used. For example, if the user gives 3ratings then all the conditions will be checked. Is 3 greater than equal to one? Yes. Is 3 greater than 2? Yes. Is three greater than equal to 2? Yes. Is 3 greater than equal to 4? No. Then in the 4th and 5th columns, blank stars will be filled. And in the rest of the column orange stars will be filled. This is how the whole if-else conditions work in this function.
Well, That’s it..!!
Run this application in your terminal or command prompt window using the command: npm start
Scan the QR code and run this application on your preferred devices. As it runs on both IOS and Android devices. You will see something like this.
It looks good, right? If you face any kind of difficulty then let me know in the comment section.
