React Native Ratings Component

Common errors

• TypeError: Cannot read properties of undefined (reading 'call') at Rating.onFinishRating

  cause The `onFinishRating` prop callback was not properly bound or is being called in a context where `this` is undefined (common in class components without binding or in functional components without correct state management).
  fix For class components, ensure `this.onFinishRating = this.onFinishRating.bind(this);` in the constructor. For functional components, define the handler directly or use `useCallback`.

• Unable to resolve module './water.png' from '.../src/App.tsx'

  cause The custom `ratingImage` source path for `type='custom'` is incorrect, or the image file does not exist at the specified location.
  fix Verify that the `require('./path/to/image.png')` path accurately points to your image asset. Check for typos or incorrect directory structures.

• Property 'Rating' does not exist on type 'typeof import("react-native-ratings")'.

  cause This TypeScript error often occurs when TypeScript cannot find the type definitions for `react-native-ratings` or when an older version without bundled types is used with a newer TypeScript configuration expecting types.
  fix Ensure `react-native-ratings` is version 8.0.1 or higher. If using an older version, install `@types/react-native-ratings` as a dev dependency (`npm install --save-dev @types/react-native-ratings`). Check your `tsconfig.json` for correct `typeRoots`.

• Invariant Violation: 'main' has not been registered. This can happen if:

  cause While not directly from `react-native-ratings`, if the application fails to start and a `Rating` component is causing issues, it might be due to a React Native bundling problem, potentially related to asset handling or module resolution on older `react-native-ratings` versions.
  fix This usually indicates a broader React Native setup issue. First, check that `react-native-ratings` is correctly installed. If on v8.0.2 or v8.0.3, upgrade to v8.0.4+. Clear Metro Bundler cache (`npm start -- --reset-cache`) or reinstall node_modules.

Warnings

• breaking Version 8.0.1 refactored components from class-based to functional and introduced official TypeScript support. Projects directly accessing internal class component instances, lifecycle methods, or relying on specific internal structures might experience breaking changes. Update your components to use functional patterns and hooks.
  Fix: Refactor any class-based component interactions with `react-native-ratings` to use functional components and hooks. Ensure TypeScript types are correctly inferred and used.
• gotcha Versions 8.0.2 and 8.0.3 contained a bug where assets (like default star images) were not properly included in the distributed build files. This could lead to ratings components appearing without their visual icons.
  Fix: Upgrade to version 8.0.4 or higher to resolve the asset bundling issue. If you are on an affected version and cannot upgrade, consider manually copying assets or using a different version.
• gotcha When using `type='custom'`, the `ratingImage` prop expects a `require()` call for local assets (e.g., `require('./path/to/image.png')`). Providing just a string path or an incorrect import will result in images not being displayed.
  Fix: Ensure `ratingImage` is always passed a `require()`d image, like `ratingImage={require('./water.png')}`, and verify the image path is correct relative to the component file.
• deprecated Prior to v8.0.1, official TypeScript types were not included with the package. Developers often relied on `@types/react-native-ratings` from the DefinitelyTyped repository. With v8.0.1+, types are bundled, making the external `@types` package redundant.
  Fix: If upgrading to v8.0.1 or newer, remove `@types/react-native-ratings` from your `devDependencies` to avoid type conflicts or redundancy.

Install

• npm install react-native-ratings npm
• yarn add react-native-ratings yarn
• pnpm add react-native-ratings pnpm

Imports

• Rating
  wrong:

  const Rating = require('react-native-ratings');

  correct:

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

  Default named export. For CommonJS, use destructuring require.
• AirbnbRating
  wrong:

  import AirbnbRating from 'react-native-ratings';

  correct:

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

  Default named export. Not a default import.
• RatingProps (type)
  wrong:

  import { RatingProps } from 'react-native-ratings';

  correct:

  import type { RatingProps } from 'react-native-ratings';

  TypeScript types were officially added in v8.0.1. Use `import type` for type-only imports.

Quickstart

This quickstart demonstrates how to integrate `Rating` and `AirbnbRating` components, handle user selections, and customize ratings with different types, review labels, and custom images, all within a functional React Native component using hooks.

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Rating, AirbnbRating } from 'react-native-ratings';

const WATER_IMAGE = require('./water.png'); // Ensure 'water.png' is in your project assets

export default function App() {
  const [tapRating, setTapRating] = useState(3);
  const [airbnbRating, setAirbnbRating] = useState(5);
  const [customRating, setCustomRating] = useState(7);

  const handleTapRatingComplete = (rating: number) => {
    console.log("Tap Rating set to: " + rating);
    setTapRating(rating);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Airbnb Rating Example</Text>
      <AirbnbRating
        count={11}
        reviews={["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", "Wow", "Amazing", "Unbelievable", "Jesus"]}
        defaultRating={airbnbRating}
        size={20}
        onFinishRating={(rating) => setAirbnbRating(rating)}
      />

      <Text style={styles.header}>Star Rating Example</Text>
      <Rating
        showRating
        onFinishRating={handleTapRatingComplete}
        style={{ paddingVertical: 10 }}
        startingValue={tapRating}
      />

      <Text style={styles.header}>Heart Rating Example</Text>
      <Rating
        type='heart'
        ratingCount={3}
        imageSize={60}
        showRating
        onFinishRating={(rating) => console.log("Heart Rating: " + rating)}
      />

      <Text style={styles.header}>Custom Image Rating</Text>
      <Rating
        type='custom'
        ratingImage={WATER_IMAGE}
        ratingColor='#3498db'
        ratingBackgroundColor='#c8c7c8'
        ratingCount={10}
        imageSize={30}
        onFinishRating={(rating) => setCustomRating(rating)}
        style={{ paddingVertical: 10 }}
        startingValue={customRating}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingTop: 50,
  },
  header: {
    fontSize: 20,
    marginTop: 20,
    marginBottom: 10,
    fontWeight: 'bold',
  }
});