react-native-elements · theianmay · Oct 31, 2025 · Oct 27, 2025 · Oct 27, 2025 · Oct 27, 2025
diff --git a/example/src/views/ratings.tsx b/example/src/views/ratings.tsx
@@ -80,6 +80,7 @@ const Ratings: React.FunctionComponent<RatingsComponentProps> = () => {
             type="custom"
             ratingImage={WATER_IMAGE}
             ratingColor="#3498db"
+            ratingBackgroundColor="#c8c7c8"
             ratingCount={10}
             imageSize={30}
             onFinishRating={ratingCompleted}

diff --git a/package.json b/package.json
@@ -35,9 +35,9 @@
     "@react-native/eslint-config": "^0.76.9",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^13.2.0",
-    "@types/jest": "^29.5.5",
     "@tsconfig/react-native": "^3.0.0",
     "@types/babel__preset-env": "^7",
+    "@types/jest": "^29.5.5",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.3.1",
     "babel-jest": "^29.6.3",

diff --git a/packages/base/package.json b/packages/base/package.json
@@ -44,7 +44,6 @@
   },
   "homepage": "https://reactnativeelements.com/",
   "dependencies": {
-    "@rn-vui/ratings": "^0.5.0",
     "@types/react-native-vector-icons": "^6.4.10",
     "color": "^3.2.1",
     "deepmerge": "^4.2.2",

diff --git a/packages/base/src/AirbnbRating/AirbnbRating.tsx b/packages/base/src/AirbnbRating/AirbnbRating.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-// Assuming TapRating and SwipeRating are now available at the root level of 'react-native-ratings'
 import TapRating, { type TapRatingProps as RatingProps } from './TapRating';
 import { RneFunctionComponent } from '../helpers';
 

diff --git a/packages/base/src/AirbnbRating/SwipeRating.tsx b/packages/base/src/AirbnbRating/SwipeRating.tsx
@@ -46,11 +46,14 @@ const TYPES: {
     color: '#f39c12',
     backgroundColor: 'white',
   },
-  custom: {
-    source: STAR_IMAGE,
-    color: '#f1c40f',
-    backgroundColor: 'white',
-  },
+  // Remove hardcoded custom type fallback for now
+  //custom: {
+  //  source: STAR_IMAGE,
+  //  color: '#f1c40f',
+  //  backgroundColor: 'white',
+  //},
+  // Note: 'custom' type uses props directly (ratingImage, ratingColor, ratingBackgroundColor)
+  // No TYPES entry needed - handled via conditional logic throughout the component
 };
 
 //@ts-ignore
