osdnk / react-native-reanimated-bottom-sheet

Highly configurable bottom sheet component made with react-native-reanimated and react-native-gesture-handler
MIT License
3.33k stars 328 forks source link

How to deal with nested scroll view #95

Open phucanthony opened 5 years ago

phucanthony commented 5 years ago

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 commented 5 years ago

I am having this problem as well. +1

Adibacaj commented 5 years ago

use nestedScrollEnabled

<ScrollView nestedScrollEnabled>{child}</ScrollView>

bomanimc commented 5 years ago

Same here. Any updates would be much appreciated!

parav01d commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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

helloiamlukas commented 4 years ago

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 commented 4 years ago

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

Chhinvanchhai commented 3 years ago

There are solution for these ?