From 39dae3b16e06f4bd1801dd5780736a8af2bc05b2 Mon Sep 17 00:00:00 2001
From: Nick Seryakov <nick.seryakov@gmail.com>
Date: Tue, 16 Jan 2024 22:43:03 +0400
Subject: [PATCH 1/2] Pass disabled prop to the RatingSymbol

---
 src/Rating.tsx       |  1 +
 src/RatingSymbol.tsx | 26 +++++++++++++++-----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/Rating.tsx b/src/Rating.tsx
index cd7f0a7..e710ca3 100644
--- a/src/Rating.tsx
+++ b/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}
diff --git a/src/RatingSymbol.tsx b/src/RatingSymbol.tsx
index 786ac77..fba08d1 100644
--- a/src/RatingSymbol.tsx
+++ b/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],

From 88b613787e6c29b167be36b89968257263718b75 Mon Sep 17 00:00:00 2001
From: Nick Seryakov <nick.seryakov@gmail.com>
Date: Tue, 16 Jan 2024 23:01:09 +0400
Subject: [PATCH 2/2] Update README.md

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index 5ac6495..6c5d0f8 100644
--- a/README.md
+++ b/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.