DOCSEARCHbyAlgolia
Submit Docs

react-native-ratings

repository·master·Indexed 21 days ago

https://github.com/monte9/react-native-ratings

A React Native component library for interactive rating interfaces. It includes the Rating component for swipe-based interactions with support for star, rocket, bell, heart, or custom icons, and the AirbnbRating component for tap-based interactions featuring customizable text labels for reviews.

Tokens
3.2K
Snippets
9
Records
13
Agent score
74%

What's inside react-native-ratings

  2. Use AirbnbRating component

    master

    The AirbnbRating component provides a rating interface similar to Airbnb, featuring text labels (reviews) that appear when a user taps a specific rating value. It supports custom colors for the icons, text, and background, as well as custom review labels.

    Key features:

    • reviews: An array of strings used as labels for each rating level.
    • count: Total number of ratings to display.
    • onFinishRating: Callback function that returns the final rating value as a whole number.
    import { AirbnbRating } from 'react-native-ratings';

<AirbnbRating
  count={11}
  reviews={["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", "Wow", "Amazing", "Unbelievable", "Jesus"]}
  defaultRating={11}
  size={20}
/>

  3. Use Rating component

    master

    The Rating component is a versatile component that supports various built-in icon types (star, rocket, bell, heart) or a custom type using your own image. It supports both tap and swipe interactions.

    Key features:

    • type: Choose from star, rocket, bell, heart, or custom.
    • ratingImage: Used when type='custom' to provide a custom image source.
    • onFinishRating: Callback function triggered when the user completes the rating.
    • jumpValue: If set (e.g., 0.5), the rating increments in steps of that value instead of whole numbers.
    import { Rating } from 'react-native-ratings';

// Standard star rating
<Rating
  showRating
  onFinishRating={this.ratingCompleted}
  style={{ paddingVertical: 10 }}
/>

// Heart type rating
<Rating
  type='heart'
  ratingCount={3}
  imageSize={60}
  showRating
  onFinishRating={this.ratingCompleted}
/>

// Custom image rating
const WATER_IMAGE = require('./water.png')
<Rating
  type='custom'
  ratingImage={WATER_IMAGE}
  ratingColor='#3498db'
  ratingBackgroundColor='#c8c7c8'
  ratingCount={10}
  imageSize={30}
  onFinishRating={this.ratingCompleted}
  style={{ paddingVertical: 10 }}
/>

  4. RatingProps API Reference

    master

    The Rating component accepts the following props (defined by RatingProps):

    propdefaulttypedescription
    typestarstringBuilt-in types: star, rocket, bell, heart or custom for custom images
    ratingImagestarstringCustom image source (used with type='custom')
    ratingColor#f1c40fstring (color)Custom fill-color for the rating icon (used with type='custom')
    ratingBackgroundColorwhitestring (color)Custom background-fill-color for the rating icon (used with type='custom')
    tintColornonestringColor used to change the background of the rating icon
    ratingCount5numberNumber of rating images to display
    ratingTextColornonestringColor used for the text labels
    imageSize50numberSize of each rating image
    showRatingnonebooleanDisplays the Built-in Rating UI to show the rating value in real-time
    readonlyfalsebooleanWhether the rating can be modified by the user
    startingValueratingCount/2numberInitial rating to render
    fractions2numberDecimal places for the rating value (0 to 20)
    minValue0numberMinimum value the user can select
    stylenonestyleAdditional styling for the container view
    jumpValue0numberValue to jump when rating changes (e.g., 0.5 allows increments like 0, 0.5, 1.0...)
    onStartRatingnonefunction(rating: number)Callback when the user starts rating
    onSwipeRatingnonefunction(rating: number)Callback when the user is swiping
    onFinishRatingnonefunction(rating: number)Callback when the user finishes rating (required)

  5. Configure TapRatingProps

    master

    The TapRating component accepts the following props for customization:

    PropTypeDefaultDescription
    countnumber5Total number of ratings to display.
    reviewsstring[]['Terrible', 'Bad', 'Okay', 'Good', 'Great']Labels to show when each value is tapped (e.g., index 0 is used if the first star is tapped).
    showRatingbooleantrueDetermines if the review text label is shown above the stars.
    reviewColorstring#f1c40fColor value for the review text.
    reviewSizenumber40Font size for the review text.
    defaultRatingnumber3Initial value for the rating.
    starContainerStyleStyleProp<ViewStyle>undefinedStyle for the container holding the stars.
    ratingContainerStyleStyleProp<ViewStyle>undefinedStyle for the overall rating container.
    onFinishRating(number) => voidundefinedCallback triggered when the user finishes rating. Receives the final rating as a whole number.
    isDisabledbooleanfalseWhether the rating can be modified by the user.
    selectedColorstring#004666Color value for filled stars.
    unSelectedColorstring#BDC3C7Color value for unfilled stars.
    sizenumber40Size of the rating image/star.
    starImagestringundefinedCustom base image source for the stars.
    starStyleStyleProp<ViewStyle>undefinedStyle for individual stars.

  6. AirbnbRating API Reference

    master

    The AirbnbRating component accepts the following props:

    propdefaulttypedescription
    defaultRating3numberInitial value for the rating
    reviews['Terrible', 'Bad', 'Okay', 'Good', 'Great']string[]Labels to show when each value is tapped (index 0 corresponds to the first star)
    count5numberTotal number of ratings to display
    selectedColor#f1c40fstring (color)Custom fill-color for the rating icon
    unSelectedColor#BDC3C7string (color)Custom not fill-color for the rating icon
    reviewColor#f1c40fstring (color)Custom text color for the review text
    size40numberThe size of each rating image (optional)
    reviewSize25numberCustom font size for the review text
    showRatingtruebooleanDetermines if to show the reviews above the rating
    isDisabledfalsebooleanWhether the rating can be modified by the user
    onFinishRatingnonefunction(value: number)Callback method when the user finishes rating. Returns the final rating value as a whole number
    starContainerStylenoneobject or stylesheetCustom styles applied to the star container
    ratingContainerStylenoneobject or stylesheetCustom styles applied to the rating container
    starImageSTAR_IMAGEstringCustom base image source (optional)
    starStylenoneobject or stylesheetCustom styles applied to the star (optional)

  7. Implement custom icons in SwipeRating

    master

    To use a custom image instead of the built-in star, heart, rocket, or bell, set the type prop to 'custom' and provide a ratingImage source. You can also specify custom ratingColor and ratingBackgroundColor to match your design.

    import { Image } from 'react-native';
