Thumb color not changeable

[Jeroen-G]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I checked for possible duplicate issues, with possible answers.

Bug summary

Because there is a thumbInner style with backgroundColor: 'white', it does not matter what color I give in thumbStyle, it is always white.

Environment info

"devDependencies": {
"@react-native-community/cli": "latest",
}

[carlos-dubon]

nice library, but this is a deal breaker...

[shariqahmed525]

Did you find any solution @Jeroen-G

[shariqahmed525]

@Jeroen-G
You can use this patch file as a temporary workaround to fix the issue for now. Apply it using patch-package, and it will be reapplied automatically on every install. After adding the patch file to your project, reinstall the package to ensure the changes take effect. You just need to pass thumbInnerColor as a prop, until an official fix is released.

diff --git a/node_modules/react-native-fast-range-slider/lib/module/RangeSlider.js b/node_modules/react-native-fast-range-slider/lib/module/RangeSlider.js
index 077f9ee..6ca5b1e 100644
--- a/node_modules/react-native-fast-range-slider/lib/module/RangeSlider.js
+++ b/node_modules/react-native-fast-range-slider/lib/module/RangeSlider.js
@@ -23,7 +23,8 @@ const DEFAULT_VALUES = {
   LEFT_THUMB_LABEL: 'Left handle',
   RIGHT_THUMB_LABEL: 'Right handle',
   MINIMUM_DISTANCE: MIN_THUMB_SPACING,
-  SHOW_THUMB_LINES: true
+  SHOW_THUMB_LINES: true,
+  THUMB_COLOR: 'white'
 };
 
 // ================ Types ================