@@ -200,7 +203,7 @@ const SwipeRating: React.FC<SwipeRatingProps> = ({
   ratingImage = STAR_IMAGE,
   ratingColor,
   ratingBackgroundColor = 'white',
-  ratingTextColor = TYPES[type]?.color,
+  ratingTextColor,
   ratingCount = 5,
   showReadOnlyText = false,
   imageSize = 50,
@@ -214,7 +217,12 @@ const SwipeRating: React.FC<SwipeRatingProps> = ({
   style,
   showRating = false,
   startingValue = ratingCount / 2,
+  tintColor,
 }) => {
+  // Set ratingTextColor default based on type
+  const textColor =
+    ratingTextColor || (type === 'custom' ? ratingColor : TYPES[type]?.color);
+
   const position = React.useRef(new Animated.Value(0)).current;
   const ratingRef = React.useRef<any>(null);
   const ratingBackdropValue = React.useRef<number>(0);
@@ -293,10 +301,17 @@ const SwipeRating: React.FC<SwipeRatingProps> = ({
     [ratingCount, minValue, imageSize, jumpValue, fractions]
   );
 
-  position.addListener(({ value }) => {
-    const rating = getCurrentRating(value);
-    setCurrentRatingValue(rating);
-  });
+  useEffect(() => {
+    const listenerId = position.addListener(({ value }) => {
+      const rating = getCurrentRating(value);
+      setCurrentRatingValue(rating);
+    });
+
+    // Cleanup listener on unmount to prevent memory leaks
+    return () => {
+      position.removeListener(listenerId);
+    };
+  }, [position, getCurrentRating]);
 
   const panResponderOnGrant = useCallback(
     //@ts-ignore
@@ -362,7 +377,7 @@ const SwipeRating: React.FC<SwipeRatingProps> = ({
   };
 
   const getPrimaryViewStyle = () => {
-    const color = TYPES[type]?.color;
+    const color = type === 'custom' ? ratingColor : TYPES[type]?.color;
 
     const width = position.interpolate({
       inputRange: [
@@ -382,7 +397,8 @@ const SwipeRating: React.FC<SwipeRatingProps> = ({
   };
 
   const getSecondaryViewStyle = () => {
-    const backgroundColor = TYPES[type]?.backgroundColor;
+    const backgroundColor =
+      type === 'custom' ? ratingBackgroundColor : TYPES[type]?.backgroundColor;
 
     const width = position.interpolate({
       inputRange: [
@@ -402,49 +418,47 @@ const SwipeRating: React.FC<SwipeRatingProps> = ({
   };
 
   const renderRatings = React.useMemo(() => {
-    const source = TYPES[type]?.source;
+    const source = type === 'custom' ? ratingImage : TYPES[type]?.source;
     return Array.from({ length: ratingCount }, (_, index) => (
-      <View key={index} style={styles.starsWrapper} testID="RNVUI__Star">
+      <View key={index} style={styles.starsWrapper} testID="RNEUI__Star">
         <Image
           source={source}
-          testID="RNVUI__Star-image"
+          testID="RNEUI__Star-image"
           style={{
             width: imageSize,
             height: imageSize,
-            tintColor: ratingColor,
+            tintColor: tintColor,
           }}
         />
       </View>
     ));
-  }, [ratingCount, imageSize, ratingColor, type]);
+  }, [ratingCount, imageSize, type, ratingImage, tintColor]);
 
   return (
     <View
       pointerEvents={readonly ? 'none' : 'auto'}
       style={style}
-      testID="RNVUI__SwipeRating"
+      testID="RNEUI__SwipeRating"
     >
       {showRating && (
         <View
           style={styles.showRatingView}
-          testID="RNVUI__SwipeRating-showRating"
+          testID="RNEUI__SwipeRating-showRating"
         >
           <View style={styles.ratingView}>
-            <Text style={[styles.ratingText, { color: ratingTextColor }]}>
+            <Text style={[styles.ratingText, { color: textColor }]}>
               Rating:{' '}
             </Text>
-            <Text
-              style={[styles.currentRatingText, { color: ratingTextColor }]}
-            >
+            <Text style={[styles.currentRatingText, { color: textColor }]}>
               {currentRatingValue}
             </Text>
-            <Text style={[styles.maxRatingText, { color: ratingTextColor }]}>
+            <Text style={[styles.maxRatingText, { color: textColor }]}>
               /{ratingCount}
             </Text>
           </View>
           <View>
             {readonly && showReadOnlyText && (
-              <Text style={[styles.readonlyLabel, { color: ratingTextColor }]}>
+              <Text style={[styles.readonlyLabel, { color: textColor }]}>
                 (readonly)
               </Text>
             )}
@@ -454,7 +468,7 @@ const SwipeRating: React.FC<SwipeRatingProps> = ({
       <View
         style={styles.starsWrapper}
         {...panResponder.panHandlers}
-        testID="RNVUI__SwipeRating-pan"
+        testID="RNEUI__SwipeRating-pan"
       >
         <View
           style={styles.starsInsideWrapper}

diff --git a/packages/base/src/AirbnbRating/TapRating.tsx b/packages/base/src/AirbnbRating/TapRating.tsx
@@ -144,11 +144,11 @@ const TapRating: React.FunctionComponent<TapRatingProps> = ({
     return rating_array.map((star) => star);
   };
 
-  const starSelectedInPosition = (position: number) => {
+  const starSelectedInPosition = (selectedPosition: number) => {
     if (typeof onFinishRating === 'function') {
-      onFinishRating(position);
+      onFinishRating(selectedPosition);
     }
-    setPosition(position);
+    setPosition(selectedPosition);
   };
 
   const rating_array = [];
@@ -173,22 +173,22 @@ const TapRating: React.FunctionComponent<TapRatingProps> = ({
   return (
     <View
       style={StyleSheet.flatten([styles.ratingContainer, ratingContainerStyle])}
-      testID="RNVUI__TapRating"
+      testID="RNEUI__TapRating"
     >
       {showRating && (
         <Text
           style={StyleSheet.flatten([
             styles.reviewText,
             { fontSize: reviewSize, color: reviewColor },
           ])}
-          testID="RNVUI__TapRating-showRating"
+          testID="RNEUI__TapRating-showRating"
         >
           {reviews[position - 1]}
         </Text>
       )}
       <View
         style={StyleSheet.flatten([styles.starContainer, starContainerStyle])}
-        testID="RNVUI__TapRating-starContainer"
+        testID="RNEUI__TapRating-starContainer"
       >
         {renderStars(rating_array)}
       </View>

diff --git a/packages/base/src/AirbnbRating/__tests__/SwipeRating.test.tsx b/packages/base/src/AirbnbRating/__tests__/SwipeRating.test.tsx
@@ -19,38 +19,38 @@ describe('SwipeRating', () => {
     const { getAllByTestId } = render(
       <SwipeRating ratingCount={ratingsCount} />
     );
-    const stars = getAllByTestId('RNVUI__Star');
+    const stars = getAllByTestId('RNEUI__Star');
     expect(stars).toHaveLength(ratingsCount);
   });
 
   it('should render with different type', () => {
     const heartImage = require('../images/heart.png');
     const { getAllByTestId } = render(<SwipeRating type="heart" />);
-    const swipeRatings = getAllByTestId('RNVUI__Star-image');
+    const swipeRatings = getAllByTestId('RNEUI__Star-image');
 
     swipeRatings.forEach((swipeRating) => {
       expect(swipeRating.props.source).toEqual(heartImage); // Check if the image source is the heart image
     });
   });
 
-  // it('should render with custom image', () => {
-  //   const customImage = require('../images/bell.png');
-  //   const { getAllByTestId } = render(
-  //     <SwipeRating type="custom" ratingImage={customImage} />
-  //   );
-  //   const swipeRatings = getAllByTestId('RNVUI__Star-image');
+  it('should render with custom image', () => {
+    const customImage = require('../images/bell.png');
+    const { getAllByTestId } = render(
+      <SwipeRating type="custom" ratingImage={customImage} />
+    );
+    const swipeRatings = getAllByTestId('RNEUI__Star-image');
 
-  //   swipeRatings.forEach((swipeRating) => {
-  //     expect(swipeRating.props.source).toEqual(customImage); // Check if the image source is the custom image
-  //   });
-  // });
+    swipeRatings.forEach((swipeRating) => {
+      expect(swipeRating.props.source).toEqual(customImage); // Check if the image source is the custom image
+    });
+  });
 
   it('should render with custom star color', () => {
     const customStarColor = 'red';
     const { getAllByTestId } = render(
-      <SwipeRating ratingColor={customStarColor} />
+      <SwipeRating tintColor={customStarColor} />
     );
-    const stars = getAllByTestId('RNVUI__Star-image');
+    const stars = getAllByTestId('RNEUI__Star-image');
     stars.forEach((star) => {
       expect(star.props.style.tintColor).toBe(customStarColor);
     });
@@ -61,7 +61,7 @@ describe('SwipeRating', () => {
     const { getAllByTestId } = render(
       <SwipeRating imageSize={customStarSize} />
     );
-    const stars = getAllByTestId('RNVUI__Star-image');
+    const stars = getAllByTestId('RNEUI__Star-image');
     stars.forEach((star) => {
       expect(star.props.style.width).toBe(customStarSize);
       expect(star.props.style.height).toBe(customStarSize);
@@ -73,7 +73,7 @@ describe('SwipeRating', () => {
     const { getAllByTestId } = render(
       <SwipeRating ratingCount={ratingsCount} />
     );
-    const stars = getAllByTestId('RNVUI__Star');
+    const stars = getAllByTestId('RNEUI__Star');
     expect(stars).toHaveLength(ratingsCount);
   });
 
@@ -83,7 +83,7 @@ describe('SwipeRating', () => {
     const { getByTestId } = render(
       <SwipeRating ratingCount={ratingsCount} showRating />
     );
-    const ratingText = getByTestId('RNVUI__SwipeRating-showRating');
+    const ratingText = getByTestId('RNEUI__SwipeRating-showRating');
     expect(ratingText).toBeTruthy();
   });
 });