React Native Rating Bar

A React Native component for generating and displaying interactive Tap or Swipe enabled Ratings supporting custom icons from vector icons and images.

🚀 Installation

Install the package using yarn or npm:

yarn add @aashu-dubey/react-native-rating-bar

Or

npm install --save @aashu-dubey/react-native-rating-bar

And you also need to install react-native-gesture-handler, as we're using it for Swipe/Tap gestures:

yarn add react-native-gesture-handler

then wrap your App's entry point with GestureHandlerRootView (see official doc) in order for drag to rate feature to work

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* content */}
    </GestureHandlerRootView>
  );
}

For more info see gesture-handler's official Installation guide

💪🏼 Usage

Props

RatingBar

ratingElement's Object

• key	type	description
  empty	JSX.Element	Defines Element to be used as rating bar item when item is unrated.
  half	JSX.Element	Defines Element to be used when as rating bar item when only half portion of item is rated. Note:- allowHalfRating needs to be set to true
  full	JSX.Element	Defines Element to be used when as rating bar item when item is completely rated.

rateStyles's Object

• key	type	description
  container	object (ViewStyle)	Custom styles for View contaning whole rating group.
  starContainer	object (ViewStyle) | ((index: number) => StyleProp)	Custom styles for View contaning Sigle rating item.

ratingView's Object

• key	type	description
  showRating	boolean	Whether to show Rating indicator. By default view doesn't show.
  position	'top' | 'bottom'	Whether to show indicator on top or bottom of Rating bar. By default it shows on top.
  titleText	string	Custom title that shows at the start, before {currentRating} / {itemCount}. Default is "Rating: ".
  containerStyle	object (ViewStyle)	Style for main view container.
  titleStyle	object (TextStyle)	Style for text showing before ratings, at the start.
  ratingStyle	object (TextStyle)	Style for text showing current rating.
  totalStyle	object (TextStyle)	Style for text showing total allowed rating.
  custom	ReactElement	Pass custom component replacing the default one, can be emoji, image or text etc. Passing this will make above props irrelevent, except showRating and position. Note:- You have to handle updates based on rating yourself.

Note:- To make the component work you must pass either of itemBuilder or ratingElement with valid values.

RatingBarIndicator

This is view only alternative to RatingBar with no Tap or Swipe capability and From above props RatingBarIndicator contains layoutDirection, unratedColor, direction, itemCount, itemPadding, itemSize, rating and itemBuilder with same specific uses.

📲 Examples

Using RatingBar Component

There are few different ways to use Rating Bar component

Using ratingElement prop:

<RatingBar
  initialRating={3.5}
  direction="horizontal"
  allowHalfRating
  itemCount={5}
  itemPadding={4}
  ratingElement={{
    full: (
      <Image
        style={{ width: 30, height: 30, tintColor: '#54D3C2' }}
        resizeMode="contain"
        source={require('./assets/heart.png')}
      />
    ),
    half: (
      <Image
        style={{ width: 30, height: 30, tintColor: '#54D3C2' }}
        resizeMode="contain"
        source={require('./assets/heart_half.png')}
      />
    ),
    empty: (
      <Image
        style={{ width: 30, height: 30, tintColor: '#54D3C2' }}
        resizeMode="contain"
        source={require('./assets/heart_border.png')}
      />
    ),
  }}
  onRatingUpdate={value => console.log(value)}
/>

Assets are available here.
Or you can use Icon component from react-native-vector-icons:

<RatingBar
  initialRating={3.5}
  direction="horizontal"
  allowHalfRating
  itemCount={5}
  itemPadding={4}
  ratingElement={{
    full: <Icon name="star-rate" color="#54D3C2" size={40} />,
    half: <Icon name="star-half" color="#54D3C2" size={40} />,
    empty: <Icon name="star-border" color="#54D3C2" size={40} />,
  }}
  onRatingUpdate={value => console.log(value)}
/>

Using itemBuilder prop:

<RatingBar
  initialRating={2.5}
  minRating={1}
  direction="horizontal"
  allowHalfRating
  unratedColor="rgba(255, 193, 7, 0.2)"
  itemCount={5}
  itemPadding={4}
  itemSize={40}
  itemBuilder={() => <Icon name="star" color="#FFC107" size={40} />}
  onRatingUpdate={value => console.log(value)}
/>

Based on itemBuilder prop's index param:

Passing different component in itemBuilder based on index param value:

<RatingBar
  initialRating={3}
  itemCount={5}
  itemPadding={4}
  itemBuilder={index => {
    switch (index) {
      case 0:
        return (
          <Icon name="sentiment-very-dissatisfied" color="#F44336" size={40} />
        );
      case 1:
        return <Icon name="sentiment-dissatisfied" color="#FF5252" size={40} />;
      case 2:
        return <Icon name="sentiment-neutral" color="#FFC107" size={40} />;
      case 3:
        return <Icon name="sentiment-satisfied" color="#8BC34A" size={40} />;
      case 4:
        return (
          <Icon name="sentiment-very-satisfied" color="#4CAF50" size={40} />
        );
      default:
        return <View />;
    }
  }}
  onRatingUpdate={value => console.log(value)}
/>

Using RatingBarIndicator Component

<RatingBarIndicator
  rating={3.37}
  itemBuilder={() => <Icon name="star" color="#FFC107" />}
  itemCount={5}
  itemSize={50}
  unratedColor="rgba(255, 193, 7, 0.2)"
  direction="horizontal" // Or "vertical", "vertical-reverse"
/>

Vertical Mode

vertical	vertical-reverse

🚧 Issue

You may notice, especially in Android drag to rate is a little slower, this is a dev only problem, if you run your build on release mode or even debug with JS dev mode disabled it will run way way faster, something related to this. That being said, I'm trying to fix this.

🌻 Motivation

This project was initially started as I needed to implement a rating component for Hotel Booking UI template in my other open source project for learning React-Native-UI-Templates, and failing to find a proper solution that works same as the original Project in Flutter, I decided to replicate the Rating library used in the Flutter project.
So this package is initially inspired from Flutter package flutter_rating_bar (including the demo 😅) with some extra added functionalities.

🙋‍♀️ Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

📜 License

MIT