ANDROID | Sheet closes when trying to drag elements inside it

[skaionedev]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• 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) <#162 (comment)> turns out disabling android bottom sheet dragging is quite trivial <lovegaoshi@0ea9195#diff-0460e11f843c30425f1a329d702f20ffd02a5ec8e965b054aa4e56992a5dcf08R165>. you can put a state as draggingEnabled, setState on the respective RNGH/RN's onStart and onEnd <lovegaoshi/azusa-player-mobile@2760712#diff-25b80eac8850ee98d14e10544dfd5bfd5c56ca73a142235a9b5ac74b999196abR110> . friendly ping @lodev09 <https://github.com/lodev09> - would you consider this approach <lovegaoshi@0ea9195#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 <#162 (comment)>, 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:

0ea9195

...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.