feat: allow control panning gestures

example/src/screens/BasicExamples.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, memo, useRef, useMemo } from 'react';
+import React, { useCallback, memo, useRef, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import BottomSheet from '@gorhom/bottom-sheet';
 import ContactList from '../components/contactList';
@@ -12,13 +12,40 @@ interface ExampleScreenProps {
 
 const createExampleScreen = ({ type, count = 25 }: ExampleScreenProps) =>
   memo(() => {
-    // hooks
+    //#region state
+    const [
+      enableContentPanningGesture,
+      setEnableContentPanningGesture,
+    ] = useState(true);
+    const [
+      enableHandlePanningGesture,
+      setEnableHandlePanningGesture,
+    ] = useState(true);
+    //#endregion
+
+    //#region refs
     const bottomSheetRef = useRef<BottomSheet>(null);
+    //#endregion
 
-    // variables
+    //#region variables
     const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
+    const enableContentPanningGestureButtonText = useMemo(
+      () =>
+        enableContentPanningGesture
+          ? 'Disable Content Panning Gesture'
+          : 'Enable Content Panning Gesture',
+      [enableContentPanningGesture]
+    );
+    const enableHandlePanningGestureButtonText = useMemo(
+      () =>
+        enableHandlePanningGesture
+          ? 'Disable Handle Panning Gesture'
+          : 'Enable Handle Panning Gesture',
+      [enableHandlePanningGesture]
+    );
+    //#endregion
 
-    // callbacks
+    //#region callbacks
     const handleSheetChange = useCallback(index => {
       console.log('handleSheetChange', index);
     }, []);
@@ -34,6 +61,13 @@ const createExampleScreen = ({ type, count = 25 }: ExampleScreenProps) =>
     const handleClosePress = useCallback(() => {
       bottomSheetRef.current?.close();
     }, []);
+    const handleEnableContentPanningGesturePress = useCallback(() => {
+      setEnableContentPanningGesture(state => !state);
+    }, []);
+    const handleEnableHandlePanningGesturePress = useCallback(() => {
+      setEnableHandlePanningGesture(state => !state);
+    }, []);
+    //#endregion
 
     return (
       <View style={styles.container}>
@@ -67,11 +101,23 @@ const createExampleScreen = ({ type, count = 25 }: ExampleScreenProps) =>
           style={styles.buttonContainer}
           onPress={() => handleClosePress()}
         />
+        <Button
+          label={enableContentPanningGestureButtonText}
+          style={styles.buttonContainer}
+          onPress={handleEnableContentPanningGesturePress}
+        />
+        <Button
+          label={enableHandlePanningGestureButtonText}
+          style={styles.buttonContainer}
+          onPress={handleEnableHandlePanningGesturePress}
+        />
         <BottomSheet
           ref={bottomSheetRef}
           index={1}
           snapPoints={snapPoints}
           animateOnMount={true}
+          enableContentPanningGesture={enableContentPanningGesture}
+          enableHandlePanningGesture={enableHandlePanningGesture}
           onChange={handleSheetChange}
         >
           <ContactList key={`${type}.list`} type={type} count={count} />

src/components/bottomSheet/BottomSheet.tsx

@@ -48,6 +48,8 @@ import {
   DEFAULT_HANDLE_HEIGHT,
   DEFAULT_ANIMATE_ON_MOUNT,
   DECELERATION_RATE,
+  DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
+  DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
 } from './constants';
 import type { ScrollableRef, BottomSheetMethods } from '../../types';
 import type { BottomSheetProps } from './types';
@@ -74,6 +76,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       index: _providedIndex = 0,
       snapPoints: _providedSnapPoints,
       animateOnMount = DEFAULT_ANIMATE_ON_MOUNT,
+      enableContentPanningGesture = DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
+      enableHandlePanningGesture = DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
       // layout
       handleHeight: _providedHandleHeight,
       containerHeight: _providedContainerHeight,
@@ -341,6 +345,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#region contexts variables
     const internalContextVariables = useMemo(
       () => ({
+        enableContentPanningGesture,
         snapPointsCount: snapPoints.length,
         animatedIndex,
         animatedPosition,
@@ -362,6 +367,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         removeScrollableRef,
         scrollableContentOffsetY,
         scrollableDecelerationRate,
+        enableContentPanningGesture,
       ]
     );
     const externalContextVariables = useMemo(
@@ -504,6 +510,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   simultaneousHandlers={contentWrapperGestureRef}
                   shouldMeasureHeight={shouldMeasureHandleHeight}
                   snapPoints={snapPoints}
+                  enableHandlePanningGesture={enableHandlePanningGesture}
                   animateToPoint={animateToPoint}
                   handleComponent={handleComponent}
                   onMeasureHeight={handleOnHandleMeasureHeight}

src/components/bottomSheet/constants.ts

@@ -6,6 +6,8 @@ const DEFAULT_ANIMATION_EASING: Animated.EasingFunction = Easing.out(
 );
 const DEFAULT_ANIMATION_DURATION = 500;
 const DEFAULT_HANDLE_HEIGHT = 24;
+const DEFAULT_ENABLE_CONTENT_PANNING_GESTURE = true;
+const DEFAULT_ENABLE_HANDLE_PANNING_GESTURE = true;
 const DEFAULT_ANIMATE_ON_MOUNT = false;
 
 const DECELERATION_RATE = Platform.select({
@@ -19,5 +21,7 @@ export {
   DEFAULT_ANIMATION_DURATION,
   DEFAULT_HANDLE_HEIGHT,
   DEFAULT_ANIMATE_ON_MOUNT,
+  DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
+  DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
   DECELERATION_RATE,
 };

src/components/bottomSheet/types.d.ts

@@ -37,19 +37,32 @@ export interface BottomSheetProps extends BottomSheetAnimationConfigs {
   containerHeight?: number;
   /**
    * Top inset value helps to calculate percentage snap points values,
-   * usually comes from `@react-navigation/stack` hook `useHeaderHeight` or from `react-native-safe-area-context` hook `useSafeArea`.
+   * usually comes from `@react-navigation/stack` hook `useHeaderHeight` or
+   * from `react-native-safe-area-context` hook `useSafeArea`.
    * @type number
    * @default 0
    */
   topInset?: number;
-
-  // animated nodes
+  /**
+   * Enable content panning gesture interaction.
+   * @type boolean
+   * @default true
+   */
+  enableContentPanningGesture?: boolean;
+  /**
+   * Enable handle panning gesture interaction.
+   * @type boolean
+   * @default true
+   */
+  enableHandlePanningGesture?: boolean;
   /**
    * To start the sheet closed and snap to initial index when it's mounted.
    * @type boolean
    * @default false
    */
   animateOnMount?: boolean;
+
+  // animated nodes
   /**
    * Animated value to be used as a callback of the position node internally.
    * @type Animated.Value<number>

src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx

@@ -17,6 +17,7 @@ const BottomSheetDraggableViewComponent = ({
 
   // hooks
   const {
+    enableContentPanningGesture,
     contentWrapperGestureRef,
     contentPanGestureHandler,
   } = useBottomSheetInternal();
@@ -39,6 +40,7 @@ const BottomSheetDraggableViewComponent = ({
   return (
     <PanGestureHandler
       ref={panGestureRef}
+      enabled={enableContentPanningGesture}
       simultaneousHandlers={simultaneousHandlers}
       shouldCancelWhenOutside={false}
       onGestureEvent={contentPanGestureHandler}

src/components/bottomSheetHandleContainer/BottomSheetHandleContainer.tsx

@@ -11,6 +11,7 @@ const BottomSheetHandleContainerComponent = ({
   animatedIndex,
   animatedPosition,
   simultaneousHandlers,
+  enableHandlePanningGesture,
   shouldMeasureHeight,
   snapPoints,
   animateToPoint,
@@ -71,6 +72,7 @@ const BottomSheetHandleContainerComponent = ({
   // );
   return shouldRenderHandle ? (
     <PanGestureHandler
+      enabled={enableHandlePanningGesture}
       simultaneousHandlers={simultaneousHandlers}
       shouldCancelWhenOutside={false}
       onGestureEvent={handlePanGestureHandler}

src/components/bottomSheetHandleContainer/types.d.ts

@@ -4,7 +4,7 @@ import type { BottomSheetHandleProps } from '../bottomSheetHandle';
 
 export interface BottomSheetHandleContainerProps
   extends Pick<PanGestureHandlerProperties, 'simultaneousHandlers'>,
-    Pick<BottomSheetProps, 'handleComponent'>,
+    Pick<BottomSheetProps, 'handleComponent' | 'enableHandlePanningGesture'>,
     BottomSheetHandleProps {
   shouldMeasureHeight: boolean;
   snapPoints: Array<number>;

src/components/flatList/FlatList.tsx

@@ -46,7 +46,10 @@ const BottomSheetFlatListComponent = forwardRef(
       handleScrollEvent,
       handleSettingScrollable,
     } = useScrollableInternal(BottomSheetFlatListName);
-    const { contentWrapperGestureRef } = useBottomSheetInternal();
+    const {
+      contentWrapperGestureRef,
+      enableContentPanningGesture,
+    } = useBottomSheetInternal();
 
     // effects
     // @ts-ignore
@@ -61,6 +64,7 @@ const BottomSheetFlatListComponent = forwardRef(
       >
         <NativeViewGestureHandler
           ref={nativeGestureRef}
+          enabled={enableContentPanningGesture}
           waitFor={contentWrapperGestureRef}
         >
           <AnimatedFlatList

src/components/scrollView/ScrollView.tsx

@@ -46,7 +46,10 @@ const BottomSheetScrollViewComponent = forwardRef(
       handleScrollEvent,
       handleSettingScrollable,
     } = useScrollableInternal(BottomSheetScrollViewName);
-    const { contentWrapperGestureRef } = useBottomSheetInternal();
+    const {
+      contentWrapperGestureRef,
+      enableContentPanningGesture,
+    } = useBottomSheetInternal();
 
     // effects
     // @ts-ignore
@@ -60,6 +63,7 @@ const BottomSheetScrollViewComponent = forwardRef(
       >
         <NativeViewGestureHandler
           ref={nativeGestureRef}
+          enabled={enableContentPanningGesture}
           waitFor={contentWrapperGestureRef}
         >
           <AnimatedScrollView

src/components/sectionList/SectionList.tsx

@@ -46,7 +46,10 @@ const BottomSheetSectionListComponent = forwardRef(
       handleScrollEvent,
       handleSettingScrollable,
     } = useScrollableInternal(BottomSheetSectionListName);
-    const { contentWrapperGestureRef } = useBottomSheetInternal();
+    const {
+      contentWrapperGestureRef,
+      enableContentPanningGesture,
+    } = useBottomSheetInternal();
 
     // effects
     // @ts-ignore
@@ -61,6 +64,7 @@ const BottomSheetSectionListComponent = forwardRef(
       >
         <NativeViewGestureHandler
           ref={nativeGestureRef}
+          enabled={enableContentPanningGesture}
           waitFor={contentWrapperGestureRef}
         >
           <AnimatedSectionList

src/contexts/internal.ts

@@ -5,6 +5,7 @@ import { ANIMATION_STATE } from '../constants';
 import type { Scrollable, ScrollableRef } from '../types';
 
 export type BottomSheetInternalContextType = {
+  enableContentPanningGesture: boolean;
   snapPointsCount: number;
   animatedPosition: Animated.SharedValue<number>;
   animatedIndex: Animated.SharedValue<number>;