Build Rating System for your react native app

On your mobile, when you do a google search for “restaurants near me” or you end a Uber ride or you search for movie on IMDB or a product on amazon - One thing you look for or expect an app to have is RATING SYSTEM.

A rating system is more than just an UI element. It’s an investment from your users. Rating system serves different purpose for different apps:

• It helps personalising content for user. For ex. if you do a google search, based on ratings you can filter list.
• Helps user in decision making. For ex. user confused between 2 products on eCommerce mobile app.
• A tool to collect user’s feedback.

As we have covered the importance of a Rating System, Let’s see how to build one for our mobile app using React Native.

react-native-rating-element

I created a simple rating library for react native supporting:

• decimal points like 3.7, 4.2 etc,
• direction aware icons (supports RTL, bottom to top etc),
• custom icon set from Ionicons,
• custom images
• and interact and record rating given by users.

Installation

Use the package manager npm or yarn to install react-native-rating-element.

npm install react-native-rating-element
yarn add react-native-rating-element

Usage

After installing it, head towards your component file and simple import it at the top and then inside your render() method, you can call <Rating /> and pass desired props.

These props can be modified to suit your UX.

import { Rating } from "react-native-rating-element";

<Rating
  rated={3.7}
  totalCount={5}
  ratingColor="#f1c644"
  ratingBackgroundColor="#d4d4d4"
  size={24}
  readonly // by default is false
  icon="ios-star"
  direction="row" // anyOf["row" (default), "row-reverse", "column", "column-reverse"]
/>

**Custom Image, onIconTap and bottom to top direction**
<Rating
  rated={3.7}
  totalCount={5}
  size={42}
  onIconTap={position => console.log(`User pressed: ${position}`)}
  direction="column-reverse"
  type="custom" // default is always to "icon"
  selectedIconImage={require('./filled.png')}
  emptyIconImage={require('./empty.png')}
/>

You can find API documentation here.

Output

Please go ahead and checkout my first open source library. It’s a small effort to contribute to this amazing JAVASCRIPT world. Whatever I am today, it is possible because of all free learning tutorials and open source packages out there in our ecosystem.