InnerScrolling not working

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

InnerScrolling not working #228

Open Arjun-aks opened 4 years ago

Arjun-aks commented 4 years ago

Scrolling works fine in ios but not scroll in android

Deep903 commented 4 years ago

I have a similar issue with a horizontal scroll inside the header. Works on ios, but is buggy on android. If you use multiple fingers/play around with it, it will work. Otherwise, the bottom sheet keeps being selected.

markharding commented 4 years ago

Confirmed on Android for me.

Deep903 commented 4 years ago

Possible workaround is to just put anything scrollable in the body and adjust the snap points accordingly so that the top portion of the body mimics a header.

Arjun-aks commented 4 years ago

Possible workaround is to just put anything scrollable in the body and adjust the snap points accordingly so that the top portion of the body mimics a header.

can you provide code example.

vertvvv commented 4 years ago

https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/224#issuecomment-624772771

Just import ScrollView/FlatList from react-native-gesture-handler That works on android without any other workarounds

DevangMstryls commented 4 years ago

#224 (comment)

Just import ScrollView/FlatList from react-native-gesture-handler That works on android without any other workarounds

Life saver. Thanks a lot man! 🙌

mitsest commented 4 years ago

Similar issue with horizontal ViewPager inside BottomSheet. Any workarounds?

mostafanadi commented 4 years ago

@vertvvv you are my hero bro ! thanks

osikes commented 3 years ago

#224 (comment)

Just import ScrollView/FlatList from react-native-gesture-handler That works on android without any other workarounds

That 100% solved my issue as well. Thank you 😄

achmadfaturrizky commented 3 years ago

#224 (comment)

Just import ScrollView/FlatList from react-native-gesture-handler That works on android without any other workarounds

thanks a lot

david03g commented 3 years ago

I am having dififuclties getting the Slider from react-native-elements to work inside the bottom sheet. Any scrolling gets picked up by the bottom sheet. I tried setting the zIndex to 1 but it has to effect. I tried putting it in scroll view and its the same problem with the view getting priority even with zIndex set. Any suggestions ?

trentcowden commented 3 years ago

I'm also having issues with using the Slider from react-native-slider and PagerView from react-native-pager-view inside the BottomSheet. Does anyone have any fixes for getting scrolling to work for these components inside a BottomSheet?

trentcowden commented 3 years ago

@david03g Update: I discovered a workaround for this. I use a <Slider /> in my bottom sheet and couldn't get it to scrub on Android.

What I did was set enabledGestureInteraction to false and wrapped my bottom sheet component that gets rendered in the renderContent prop of the <BottomSheet /> in 2 <FlingGestureHandler /> components from react-native-gesture-handler--one to track an upwards fling and one to track a downwards fling. Then I just used the bottomSheetRef.snapTo(index) whenever it registers a fling event to snap to the correct view. Not quite as smooth but still works well!