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
Classes
Type Aliases
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 oneto 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>
- Updated .
Package analyzed in 2453 ms. - Missing or incorrect documentation? Open an issue for this package.