{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-native-ratings"],"cli":null},"imports":["import { Rating } from 'react-native-ratings';","import { AirbnbRating } from 'react-native-ratings';","import type { RatingProps } from 'react-native-ratings';"],"auth":{"required":false,"env_vars":[]},"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    <View style={styles.container}>\n      <Text style={styles.header}>Airbnb Rating Example</Text>\n      <AirbnbRating\n        count={11}\n        reviews={[\"Terrible\", \"Bad\", \"Meh\", \"OK\", \"Good\", \"Hmm...\", \"Very Good\", \"Wow\", \"Amazing\", \"Unbelievable\", \"Jesus\"]}\n        defaultRating={airbnbRating}\n        size={20}\n        onFinishRating={(rating) => setAirbnbRating(rating)}\n      />\n\n      <Text style={styles.header}>Star Rating Example</Text>\n      <Rating\n        showRating\n        onFinishRating={handleTapRatingComplete}\n        style={{ paddingVertical: 10 }}\n        startingValue={tapRating}\n      />\n\n      <Text style={styles.header}>Heart Rating Example</Text>\n      <Rating\n        type='heart'\n        ratingCount={3}\n        imageSize={60}\n        showRating\n        onFinishRating={(rating) => console.log(\"Heart Rating: \" + rating)}\n      />\n\n      <Text style={styles.header}>Custom Image Rating</Text>\n      <Rating\n        type='custom'\n        ratingImage={WATER_IMAGE}\n        ratingColor='#3498db'\n        ratingBackgroundColor='#c8c7c8'\n        ratingCount={10}\n        imageSize={30}\n        onFinishRating={(rating) => setCustomRating(rating)}\n        style={{ paddingVertical: 10 }}\n        startingValue={customRating}\n      />\n    </View>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}