feat: configurable hitSlop

Author: anultravioletaurora

README.md

@@ -58,6 +58,7 @@ function MyComponent() {
 | `color` | `string` | ✓ | The color of the progress track and thumb |
 | `thumbShadowColor` | `string` | | The shadow color of the thumb |
 | `gestureActiveRef` | `RefObject<boolean>` | | A `ref` indicating whether the slider is being used |
+| `hitSlop` | `object` | | A [`hitSlop`](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/native-gesture/#hitslopsettings) object |
 
 ## Features
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jellify-music/react-native-reanimated-slider",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A reusable slider component for React Native, powered by React Native Gesture Handler and Reanimated.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

src/index.tsx

@@ -19,6 +19,12 @@ interface SliderProps {
   backgroundColor: string;
   color: string;
   gestureActiveRef?: React.RefObject<boolean>;
+  hitSlop?: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
 }
 
 export default function Slider({
@@ -31,6 +37,7 @@ export default function Slider({
   thumbShadowColor,
   maxValue,
   gestureActiveRef,
+  hitSlop,
 }: SliderProps) {
   const sliderWidth = useSharedValue(0);
 
@@ -52,7 +59,7 @@ export default function Slider({
 
   const panGesture = Gesture.Pan()
     .runOnJS(true)
-    .hitSlop(HIT_SLOP)
+    .hitSlop(hitSlop || HIT_SLOP)
     .onStart((event) => {
       if (gestureActiveRef) {
         gestureActiveRef.current = true;
@@ -93,7 +100,7 @@ export default function Slider({
 
   const tapGesture = Gesture.Tap()
     .runOnJS(true)
-    .hitSlop(HIT_SLOP)
+    .hitSlop(hitSlop || HIT_SLOP)
     .onBegin((event) => {
       if (gestureActiveRef) {
         gestureActiveRef.current = true;