react-native-ratings

  • Version 8.1.0
  • Published
  • 104 kB
  • 1 dependency
  • MIT license

Install

npm i react-native-ratings
yarn add react-native-ratings
pnpm add react-native-ratings

Overview

The standard Ratings component for React Native

Index

Variables

variable AirbnbRating

const AirbnbRating: React.FunctionComponent<TapRatingProps>;

    Classes

    class Rating

    class SwipeRating extends Component<SwipeRatingProps, SwipeRatingState> {}

      constructor

      constructor(props: any);

        property defaultProps

        static defaultProps: {
        type: string;
        ratingImage: any;
        ratingColor: string;
        ratingBackgroundColor: string;
        ratingCount: number;
        showReadOnlyText: boolean;
        imageSize: number;
        minValue: number;
        jumpValue: number;
        };

          property ratingRef

          ratingRef: any;

            method componentDidMount

            componentDidMount: () => void;

              method componentDidUpdate

              componentDidUpdate: (prevProps: any) => void;

                method componentWillUnmount

                componentWillUnmount: () => void;

                  method displayCurrentRating

                  displayCurrentRating: () => JSX.Element;

                    method getCurrentRating

                    getCurrentRating: (value: any) => number;

                      method getPrimaryViewStyle

                      getPrimaryViewStyle: () => { backgroundColor: any; width: any; height: number };

                        method getSecondaryViewStyle

                        getSecondaryViewStyle: () => {
                        backgroundColor: any;
                        width: any;
                        height: number;
                        };

                          method handleLayoutChange

                          handleLayoutChange: () => void;

                            method render

                            render: () => JSX.Element;

                              method renderRatings

                              renderRatings: () => any;

                                method setCurrentRating

                                setCurrentRating: (rating: any) => void;

                                  Type Aliases

                                  type SwipeRatingProps

                                  type SwipeRatingProps = {
                                  /**
                                  * Graphic used for represent a rating
                                  *
                                  * Default is 'star'
                                  */
                                  type?: string;
                                  /**
                                  * Pass in a custom image source; use this along with type='custom' prop above
                                  */
                                  ratingImage?: React.ReactNode;
                                  /**
                                  * Pass in a custom fill-color for the rating icon; use this along with type='custom' prop above
                                  *
                                  * Default is '#f1c40f'
                                  */
                                  ratingColor?: string;
                                  /**
                                  * Pass in a custom background-fill-color for the rating icon; use this along with type='custom' prop above
                                  *
                                  * Default is 'white'
                                  */
                                  ratingBackgroundColor?: string;
                                  /**
                                  * Number of rating images to display
                                  *
                                  * Default is 5
                                  */
                                  ratingCount?: number;
                                  /**
                                  * Color used for the text labels
                                  */
                                  ratingTextColor?: string;
                                  /**
                                  * The size of each rating image
                                  *
                                  * Default is 50
                                  */
                                  imageSize?: number;
                                  /**
                                  * Callback method when the user starts rating.
                                  */
                                  onStartRating?: Function;
                                  /**
                                  * Callback method when the user finishes rating. Gives you the final rating value as a whole number
                                  */
                                  onFinishRating?: Function;
                                  /**
                                  * Displays the Built-in Rating UI to show the rating value in real-time
                                  *
                                  * Default is false
                                  */
                                  showRating?: boolean;
                                  /**
                                  * Exposes style prop to add additonal styling to the container view
                                  */
                                  style?: StyleProp<ViewStyle>;
                                  /**
                                  * Whether the rating can be modiefied by the user
                                  *
                                  * Default is false
                                  */
                                  readonly?: boolean;
                                  /**
                                  * Whether the text is read only
                                  *
                                  * Default is false
                                  */
                                  showReadOnlyText?: boolean;
                                  /**
                                  * The initial rating to render
                                  *
                                  * Default is ratingCount/2
                                  */
                                  startingValue?: number;
                                  /**
                                  * The number of decimal places for the rating value; must be between 0 and 20
                                  */
                                  fractions?: typeof fractionsType;
                                  /**
                                  * The minimum value the user can select
                                  *
                                  * Default is 0
                                  */
                                  minValue?: number;
                                  /**
                                  * Callback method when the user is swiping.
                                  */
                                  onSwipeRating?: (number: any) => void;
                                  /**
                                  * Color used for the background
                                  */
                                  tintColor?: string;
                                  /**
                                  * The number to jump per swipe
                                  * Default is 0 (not to jump)
                                  */
                                  jumpValue?: number;
                                  };

                                    type TapRatingProps

                                    type TapRatingProps = {
                                    /**
                                    * Total number of ratings to display
                                    *
                                    * Default is 5
                                    */
                                    count?: number;
                                    /**
                                    * Labels to show when each value is tapped
                                    *
                                    * e.g. If the first star is tapped, then value in index 0 will be used as the label
                                    *
                                    * Default is ['Terrible', 'Bad', 'Okay', 'Good', 'Great']
                                    */
                                    reviews?: string[];
                                    /**
                                    * Determines if to show the reviews above the rating
                                    *
                                    * Default is true
                                    */
                                    showRating?: boolean;
                                    /**
                                    * Color value for review.
                                    *
                                    * Default is #f1c40f
                                    */
                                    reviewColor?: string;
                                    /**
                                    * Size value for review.
                                    *
                                    * Default is 40
                                    */
                                    reviewSize?: number;
                                    /**
                                    * Initial value for the rating
                                    *
                                    * Default is 3
                                    */
                                    defaultRating?: number;
                                    /**
                                    * Style for star container
                                    *
                                    * Default is none
                                    */
                                    starContainerStyle?: StyleProp<ViewStyle>;
                                    /**
                                    * Style for rating container
                                    *
                                    * Default is none
                                    */
                                    ratingContainerStyle?: StyleProp<ViewStyle>;
                                    /**
                                    * Callback method when the user finishes rating. Gives you the final rating value as a whole number
                                    */
                                    onFinishRating?: (number: any) => void;
                                    /**
                                    * Whether the rating can be modiefied by the user
                                    *
                                    * Default is false
                                    */
                                    isDisabled?: boolean;
                                    /**
                                    * Color value for filled stars.
                                    *
                                    * Default is #004666
                                    */
                                    selectedColor?: string;
                                    /**
                                    * Size of rating image
                                    *
                                    * Default is 40
                                    */
                                    size?: number;
                                    /**
                                    * Pass in a custom base image source
                                    */
                                    starImage?: string;
                                    };

                                      Package Files (3)

                                      Dependencies (1)

                                      Dev Dependencies (10)

                                      Peer Dependencies (2)

                                      Badge

                                      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-native-ratings.

                                      • Markdown
                                        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-native-ratings)
                                      • HTML
                                        <a href="https://www.jsdocs.io/package/react-native-ratings"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>