@kolking/react-native-rating

React Native Rating

An interactive rating component for React Native, which can display ratings using stars, hearts, emojis, or custom symbols of your choice. The component leverages the PanResponder and Animated APIs to create high-performing animations. It is written in TypeScript and has zero dependencies. Whether you’re building a review-based app, a rating system, or any application that requires user feedback, React Native Rating will be an invaluable addition to your toolkit.

Installation

yarn add @kolking/react-native-rating
# or
npm install @kolking/react-native-rating

Example Usage

import React, { useCallback, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Rating } from '@kolking/react-native-rating';

const App = () => {
  const [rating, setRating] = useState(0);

  const handleChange = useCallback(
    (value: number) => setRating(Math.round((rating + value) * 5) / 10),
    [rating],
  );

  return (
    <View style={styles.root}>
      <Rating size={40} rating={rating} onChange={handleChange} />
      <Text style={styles.text}>Rated {rating} out of 5</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 17,
    marginTop: 20,
  },
});

export default App;

Props

Prop	Type	Default	Description
theme	ThemeType	stars	See themes section below
rating	number	0	Decimal rating value
size	number	30	Width and height of the rating symbol
scale	number	1.3	Scaling factor for the snap animation, set it to 1 to turn animation off
spacing	number	size * (scale - 1)	Distance between symbols, calculated based on the scale prop if no value is provided
maxRating	number	5	Maximum rating value and the total number of symbols
disabled	boolean	false	Set true to disable user interaction
baseColor	string	theme default	Color of the "empty" symbols
fillColor	string	theme default	Color of the "filled" symbols
touchColor	string	theme default	Color of the symbols during interaction
baseSymbol	SymbolSource	theme default	An image (or array of images) for the "empty" rating
fillSymbol	SymbolSource	theme default	An image (or array of images) for the "filled" rating
style	ViewStyle		Style object applied to the wrapping View
onMove	(rating: number) => void		A function called during pan gesture
onChange	(rating: number) => void		A function called when touch released

Symbols

To achieve a customized appearance for the component, you have the flexibility to define your own symbols using the baseSymbol and fillSymbol props. The SymbolSource type is defined as ImageSourcePropType | ImageSourcePropType[], allowing you to pass either a single image source or an array of images. It is important to note that when passing an array, its length must match the maxRating value to ensure proper functionality.

Themes

There are multiple pre-defined themes available for selection. All of these themes are designed to support dark color scheme. Moreover, you have the flexibility to override any of the theme props with your own custom values.

stars

Preview	baseSymbol	fillSymbol	baseColor	fillColor	touchColor
			#D1D1D6 light #3A3A3C dark	#FF9500 light #FF9F0A dark	#FF3B30 light #FF453A dark

stars-outline

Preview	baseSymbol	fillSymbol	baseColor	fillColor	touchColor
			#C7C7CC light #48484A dark	#FF9500 light #FF9F0A dark	#FF3B30 light #FF453A dark

hearts

Preview	baseSymbol	fillSymbol	baseColor	fillColor	touchColor
			#D1D1D6 light #3A3A3C dark	#FF2D55 light #FF375F dark	#D70015 light #D70015 dark

hearts-outline

Preview	baseSymbol	fillSymbol	baseColor	fillColor	touchColor
			#C7C7CC light #48484A dark	#FF2D55 light #FF375F dark	#D70015 light #D70015 dark

emoji

Preview	baseSymbol

License

MIT