ANDROID | Sheet closes when trying to drag elements inside it

[skaionedev]

Before submitting a new issue

• [x] I tested using the latest version of the library, as the bug might be already fixed.
• [x] I tested using a supported version of react native.
• [x] I checked for possible duplicate issues, with possible answers.

Bug summary

Hey, I ran into an issue on Android where the sheet closes when interacting with reorderable-list inside it.

additional detials on reorderable-list repo

Example image

Library version

^2.0.4

Environment info

System:
  OS: macOS 15.3.1
  CPU: (12) arm64 Apple M4 Pro
  Memory: 238.02 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: ~/.nvm/versions/node/v22.14.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v22.14.0/bin/yarn
  npm:
    version: 11.1.0
    path: ~/.nvm/versions/node/v22.14.0/bin/npm
  Watchman:
    version: 2025.02.17.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/lib/ruby/gems/3.4.0/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.13016713
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /usr/bin/javac
  Ruby:
    version: 3.4.2
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 17.0.0
    wanted: ^17.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.7
    wanted: 0.76.7
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.78.0 is now available (your project is running on v0.76.7).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.78.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.76.7&to=0.78.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Steps to reproduce

1. clone repo
2. runbun prebuild and bun build:android:sim
3. install apk on android and try to drag inside sheet

Reproducible example repository

https://github.com/skaionedev/example-bottom-sheet

[Keithcat767]

Just to note, I am also experiencing this behavior. No problems with it at all on iOS though.

[lovegaoshi]

im also experiencing this issue to some degree. However this is quite common when you are stacking gesture handlers without specific propagating instructions, especially mixing RNGH with RN native's gesture, as they do NOT stop propagating upwards.

for example, here I have a component that has an RN gesture component inside of an RNGH component. Without any settings, you will see RNGH (the parent gesture handler) stealing gesture from native (the child). The fix here is to make the parent gesture handler disabled on the native slider's onGestureStart

What this means for YOU, is that you should use a globalvar/state that stops true-sheet's gesture handling with the child gesture activated. I'm assuming true-sheet's gesture handling uses native's, ie. onStartShouldSetResponder.

[Keithcat767]

im also experiencing this issue to some degree. However this is quite common when you are stacking gesture handlers without specific propagating instructions, especially mixing RNGH with RN native's gesture, as they do NOT stop propagating upwards.

for example, here I have a component that has an RN gesture component inside of an RNGH component. Without any settings, you will see RNGH (the parent gesture handler) stealing gesture from native (the child). The fix here is to make the parent gesture handler disabled on the native slider's onGestureStart

What this means for YOU, is that you should use a globalvar/state that stops true-sheet's gesture handling with the child gesture activated. I'm assuming true-sheet's gesture handling uses native's, ie. onStartShouldSetResponder.

That all makes sense, but how can I hook into the gesture detector for TrueSheet? If I add one enclosing the TrueSheet, it prevents any gestures inside.

[lovegaoshi]

thats a great question and i am INCORRECT on that true sheet uses onStartShouldSetResponder - well, it does, but true sheet's gesture handling is platform native. so youd have to find ways to emit from js to stop native's, or have some fancy logic preventing it stealing the js focus.

[lovegaoshi]

turns out disabling android bottom sheet dragging is quite trivial. you can put a state as draggingEnabled, setState on the respective RNGH/RN's onStart and onEnd.

friendly ping @lodev09 - would you consider this approach mergeable?

[lovegaoshi]

i dont see the difference toggling from a rngh handler onStart vs a scroll list's onDragStart (or whatever you use) but good luck to whatever ur issue is.

On Fri, May 9, 2025, 10:33 AM Josh Winter @.***> wrote:

joshwinter left a comment (lodev09/react-native-true-sheet#162) https://github.com/lodev09/react-native-true-sheet/issues/162#issuecomment-2867378173

turns out disabling android bottom sheet dragging is quite trivial https://github.com/lovegaoshi/react-native-true-sheet/commit/0ea919583af444332017b1e9ba630369f88fd5dd#diff-0460e11f843c30425f1a329d702f20ffd02a5ec8e965b054aa4e56992a5dcf08R165. you can put a state as draggingEnabled, setState on the respective RNGH/RN's onStart and onEnd https://github.com/lovegaoshi/azusa-player-mobile/commit/27607122c876b549215ef49d0135596f4a999ba2#diff-25b80eac8850ee98d14e10544dfd5bfd5c56ca73a142235a9b5ac74b999196abR110 .

friendly ping @lodev09 https://github.com/lodev09 - would you consider this approach https://github.com/lovegaoshi/react-native-true-sheet/commit/0ea919583af444332017b1e9ba630369f88fd5dd#diff-0460e11f843c30425f1a329d702f20ffd02a5ec8e965b054aa4e56992a5dcf08R165 mergeable?

Unfortunately, this works for the use case in your app because the finger doesn't leave the slider. For a scrolling list, I could be wrong, but I don't believe it will work.

— Reply to this email directly, view it on GitHub https://github.com/lodev09/react-native-true-sheet/issues/162#issuecomment-2867378173, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZMOVVRBL53BF7BDH6C7GFT25TRIJAVCNFSM6AAAAABYV24YV6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQNRXGM3TQMJXGM . You are receiving this because you commented.Message ID: @.***>

[joshwinter]

It's possible I'm doing something wrong. Is anyone able to get this commit working:

https://github.com/lodev09/react-native-true-sheet/commit/0ea919583af444332017b1e9ba630369f88fd5dd

...with a ScrollView and onScrollBeginDrag/onScrollEndDrag. I haven't had any luck.

Thanks for your contribution @lovegaoshi - it would be amazing to get this working in my project.

[Yusuf-Munir]

I have the exact same issue but with a list. If the user tries to scroll up, it will dismiss the sheet. Scrolling down works fine. The user will have to scroll down a little first before scrolling up for the scroll up to work

[lovegaoshi]

ur issue is not enabling the nestedScrolling prop for scrollview (see documentations troubleshoot secrion) or u wrapped a gesturehandlerrootview over it

On Fri, Jun 27, 2025, 7:56 AM Yusuf @.***> wrote:

Yusuf-Munir left a comment (lodev09/react-native-true-sheet#162) https://github.com/lodev09/react-native-true-sheet/issues/162#issuecomment-3013359294

I have the exact same issue but with a list. If the user tries to scroll up, it will dismiss the sheet. Scrolling down works fine. The user will have to scroll down a little first before scrolling up for the scroll up to work

— Reply to this email directly, view it on GitHub https://github.com/lodev09/react-native-true-sheet/issues/162#issuecomment-3013359294, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZMOVVTZQZJR4VQBRUXCNO33FVLRRAVCNFSM6AAAAABYV24YV6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTAMJTGM2TSMRZGQ . You are receiving this because you were mentioned.Message ID: @.***>

[Yusuf-Munir]

ur issue is not enabling the nestedScrolling prop for scrollview (see documentations troubleshoot secrion) or u wrapped a gesturehandlerrootview over it …

Yep this was exactly it. Thank you so much!

[alexrififi]

@skaionedev try this

import {TrueSheet} from '@lodev09/react-native-true-sheet'
import {useCallback, useRef, useState} from 'react'
import {Pressable, Text, View} from 'react-native'
import {GestureHandlerRootView} from 'react-native-gesture-handler'
import Sortable from 'react-native-sortables'

const DATA = Array.from({length: 12}, (_, index) => `Item ${index + 1}`)

function TrueSheetTest() {
  const sheet = useRef<TrueSheet>(null)

  const present = async () => {
    await sheet.current?.present()
  }

  const renderItem = useCallback(
    ({item}) => (
      <View>
        <Text>{item}</Text>
      </View>
    ),
    [],
  )

  const [dismissible, setDismissible] = useState(true)
  function onDragStart() {
    setDismissible(false)
  }
  function onDragEnd() {
    setDismissible(true)
  }

  return (
    <View>
      <Pressable onPress={present}>
        <Text>Present</Text>
      </Pressable>
      <TrueSheet dismissible={dismissible} ref={sheet} sizes={['50%']}>
        <GestureHandlerRootView style={{flexGrow: 1}}>
          <Sortable.Grid
            data={DATA}
            renderItem={renderItem}
            overDrag="vertical"
            onDragStart={onDragStart}
            onDragEnd={onDragEnd}
          />
        </GestureHandlerRootView>
      </TrueSheet>
    </View>
  )
}

export {TrueSheetTest}