{"id":15202,"library":"react-native-ratings","title":"React Native Ratings Component","description":"react-native-ratings is a UI component library providing flexible star rating components for React Native applications. It supports both tap and swipe gestures for rating input, offering two main components: `Rating` for generic star ratings with various customization options (like custom images, types such as 'heart' or 'rocket'), and `AirbnbRating` which mimics Airbnb's rating style with review labels. The current stable version is 8.1.0, and the library maintains a fairly active release cadence, with frequent patch and minor updates addressing bugs and adding small features. A key differentiator is its out-of-the-box support for both tap and swipe interactions, custom iconography, and integrated TypeScript types since v8.0.1, making it a robust solution for user feedback collection.","status":"active","version":"8.1.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/Monte9/react-native-ratings","tags":["javascript","react-native","reactjs","reactnative","gestures","ios","stars","android","ratings","typescript"],"install":[{"cmd":"npm install react-native-ratings","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-ratings","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-ratings","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Native applications.","package":"react","optional":false},{"reason":"Peer dependency for React Native applications.","package":"react-native","optional":false}],"imports":[{"note":"Default named export. For CommonJS, use destructuring require.","wrong":"const Rating = require('react-native-ratings');","symbol":"Rating","correct":"import { Rating } from 'react-native-ratings';"},{"note":"Default named export. Not a default import.","wrong":"import AirbnbRating from 'react-native-ratings';","symbol":"AirbnbRating","correct":"import { AirbnbRating } from 'react-native-ratings';"},{"note":"TypeScript types were officially added in v8.0.1. Use `import type` for type-only imports.","wrong":"import { RatingProps } from 'react-native-ratings';","symbol":"RatingProps (type)","correct":"import type { RatingProps } from 'react-native-ratings';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { Rating, AirbnbRating } from 'react-native-ratings';\n\nconst WATER_IMAGE = require('./water.png'); // Ensure 'water.png' is in your project assets\n\nexport default function App() {\n const [tapRating, setTapRating] = useState(3);\n const [airbnbRating, setAirbnbRating] = useState(5);\n const [customRating, setCustomRating] = useState(7);\n\n const handleTapRatingComplete = (rating: number) => {\n console.log(\"Tap Rating set to: \" + rating);\n setTapRating(rating);\n };\n\n return (\n \n Airbnb Rating Example\n setAirbnbRating(rating)}\n />\n\n Star Rating Example\n \n\n Heart Rating Example\n console.log(\"Heart Rating: \" + rating)}\n />\n\n Custom Image Rating\n setCustomRating(rating)}\n style={{ paddingVertical: 10 }}\n startingValue={customRating}\n />\n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n paddingTop: 50,\n },\n header: {\n fontSize: 20,\n marginTop: 20,\n marginBottom: 10,\n fontWeight: 'bold',\n }\n});","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=8.0.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":"8.0.2, 8.0.3"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"If upgrading to v8.0.1 or newer, remove `@types/react-native-ratings` from your `devDependencies` to avoid type conflicts or redundancy.","message":"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.","severity":"deprecated","affected_versions":"<8.0.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"For class components, ensure `this.onFinishRating = this.onFinishRating.bind(this);` in the constructor. For functional components, define the handler directly or use `useCallback`.","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).","error":"TypeError: Cannot read properties of undefined (reading 'call') at Rating.onFinishRating"},{"fix":"Verify that the `require('./path/to/image.png')` path accurately points to your image asset. Check for typos or incorrect directory structures.","cause":"The custom `ratingImage` source path for `type='custom'` is incorrect, or the image file does not exist at the specified location.","error":"Unable to resolve module './water.png' from '.../src/App.tsx'"},{"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`.","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.","error":"Property 'Rating' does not exist on type 'typeof import(\"react-native-ratings\")'."},{"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.","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.","error":"Invariant Violation: 'main' has not been registered. This can happen if:"}],"ecosystem":"npm"}