feat: add enabled prop to draggable view

example/src/screens/advanced/DraggableViewExample.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import BottomSheet, { BottomSheetDraggableView, BottomSheetView } from '@gorhom/bottom-sheet';
+import { Button } from '../../components/button';
+
+const DraggableViewExample = () => {
+  // hooks
+  const bottomSheetRef = useRef<BottomSheet>(null);
+
+  // variables
+  const snapPoints = useMemo(() => ['25%', '50%'], []);
+
+  // callbacks
+  const handleExpandPress = useCallback(() => {
+    bottomSheetRef.current?.expand();
+  }, []);
+  const handleCollapsePress = useCallback(() => {
+    bottomSheetRef.current?.collapse();
+  }, []);
+  const handleClosePress = useCallback(() => {
+    bottomSheetRef.current?.close();
+  }, []);
+
+  // renders
+  return (
+    <View style={styles.container}>
+      <Button label="Expand" onPress={handleExpandPress} />
+      <Button label="Collapse" onPress={handleCollapsePress} />
+      <Button label="Close" onPress={handleClosePress} />
+      <BottomSheet
+        ref={bottomSheetRef}
+        snapPoints={snapPoints}
+        keyboardBehavior="interactive"
+        keyboardBlurBehavior="restore"
+        enablePanDownToClose={true}
+        enableContentPanningGesture={false}
+      >
+        <BottomSheetView style={styles.row}>
+          <BottomSheetDraggableView style={styles.leftView}>
+            <Text>Draggable</Text>
+          </BottomSheetDraggableView>
+          <View style={styles.rightView}>
+            <Text>Not draggable</Text>
+          </View>
+        </BottomSheetView>
+      </BottomSheet>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+  },
+  row: {
+    flexDirection: 'row',
+    height: '100%',
+  },
+  leftView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#ccc',
+  },
+  rightView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#ddd',
+  },
+});
+
+export default DraggableViewExample;

example/src/screens/index.ts

@@ -114,6 +114,11 @@ const advancedSection = {
       slug: 'Advanced/FooterExample',
       getScreen: () => require('./advanced/FooterExample').default,
     },
+    {
+      name: 'DraggableView',
+      slug: 'Advanced/DraggableViewExample',
+      getScreen: () => require('./advanced/DraggableViewExample').default,
+    },
   ],
 };
 if (Platform.OS !== 'web') {

src/components/bottomSheet/BottomSheet.tsx

@@ -1866,9 +1866,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     // render
-    const DraggableView = enableContentPanningGesture
-      ? BottomSheetDraggableView
-      : Animated.View;
     return (
       <BottomSheetProvider value={externalContextVariables}>
         <BottomSheetInternalProvider value={internalContextVariables}>
@@ -1906,12 +1903,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   accessibilityRole={_providedAccessibilityRole ?? undefined}
                   accessibilityLabel={_providedAccessibilityLabel ?? undefined}
                 >
-                  <DraggableView
+                  <BottomSheetDraggableView
                     key="BottomSheetRootDraggableView"
                     style={contentContainerStyle}
+                    enabled={enableContentPanningGesture}
                   >
                     {children}
-                  </DraggableView>
+                  </BottomSheetDraggableView>
                   {footerComponent && (
                     <BottomSheetFooterContainer
                       footerComponent={footerComponent}

src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx

@@ -13,11 +13,11 @@ const BottomSheetDraggableViewComponent = ({
   refreshControlGestureRef,
   style,
   children,
+  enabled = true,
   ...rest
 }: BottomSheetDraggableViewProps) => {
   //#region hooks
   const {
-    enableContentPanningGesture,
     simultaneousHandlers: _providedSimultaneousHandlers,
     waitFor,
     activeOffsetX,
@@ -56,7 +56,7 @@ const BottomSheetDraggableViewComponent = ({
   ]);
   const draggableGesture = useMemo(() => {
     let gesture = Gesture.Pan()
-      .enabled(enableContentPanningGesture)
+      .enabled(enabled)
       .shouldCancelWhenOutside(false)
       .runOnJS(false)
       .onStart(contentPanGestureHandler.handleOnStart)
@@ -94,7 +94,7 @@ const BottomSheetDraggableViewComponent = ({
   }, [
     activeOffsetX,
     activeOffsetY,
-    enableContentPanningGesture,
+    enabled,
     failOffsetX,
     failOffsetY,
     simultaneousHandlers,

src/components/bottomSheetDraggableView/types.d.ts

@@ -6,4 +6,5 @@ export type BottomSheetDraggableViewProps = RNViewProps & {
   nativeGestureRef?: Exclude<GestureRef, number>;
   refreshControlGestureRef?: Exclude<GestureRef, number>;
   children: ReactNode[] | ReactNode;
+  enabled?: boolean
 };