import SwipeRating from 'react-native-ratings/src/SwipeRating';

const MyCustomIcon = () => (
  <Image source={require('./my-icon.png')} />
);

<SwipeRating
  type="custom"
  ratingImage={<MyCustomIcon />}
  ratingColor="#3498db"
  ratingBackgroundColor="#ecf0f1"
/>

  8. Use the SwipeRating component

    master

    The SwipeRating component allows users to provide a rating by swiping across a set of icons. It supports built-in icon types (star, heart, rocket, bell) or custom images. You can configure the number of icons, their size, colors, and handle rating events via callbacks.

    import SwipeRating from 'react-native-ratings/src/SwipeRating';

<SwipeRating
  type="star"
  ratingCount={5}
  imageSize={40}
  onFinishRating={(rating) => console.log(rating)}
/>

  9. Configure SwipeRating props

    master

    The SwipeRating component accepts the following props to customize its behavior and appearance:

    Visual Customization

    • type: The icon type to use. Options: 'star', 'heart', 'rocket', 'bell', or 'custom'. (Default: 'star')
    • ratingImage: A custom image source. Required if type='custom'.
    • ratingColor: Custom fill color for the icon. (Default: '#f1c40f')
    • ratingBackgroundColor: Custom background fill color for the icon. (Default: 'white')
    • ratingCount: Total number of icons to display. (Default: 5)
    • imageSize: The size of each rating icon in pixels. (Default: 40)
    • tintColor: Color applied to the icon image via tintColor.
    • ratingTextColor: Color used for the real-time rating text labels. (Default: matches type color)
    • style: A ViewStyle object for the container view.

    Rating Logic & Constraints

    • startingValue: The initial rating value to render. (Default: ratingCount / 2)
    • minValue: The minimum selectable rating value. (Default: 0)
    • fractions: Number of decimal places for the rating value. Must be a number between 0 and 20.
    • jumpValue: The number to jump per swipe. If set, the rating will snap to increments. (Default: 0)
    • readonly: If true, the user cannot modify the rating. (Default: false)

    Callbacks

    • onStartRating: Called when the user begins the rating gesture.
    • onSwipeRating: Called continuously as the user swipes. Receives the current rating value.
    • onFinishRating: Called when the user finishes the gesture. Receives the final rating value as a whole number (unless fractions is used).

    UI Display

    • showRating: Whether to display the real-time rating value UI (e.g., "Rating: 3/5"). (Default: false)
    • showReadOnlyText: Whether to show a "(readonly)" label when readonly is true. (Default: false)

  10. Use the TapRating component

    master

    The TapRating component provides an interactive star rating interface where users can tap stars to select a rating. It can display text labels (reviews) corresponding to each rating level and supports customization of colors, sizes, and styles.

    import TapRating from 'react-native-ratings/TapRating';

<TapRating
  count={5}
  defaultRating={3}
  reviews={['Terrible', 'Bad', 'Okay', 'Good', 'Great']}
  onFinishRating={(rating) => console.log('User rated:', rating)}
/>

  11. Import Rating and AirbnbRating components

    master

    The react-native-ratings package provides two primary rating components: Rating (for swipe-based interaction) and AirbnbRating (for tap-based interaction). You can import them from the root package entrypoint.

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