From 604084edfa88e5291f52aa68aa7b6a81d5fa0310 Mon Sep 17 00:00:00 2001
From: Georg Vienna <georg.vienna@timeular.com>
Date: Thu, 13 Feb 2025 17:21:36 +0100
Subject: [PATCH 1/2] feat: add enabled prop to draggable view

---
 src/components/bottomSheet/BottomSheet.tsx                | 8 +++-----
 .../bottomSheetDraggableView/BottomSheetDraggableView.tsx | 6 +++---
 src/components/bottomSheetDraggableView/types.d.ts        | 1 +
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 321034d68..55f3dae7b 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/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}
diff --git a/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx b/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
index d721fee7a..75bb7d7a4 100644
--- a/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
+++ b/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,
diff --git a/src/components/bottomSheetDraggableView/types.d.ts b/src/components/bottomSheetDraggableView/types.d.ts
index 5ed61d78c..3ca52e0c2 100644
--- a/src/components/bottomSheetDraggableView/types.d.ts
+++ b/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
 };

From efd67194b85380bca01f7951ed081b90393ef55a Mon Sep 17 00:00:00 2001
From: Georg Vienna <georg.vienna@timeular.com>
Date: Fri, 14 Feb 2025 09:56:31 +0100
Subject: [PATCH 2/2] add example

---
 .../screens/advanced/DraggableViewExample.tsx | 74 +++++++++++++++++++
 example/src/screens/index.ts                  |  5 ++
 2 files changed, 79 insertions(+)
 create mode 100644 example/src/screens/advanced/DraggableViewExample.tsx

diff --git a/example/src/screens/advanced/DraggableViewExample.tsx b/example/src/screens/advanced/DraggableViewExample.tsx
new file mode 100644
index 000000000..e47dfabcd
--- /dev/null
+++ b/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;
diff --git a/example/src/screens/index.ts b/example/src/screens/index.ts
index 49f434593..66572ec40 100644
--- a/example/src/screens/index.ts
+++ b/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') {