fix: updated the enable content panning gesture logic

Author: gorhom

src/components/bottomSheet/BottomSheet.tsx

@@ -378,6 +378,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       keyboardBehavior,
     ]);
     const animatedScrollableState = useDerivedValue(() => {
+      /**
+       * if user had disabled content panning gesture, then we unlock
+       * the scrollable state.
+       */
+      if (!enableContentPanningGesture) {
+        return SCROLLABLE_STATE.UNLOCKED;
+      }
+
       /**
        * if scrollable override state is set, then we just return its value.
        */
@@ -414,6 +422,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
       return SCROLLABLE_STATE.LOCKED;
     }, [
+      enableContentPanningGesture,
       animatedAnimationState.value,
       animatedKeyboardState.value,
       animatedScrollableOverrideState.value,
@@ -1821,6 +1830,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         },
       });
     }
+
+    const DraggableView = enableContentPanningGesture
+      ? BottomSheetDraggableView
+      : Animated.View;
     return (
       <BottomSheetProvider value={externalContextVariables}>
         <BottomSheetInternalProvider value={internalContextVariables}>
@@ -1858,7 +1871,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   accessibilityRole={_providedAccessibilityRole ?? undefined}
                   accessibilityLabel={_providedAccessibilityLabel ?? undefined}
                 >
-                  <BottomSheetDraggableView
+                  <DraggableView
                     key="BottomSheetRootDraggableView"
                     style={contentContainerStyle}
                   >
@@ -1869,7 +1882,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                         footerComponent={footerComponent}
                       />
                     )}
-                  </BottomSheetDraggableView>
+                  </DraggableView>
                 </Animated.View>
                 <BottomSheetHandleContainer
                   key="BottomSheetHandleContainer"

src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx

