disable drag android when needed

bluesky-social · Oct 4, 2024 · 6ae75c8 · 6ae75c8
1 parent 6b81ebe
commit 6ae75c8
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 8 deletions.
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt
@@ -29,6 +29,10 @@ class BottomSheetModule : Module() {
           view.updateLayout()
         }
 
+        Prop("disableDrag") { view: BottomSheetView, prop: Boolean ->
+          view.disableDrag = prop
+        }
+
         Prop("minHeight") { view: BottomSheetView, prop: Float ->
           view.minHeight = prop
         }

diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -39,6 +39,12 @@ class BottomSheetView(
   private val onStateChange by EventDispatcher()
 
   // Props
+  var disableDrag = false
+    set (value) {
+      field = value
+      this.setDraggable(!value)
+    }
+
   var preventDismiss = false
     set(value) {
       field = value
@@ -273,6 +279,15 @@ class BottomSheetView(
     return ratio
   }
 
+  private fun setDraggable(draggable: Boolean) {
+    val dialog = this.dialog ?: return
+    val bottomSheet = dialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
+    bottomSheet?.let {
+      val behavior = BottomSheetBehavior.from(it)
+      behavior.isDraggable = draggable
+    }
+  }
+
   override fun onHostResume() { }
 
   override fun onHostPause() { }

diff --git a/modules/bottom-sheet/src/BottomSheet.types.ts b/modules/bottom-sheet/src/BottomSheet.types.ts
@@ -24,6 +24,7 @@ export interface BottomSheetViewProps {
   preventExpansion?: boolean
   backgroundColor?: ColorValue
   containerBackgroundColor?: ColorValue
+  disableDrag?: boolean
 
   minHeight?: number
   maxHeight?: number

diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts
@@ -12,6 +12,8 @@ export const Context = React.createContext<DialogContextProps>({
   close: () => {},
   isNativeDialog: false,
   nativeSnapPoint: BottomSheetSnapPoint.Hidden,
+  disableDrag: false,
+  setDisableDrag: () => {},
 })
 
 export function useDialogContext() {

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
@@ -1,5 +1,7 @@
 import React, {useImperativeHandle} from 'react'
 import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
   Pressable,
   ScrollView,
   StyleProp,
@@ -17,7 +19,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
-import {isIOS} from '#/platform/detection'
+import {isAndroid, isIOS} from '#/platform/detection'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
@@ -60,6 +62,7 @@ export function Outer({
     BottomSheetSnapPoint.Hidden,
   )
 
+  const [disableDrag, setDisableDrag] = React.useState(false)
   const [snapPoint, setSnapPoint] = React.useState<BottomSheetSnapPoint>(
     BottomSheetSnapPoint.Partial,
   )
@@ -140,20 +143,27 @@ export function Outer({
   )
 
   const context = React.useMemo(
-    () => ({close, isNativeDialog: true, nativeSnapPoint: snapPoint}),
-    [close, snapPoint],
+    () => ({
+      close,
+      isNativeDialog: true,
+      nativeSnapPoint: snapPoint,
+      disableDrag,
+      setDisableDrag,
+    }),
+    [close, snapPoint, disableDrag, setDisableDrag],
   )
 
   return (
     <Portal>
       <Context.Provider value={context}>
         <BottomSheet
           ref={ref}
-          onSnapPointChange={onSnapPointChange}
-          onStateChange={onStateChange}
           cornerRadius={20}
           backgroundColor={t.atoms.bg.backgroundColor}
-          {...nativeOptions}>
+          {...nativeOptions}
+          onSnapPointChange={onSnapPointChange}
+          onStateChange={onStateChange}
+          disableDrag={disableDrag}>
           <View testID={testID}>{children}</View>
         </BottomSheet>
       </Context.Provider>
@@ -180,7 +190,7 @@ export function Inner({children, style}: DialogInnerProps) {
 
 export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
   function ScrollableInner({children, style, ...props}, ref) {
-    const {nativeSnapPoint} = useDialogContext()
+    const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
     const insets = useSafeAreaInsets()
     const [keyboardHeight, setKeyboardHeight] = React.useState(0)
     useKeyboardHandler({
@@ -198,14 +208,25 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
     const paddingBottom =
       nativeSnapPoint === BottomSheetSnapPoint.Full ? fullPadding : basePading
 
+    const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const {contentOffset} = e.nativeEvent
+      if (contentOffset.y > 0 && !disableDrag) {
+        setDisableDrag(true)
+      } else if (contentOffset.y <= 1 && disableDrag) {
+        setDisableDrag(false)
+      }
+    }
+
     return (
       <KeyboardAwareScrollView
         style={[style]}
         contentContainerStyle={[a.pt_2xl, a.px_xl, {paddingBottom}]}
         ref={ref}
         {...props}
         bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
-        bottomOffset={30}>
+        bottomOffset={30}
+        scrollEventThrottle={50}
+        onScroll={isAndroid ? onScroll : undefined}>
         {children}
       </KeyboardAwareScrollView>
     )

diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
@@ -41,6 +41,8 @@ export type DialogContextProps = {
   close: DialogControlProps['close']
   isNativeDialog: boolean
   nativeSnapPoint: BottomSheetSnapPoint
+  disableDrag: boolean
+  setDisableDrag: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 export type DialogControlOpenOptions = {