search

gorhom / react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀
https://gorhom.dev/react-native-bottom-sheet/
MIT License
6.77k stars 745 forks source link

[v4] When BottomSheetFlatList is scrolling, and BottomSheet is panning down, then BottomSheetFlatList scrolls to top #1939

Open theobouwman opened 2 weeks ago

theobouwman commented 2 weeks ago

Bug

When BottomSheetFlatList is scrolling, and BottomSheet is panning down, then BottomSheetFlatList scrolls to top. Here a screen recording:

https://github.com/user-attachments/assets/bcecf111-d791-441a-8afc-91e1b8af85cd

Environment info

Library Version
@gorhom/bottom-sheet ^4.5.1
react-native 0.70.14
react-native-reanimated ^2.10.0
react-native-gesture-handler ~2.5.0

Steps To Reproduce

  1. Have a BottomSheetFlatList with enough items so you can scroll.
  2. Fling the list so it scrolls to the bottom.
  3. Then drag the sheet down.
  4. You now see that the BottomSheetFlatList has scrolled al the way to the top.

Describe what you expected to happen:

  1. We use this setup for an infinite feed and expect it just stay where you left it after scrolling.

Reproducible sample code

https://snack.expo.dev/bbA39-KvJDVDDnjqWk1. with example code. When we use FlashList (https://shopify.github.io/flash-list/docs/) we don't have this jump-to-top bug. But we lose a lot of integration with BottomSheet. And scrolling does not work with FlashList in BottomSheet on Android. So not a good solution.

gorhom commented 2 days ago

thanks @theobouwman for reporting this issue, it should be fixed in the next release for v5

gorhom commented 2 days ago

https://github.com/user-attachments/assets/14ba6111-3bbe-4d9b-8208-c33a3b2cd378