Merge pull request #16 from kolking/fix-disabled

Pass disabled prop to the RatingSymbol

README.md

@@ -7,10 +7,13 @@ An interactive rating component for React Native, which can display ratings usin
 ## Installation
 
 ### yarn
+
 ```sh
 yarn add @kolking/react-native-rating
 ```
+
 ### npm
+
 ```sh
 npm i @kolking/react-native-rating
 ```
@@ -73,6 +76,10 @@ Prop | Type | Default | Description
 `onMove` | `(rating: number) => void` | | A function called during pan gesture
 `onChange` | `(rating: number) => void` | | A function called when touch released
 
+## Performance
+
+When rendering a lot of rating components on the same screen, e.g. in a `FlatList` or `SectionList`, make sure to set the `disabled` prop to `true`. Otherwise you may encounter the "excessive number of pending callbacks" warning.
+
 ## 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.

src/Rating.tsx

@@ -126,6 +126,7 @@ export const Rating = React.memo(
             size={size}
             scale={scale}
             index={index + 1}
+            disabled={disabled}
             baseColor={baseColor}
             fillColor={interactive ? touchColor : fillColor}
             baseSource={baseSource}

src/RatingSymbol.tsx

@@ -5,6 +5,7 @@ interface Props {
   size: number;
   index: number;
   scale: number;
+  disabled: boolean;
   baseColor: string;
   fillColor?: string;
   baseSource: ImageSourcePropType;
@@ -17,6 +18,7 @@ const RatingSymbol = ({
   size,
   index,
   scale,
+  disabled,
   baseColor,
   fillColor = baseColor,
   baseSource,
@@ -27,17 +29,19 @@ const RatingSymbol = ({
   const animatedScale = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
-    Animated.spring(animatedScale, {
-      tension: 50,
-      friction: 3,
-      toValue: animatedSymbol.interpolate({
-        inputRange: [index - 1, index, index + 1],
-        outputRange: [1, scale, 1],
-        extrapolate: 'clamp',
-      }) as Animated.Value,
-      useNativeDriver: true,
-    }).start();
-  }, [animatedScale, animatedSymbol, index, scale]);
+    if (!disabled) {
+      Animated.spring(animatedScale, {
+        tension: 50,
+        friction: 3,
+        toValue: animatedSymbol.interpolate({
+          inputRange: [index - 1, index, index + 1],
+          outputRange: [1, scale, 1],
+          extrapolate: 'clamp',
+        }) as Animated.Value,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [disabled, animatedScale, animatedSymbol, index, scale]);
 
   const translateOverlay = animatedOverlay.interpolate({
     inputRange: [index - 1, index],