@@ -46,15 +47,6 @@ const staticStyles = StyleSheet.create({
     backgroundColor: '#8E8E8E',
     marginHorizontal: 2
   },
-  thumbInner: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 999,
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row'
-  }
 });
 const createDynamicStyles = props => ({
   root: {
@@ -75,7 +67,7 @@ const createDynamicStyles = props => ({
     height: props.thumbSize,
     width: props.thumbSize,
     borderRadius: props.thumbSize / 2,
-    backgroundColor: 'white',
+    backgroundColor: 'transparent',
     position: 'absolute',
     left: 0,
     top: '50%',
@@ -92,6 +84,15 @@ const createDynamicStyles = props => ({
     shadowOpacity: 0.2,
     shadowRadius: 4,
     elevation: 3
+  },
+  thumbInner: {
+    width: '100%',
+    height: '100%',
+    borderRadius: props.thumbSize / 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: props.thumbInnerColor || 'white'
   }
 });
 
@@ -127,7 +128,8 @@ const RangeSlider = ({
   rightThumbAccessibilityLabel = DEFAULT_VALUES.RIGHT_THUMB_LABEL,
   testID,
   // Visual props
-  showThumbLines = DEFAULT_VALUES.SHOW_THUMB_LINES
+  showThumbLines = DEFAULT_VALUES.SHOW_THUMB_LINES,
+  thumbInnerColor = DEFAULT_VALUES.THUMB_INNER_COLOR
 }, _ref) => {
   // Track pressed state
   const [pressed, setPressed] = useState({
@@ -301,7 +303,8 @@ const RangeSlider = ({
     width: effectiveSliderWidth,
     thumbSize,
     trackHeight,
-    enabled
+    enabled,
+    thumbInnerColor
   });
   return /*#__PURE__*/_jsx(GestureHandlerRootView, {
     style: [dynamicStyles.root, {
@@ -333,7 +336,9 @@ const RangeSlider = ({
               height: '100%'
             }],
             children: /*#__PURE__*/_jsx(View, {
-              style: staticStyles.thumbInner,
+              style: [dynamicStyles.thumbInner, {
+                backgroundColor: thumbInnerColor || 'white'
+              }],
               children: showThumbLines && /*#__PURE__*/_jsxs(_Fragment, {
                 children: [/*#__PURE__*/_jsx(View, {
                   style: staticStyles.markerLine
@@ -359,7 +364,9 @@ const RangeSlider = ({
               height: '100%'
             }],
             children: /*#__PURE__*/_jsx(View, {
-              style: staticStyles.thumbInner,
+              style: [dynamicStyles.thumbInner, {
+                backgroundColor: thumbInnerColor || 'white'
+              }],
               children: showThumbLines && /*#__PURE__*/_jsxs(_Fragment, {
                 children: [/*#__PURE__*/_jsx(View, {
                   style: staticStyles.markerLine
diff --git a/node_modules/react-native-fast-range-slider/lib/typescript/src/types.d.ts b/node_modules/react-native-fast-range-slider/lib/typescript/src/types.d.ts
index a6704ba..dfaa3bb 100644
--- a/node_modules/react-native-fast-range-slider/lib/typescript/src/types.d.ts
+++ b/node_modules/react-native-fast-range-slider/lib/typescript/src/types.d.ts
@@ -24,5 +24,6 @@ export interface RangeSliderProps {
     rightThumbAccessibilityLabel?: string;
     testID?: string;
     showThumbLines?: boolean;
+    thumbInnerColor?: string;
 }
 //# sourceMappingURL=types.d.ts.map
\ No newline at end of file
diff --git a/node_modules/react-native-fast-range-slider/src/RangeSlider.tsx b/node_modules/react-native-fast-range-slider/src/RangeSlider.tsx
index cca193f..12c55a3 100644
--- a/node_modules/react-native-fast-range-slider/src/RangeSlider.tsx
+++ b/node_modules/react-native-fast-range-slider/src/RangeSlider.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   useState,
   useCallback,
@@ -32,6 +33,7 @@ const DEFAULT_VALUES = {
   RIGHT_THUMB_LABEL: 'Right handle',
   MINIMUM_DISTANCE: MIN_THUMB_SPACING,
   SHOW_THUMB_LINES: true,
+  THUMB_INNER_COLOR: 'white',
 } as const;
 
 // ================ Types ================
@@ -40,6 +42,7 @@ interface DynamicStylesProps {
   thumbSize: number;
   trackHeight: number;
   enabled: boolean;
+  thumbInnerColor: string;
 }
 
 interface InitialPositions {
@@ -71,15 +74,6 @@ const staticStyles = StyleSheet.create({
     backgroundColor: '#8E8E8E',
     marginHorizontal: 2,
   } as ViewStyle,
-  thumbInner: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 999,
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-  } as ViewStyle,
 });
 
 const createDynamicStyles = (props: DynamicStylesProps) => ({
@@ -119,6 +113,15 @@ const createDynamicStyles = (props: DynamicStylesProps) => ({
     shadowRadius: 4,
     elevation: 3,
   } as ViewStyle,
+  thumbInner: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 999,
+    justifyContent: 'center',
+    backgroundColor: props.thumbInnerColor || 'white',
+    alignItems: 'center',
+    flexDirection: 'row',
+  } as ViewStyle,
 });
 
 // ================ Component ================
@@ -161,6 +164,7 @@ const RangeSlider: ForwardRefRenderFunction<View, RangeSliderProps> = (
 
     // Visual props
     showThumbLines = DEFAULT_VALUES.SHOW_THUMB_LINES,
+    thumbInnerColor = DEFAULT_VALUES.THUMB_INNER_COLOR,
   },
   _ref
 ) => {
@@ -377,6 +381,7 @@ const RangeSlider: ForwardRefRenderFunction<View, RangeSliderProps> = (
     thumbSize,
     trackHeight,
     enabled,
+    thumbInnerColor,
   });
 
   return (
@@ -422,7 +427,7 @@ const RangeSlider: ForwardRefRenderFunction<View, RangeSliderProps> = (
               accessibilityRole="adjustable"
               style={[{ width: '100%', height: '100%' }]}
             >
-              <View style={staticStyles.thumbInner}>
+              <View style={dynamicStyles.thumbInner}>
                 {showThumbLines && (
                   <>
                     <View style={staticStyles.markerLine} />
@@ -451,7 +456,7 @@ const RangeSlider: ForwardRefRenderFunction<View, RangeSliderProps> = (
               accessibilityRole="adjustable"
               style={[{ width: '100%', height: '100%' }]}
             >
-              <View style={staticStyles.thumbInner}>
+              <View style={dynamicStyles.thumbInner}>
                 {showThumbLines && (
                   <>
                     <View style={staticStyles.markerLine} />
diff --git a/node_modules/react-native-fast-range-slider/src/types.ts b/node_modules/react-native-fast-range-slider/src/types.ts
index 78be65b..521c7e6 100644
--- a/node_modules/react-native-fast-range-slider/src/types.ts
+++ b/node_modules/react-native-fast-range-slider/src/types.ts
@@ -38,4 +38,5 @@ export interface RangeSliderProps {
 
   // Visual props
   showThumbLines?: boolean;
+  thumbInnerColor?: string;
 }

[Jeroen-G]

I went with one of the other slider packages out there.