React-native-reanimated-bottom-sheet: How to deal with nested scroll view

[phucanthony]

Hello guys, I want to nested scroll view inside renderContent function and make its behavior the same with bottom sheet behavior

renderInner = () => {
     return <ScrollView/>  // <= How to make this one pass gesture to parent wrapper when it is scrolled to top
}

Any help with this one ?

[jeffreybello]

I am having this problem as well.
+1

[Adibacaj]

use nestedScrollEnabled

<ScrollView nestedScrollEnabled>{child}</ScrollView>

[bomanimc]

Same here. Any updates would be much appreciated!

[parav01d]

When you use:
enabledContentGestureInteraction={false}
on BottomSheet you can scroll the ScrollView and use Press Interactions etc.

Happy Coding!

I misunderstood the problem, please ignore this.

[taneba]

I have a same issue here.
I think nestedScrollEnabled and enabledContentGestureInteraction={false} don't help us implementing make <ScrollView> pass gesture to parent wrapper when it is scrolled to top, or maybe I missed something?

[damikdk]

For clarity, I want to implement modal dismissing on swipe down if nested ScrollView is scrolled to top already. Like default Modal do since iOS 13.

I tried to disable enabledInnerScrolling if ScrollView.contentOffset.y <= 0, but enabledInnerScrolling is static and can't be changed after constructor()

Any ideas? This issue looks like closest one for my task.

[Jinkwon]

I have same issue :( Any updates would be clear my issue

[helloiamlukas]

Use the onScroll prop to watch for the begin/end of a scroll and snap to the according position.

  function handleScroll({nativeEvent: {contentOffset: {y}}}) {
    // you might want to change these values
    const thresholdTop = -60;  
    const thresholdBottom = 0; 

    if (y < thresholdTop) bottomSheet.current.snapTo(0) // if ScrollView has been dragged on top, snap sheet to the bottom
    else if (y > thresholdBottom) bottomSheet.current.snapTo(1) // if ScrollView has been scrolled up, snap sheet to the top
  }

  function renderContent() {
    return (
      <ScrollView onScroll={handleScroll}>
         // your content
      </ScrollView>
    )
  }

[fsobh]

if You set the nested ScrollView / FlatList style to have a zIndex : 1 , then the first tap gesture made should be detected by the scrolling view before the bottom sheet. this was my only working work around for nested scroll view in BottomSheet for Android. Still works the same on IOS