How to Implement Rating Functionality in React Native App?

User reviews and ratings now play an increasingly important role in the success of mobile apps. No matter if your mobile app is for e-commerce, ordering food, or a listing of movies, having a way to allow your users to rate the products or services enhances user engagement and adds credibility.

In this tutorial, we will be showing you how to create a rating component with react-native-ratings. React-native-ratings is a very small and lightweight library that allows your users to leave ratings for your items with stars, emojis, or icons of your choosing.

Steps to Implement Rating Functionality in React Native App:

Step 1: Install the Library

To use this library, you can run the following command using either npm or yarn:

npm install react-native-ratings

# or

yarn add react-native-ratings

Step 2:Import and Basic Usage

The library provides two primary components:

• AirbnbRating – Pre-styled star rating with labels (like Airbnb style)
• Rating – Fully customizable rating component

Airbnb Rating Example

import React from 'react';
import { View } from 'react-native';
import { AirbnbRating } from 'react-native-ratings';

export default function App() {

  return (

    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    
  <AirbnbRating
        count={5}               // Number of stars
        reviews={["Terrible", "Bad", "OK", "Good", "Great"]}
        defaultRating={3}       // Initial rating
        size={30}               // Star size
        onFinishRating={(rating) => {
          console.log("User Rating: ", rating);
        }}
      />

    </View>
  );
}

Custom Rating Component

import React from 'react';
import { View } from 'react-native';
import { Rating } from 'react-native-ratings';

export default function CustomRating() {
  return (

    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      
<Rating
        type='star'
        ratingCount={5}
        imageSize={40}
        startingValue={2}       // Default value
        showRating               // Shows numeric rating text
        onFinishRating={(rating) => {
          console.log('Selected Rating:', rating);
        }}
      />

    </View>

  );
}

Notes:

• Star Size: imageSize={40}
• Initial Value: startingValue={3}
• Number of Stars: ratingCount={5}
• Callback: onFinishRating={(rating) => console.log(rating)}
• Read-Only: readonly prop makes the stars non-interactive.

<Rating
  readonly
  startingValue={4.5}
  imageSize={25}
/>

Final Thoughts

Adding a rating functionality now is made easy in your React Native applications. By installing the react-native-ratings package, you can easily improve your mobile user experience by allowing them to provide feedback visually and interactively.

You can either choose to have a simple star rating or a fully customizable place to leave feedback; react-native-ratings provides both.

FAQ

1. What is react-native-ratings used for?

react-native-ratings is a React Native library offering an easy and customizable star rating, or custom icon rating, for a mobile application. That is great for any review, feedback form or rating systems.

2. What is the difference between AirbnbRating and Rating components?

• AirbnbRating is a well-styled component with label descriptions (i.e. Bad, Great) like the Airbnb app.
• Rating allows for more customizable options and allows you to customize icons, sizing and behavior.

3. Can I customize the rating icons?

Yes, with the Rating component, you can provide custom icons using the ratingImage prop and style them as needed.

4. Can I use emojis instead of stars in ratings?

Yes! You can use any image or emoji as a custom rating icon using the type=”custom” and ratingImage prop in the Rating component.