@@ -23,10 +23,11 @@ function BottomSheetRefreshControlComponent({
 }: BottomSheetRefreshControlProps) {
   //#region hooks
   const draggableGesture = useContext(BottomSheetDraggableContext);
-  const { animatedScrollableState } = useBottomSheetInternal();
+  const { animatedScrollableState, enableContentPanningGesture } =
+    useBottomSheetInternal();
   //#endregion
 
-  if (!draggableGesture) {
+  if (!draggableGesture && enableContentPanningGesture) {
     throw "'BottomSheetRefreshControl' cannot be used out of the BottomSheet!";
   }
 
@@ -38,24 +39,40 @@ function BottomSheetRefreshControlComponent({
     [animatedScrollableState.value]
   );
 
-  const gesture = useMemo(() => {
-    return Gesture.Simultaneous(
-      Gesture.Native().shouldCancelWhenOutside(false),
-      scrollableGesture,
+  const gesture = useMemo(
+    () =>
       draggableGesture
-    );
-  }, [draggableGesture, scrollableGesture]);
+        ? Gesture.Native()
+            // @ts-ignore
+            .simultaneousWithExternalGesture(
+              draggableGesture,
+              scrollableGesture
+            )
+            .shouldCancelWhenOutside(true)
+        : undefined,
+    [draggableGesture, scrollableGesture]
+  );
+
   //#endregion
 
   // render
+  if (gesture) {
+    return (
+      <GestureDetector gesture={gesture}>
+        <AnimatedRefreshControl
+          {...rest}
+          onRefresh={onRefresh}
+          animatedProps={animatedProps}
+        />
+      </GestureDetector>
+    );
+  }
   return (
-    <GestureDetector gesture={gesture}>
-      <AnimatedRefreshControl
-        {...rest}
-        onRefresh={onRefresh}
-        animatedProps={animatedProps}
-      />
-    </GestureDetector>
+    <AnimatedRefreshControl
+      {...rest}
+      onRefresh={onRefresh}
+      animatedProps={animatedProps}
+    />
   );
 }
 

src/components/bottomSheetScrollable/BottomSheetDraggableScrollable.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  GestureDetector,
+  type SimultaneousGesture,
+} from 'react-native-gesture-handler';
+
+interface BottomSheetDraggableScrollableProps {
+  scrollableGesture?: SimultaneousGesture;
+  children: React.ReactNode;
+}
+
+export function BottomSheetDraggableScrollable({
+  scrollableGesture,
+  children,
+}: BottomSheetDraggableScrollableProps) {
+  if (scrollableGesture) {
+    return (
+      <GestureDetector gesture={scrollableGesture}>{children}</GestureDetector>
+    );
+  }
+
+  return children;
+}

src/components/bottomSheetScrollable/ScrollableContainer.android.tsx

@@ -1,9 +1,7 @@
 import React, { forwardRef } from 'react';
-import {
-  GestureDetector,
-  type SimultaneousGesture,
-} from 'react-native-gesture-handler';
+import type { SimultaneousGesture } from 'react-native-gesture-handler';
 import BottomSheetRefreshControl from '../bottomSheetRefreshControl';
+import { BottomSheetDraggableScrollable } from './BottomSheetDraggableScrollable';
 import { styles } from './styles';
 
 interface ScrollableContainerProps {
@@ -35,17 +33,17 @@ export const ScrollableContainer = forwardRef<any, ScrollableContainerProps>(
     ref
   ) {
     const Scrollable = (
-      <GestureDetector gesture={nativeGesture}>
+      <BottomSheetDraggableScrollable scrollableGesture={nativeGesture}>
         <ScrollableComponent ref={ref} {...rest} />
-      </GestureDetector>
+      </BottomSheetDraggableScrollable>
     );
 
     return onRefresh ? (
       <BottomSheetRefreshControl
+        scrollableGesture={nativeGesture}
         refreshing={refreshing}
         progressViewOffset={progressViewOffset}
         onRefresh={onRefresh}
-        scrollableGesture={nativeGesture}
         style={styles.container}
       >
         {Scrollable}

src/components/bottomSheetScrollable/ScrollableContainer.tsx

@@ -1,11 +1,9 @@
 import React, { type FC, forwardRef } from 'react';
-import {
-  GestureDetector,
-  type SimultaneousGesture,
-} from 'react-native-gesture-handler';
+import type { SimultaneousGesture } from 'react-native-gesture-handler';
+import { BottomSheetDraggableScrollable } from './BottomSheetDraggableScrollable';
 
 interface ScrollableContainerProps {
-  nativeGesture: SimultaneousGesture;
+  nativeGesture?: SimultaneousGesture;
   // biome-ignore lint/suspicious/noExplicitAny: 🤷‍♂️
   ScrollableComponent: FC<any>;
 }
@@ -16,9 +14,9 @@ export const ScrollableContainer = forwardRef<never, ScrollableContainerProps>(
     ref
   ) {
     return (
-      <GestureDetector gesture={nativeGesture}>
+      <BottomSheetDraggableScrollable scrollableGesture={nativeGesture}>
         <ScrollableComponent ref={ref} {...rest} />
-      </GestureDetector>
+      </BottomSheetDraggableScrollable>
     );
   }
 );

src/components/bottomSheetScrollable/ScrollableContainer.web.tsx

@@ -1,9 +1,7 @@
 import React, { type ComponentProps, forwardRef, useCallback } from 'react';
-import {
-  GestureDetector,
-  type SimultaneousGesture,
-} from 'react-native-gesture-handler';
+import type { SimultaneousGesture } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
+import { BottomSheetDraggableScrollable } from './BottomSheetDraggableScrollable';
 
 interface ScrollableContainerProps {
   nativeGesture: SimultaneousGesture;
@@ -25,12 +23,12 @@ export const ScrollableContainer = forwardRef<
     [animatedProps]
   );
   return (
-    <GestureDetector gesture={nativeGesture}>
+    <BottomSheetDraggableScrollable scrollableGesture={nativeGesture}>
       <ScrollableComponent
         ref={ref}
         {...rest}
         renderScrollComponent={renderScrollComponent}
       />
-    </GestureDetector>
+    </BottomSheetDraggableScrollable>
   );
 });

src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx

@@ -64,10 +64,11 @@ export function createBottomSheetScrollableComponent<T, P>(
       animatedContentHeight,
       animatedScrollableState,
       enableDynamicSizing,
+      enableContentPanningGesture,
     } = useBottomSheetInternal();
     //#endregion
 
-    if (!draggableGesture) {
+    if (!draggableGesture && enableContentPanningGesture) {
       throw "'Scrollable' cannot be used out of the BottomSheet!";
     }
 
@@ -83,12 +84,14 @@ export function createBottomSheetScrollableComponent<T, P>(
       [animatedScrollableState, showsVerticalScrollIndicator]
     );
 
-    const nativeGesture = useMemo(
+    const scrollableGesture = useMemo(
       () =>
-        Gesture.Native()
-          // @ts-ignore
-          .simultaneousWithExternalGesture(draggableGesture)
-          .shouldCancelWhenOutside(false),
+        draggableGesture
+          ? Gesture.Native()
+              // @ts-ignore
+              .simultaneousWithExternalGesture(draggableGesture)
+              .shouldCancelWhenOutside(false)
+          : undefined,
       [draggableGesture]
     );
     //#endregion
@@ -144,7 +147,7 @@ export function createBottomSheetScrollableComponent<T, P>(
     return (
       <ScrollableContainer
         ref={scrollableRef}
-        nativeGesture={nativeGesture}
+        nativeGesture={scrollableGesture}
         animatedProps={scrollableAnimatedProps}
         overScrollMode={overScrollMode}
         keyboardDismissMode={keyboardDismissMode}