fix: fixed an issue where the enable props couldn't set to false

fix #482

Author: dohooo

.changeset/yellow-bottles-itch.md

@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+Fixed an issue where the enable props couldn't set to false.

example/app/src/pages/normal/index.tsx

@@ -35,13 +35,14 @@ function Index() {
       <Carousel
         {...baseOptions}
         loop
+        enabled // Default is true, just for demo
         ref={ref}
         testID={"xxx"}
         style={{ width: "100%" }}
         autoPlay={isAutoPlay}
         autoPlayInterval={isFast ? 100 : 2000}
         data={data}
-        onConfigurePanGesture={g => g.enabled(true)} // default is true, just for demo
+        onConfigurePanGesture={g => g.enabled(true)} // Default is true, just for demo
         pagingEnabled={isPagingEnabled}
         onSnapToItem={index => console.log("current index:", index)}
         renderItem={({ index }) => <SBItem key={index} index={index} />}

src/components/ScrollViewGesture.tsx

@@ -18,6 +18,7 @@ import Animated, {
 } from "react-native-reanimated";
 
 import { Easing } from "../constants";
+import { useUpdateGestureConfig } from "../hooks/useUpdateGestureConfig";
 import { CTX } from "../store";
 import type { WithTimingAnimation } from "../types";
 import { dealWithAnimation } from "../utils/deal-with-animation";
@@ -377,10 +378,11 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     onGestureFinish,
     onConfigurePanGesture,
   ]);
-  const GestureContainer = enabled ? GestureDetector : React.Fragment;
+
+  useUpdateGestureConfig(gesture, { enabled });
 
   return (
-    <GestureContainer gesture={gesture}>
+    <GestureDetector gesture={gesture}>
       <Animated.View
         ref={containerRef}
         testID={testID}
@@ -390,7 +392,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       >
         {props.children}
       </Animated.View>
-    </GestureContainer>
+    </GestureDetector>
   );
 };
 

src/hooks/useUpdateGestureConfig.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import type { PanGesture } from "react-native-gesture-handler";
+
+export const useUpdateGestureConfig = (gesture: PanGesture, config: {
+  enabled?: boolean
+}) => {
+  const { enabled } = config;
+
+  useEffect(() => {
+    if (typeof enabled !== "undefined")
+      gesture.enabled(enabled);
+  }, [enabled, gesture]);
+};