fix: badge and dot ordering are index based to match items

Author: warmfire540

index.d.ts

@@ -92,9 +92,10 @@ declare module 'react-native-dropdown-picker' {
     badgeDotStyle: StyleProp<ViewStyle>;
     badgeStyle: StyleProp<ViewStyle>;
     badgeTextStyle: StyleProp<TextStyle>;
-    getBadgeColor: (value: string) => string;
-    getBadgeDotColor: (value: string) => string;
+    getBadgeColor: (value: string, index: number) => string;
+    getBadgeDotColor: (value: string, index: number) => string;
     IconComponent: () => JSX.Element;
+    index: number;
     label: string;
     onPress: (value: T) => void;
     props: TouchableOpacityProps;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-dropdown-picker",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "description": "A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.",
   "keywords": [
     "picker",

src/components/Picker.js

@@ -1037,29 +1037,25 @@ function Picker({
   /**
    * Get badge color.
    * @param {string} str
+   * @param {number} index
    * @returns {string}
    */
   const getBadgeColor = useCallback(
-    (str) => {
-      str = `${str}`;
-
-      const index = Math.abs(ASCII_CODE(str)) % _badgeColors.length;
-      return _badgeColors[index];
+    (str, index) => {
+      return _badgeColors[index % _badgeColors.length];
     },
     [_badgeColors],
   );
 
   /**
    * Get badge dot color.
    * @param {string} str
+   * @param {number} index
    * @returns {string}
    */
   const getBadgeDotColor = useCallback(
-    (str) => {
-      str = `${str}`;
-
-      const index = Math.abs(ASCII_CODE(str)) % _badgeDotColors.length;
-      return _badgeDotColors[index];
+    (str, index) => {
+      return _badgeDotColors[index % _badgeDotColors.length];
     },
     [_badgeDotColors],
   );
@@ -1078,7 +1074,7 @@ function Picker({
    * @returns {JSX.Element}
    */
   const __renderBadge = useCallback(
-    ({ item }) => (
+    ({ item, index }) => (
       <RenderBadgeComponent
         props={badgeProps}
         rtl={rtl}
@@ -1095,6 +1091,7 @@ function Picker({
         onPress={onPressBadge}
         theme={theme}
         THEME={THEME}
+        index={index}
       />
     ),
     [
@@ -1218,7 +1215,7 @@ function Picker({
           <View style={extendableBadgeContainerStyle}>
             {selectedItems.map((item, index) => (
               <View key={index} style={extendableBadgeItemContainerStyle}>
-                <__renderBadge item={item} />
+                <__renderBadge item={item} index={index} />
               </View>
             ))}
           </View>

src/components/RenderBadgeItem.js

@@ -18,6 +18,7 @@ function RenderBadge({
   showBadgeDot,
   onPress,
   THEME,
+  index,
 }) {
   /**
    * onPress.
@@ -33,10 +34,10 @@ function RenderBadge({
       RTL_DIRECTION(rtl, THEME.badgeStyle),
       ...[badgeStyle].flat(),
       {
-        backgroundColor: getBadgeColor(value),
+        backgroundColor: getBadgeColor(value, index),
       },
     ],
-    [THEME, rtl, badgeStyle, getBadgeColor],
+    [THEME, rtl, badgeStyle, getBadgeColor, index],
   );
 
   /**
@@ -48,10 +49,10 @@ function RenderBadge({
       RTL_STYLE(rtl, THEME.badgeDotStyle),
       ...[badgeDotStyle].flat(),
       {
-        backgroundColor: getBadgeDotColor(value),
+        backgroundColor: getBadgeDotColor(value, index),
       },
     ],
-    [THEME, rtl, badgeDotStyle, getBadgeDotColor],
+    [THEME, rtl, badgeDotStyle, getBadgeDotColor, index],
   );
 
   /**
@@ -77,6 +78,7 @@ const areEqual = (nextProps, prevProps) => {
   if (nextProps.showBadgeDot !== prevProps.showBadgeDot) return false;
   if (nextProps.rtl !== prevProps.rtl) return false;
   if (nextProps.theme !== prevProps.theme) return false;
+  if (nextProps.index !== prevProps.index) return false;
 
   return true;
 };