-
-
Notifications
You must be signed in to change notification settings - Fork 783
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[v4] When BottomSheetFlatList is scrolling, and BottomSheet is panning down, then BottomSheetFlatList scrolls to top #1939
Comments
thanks @theobouwman for reporting this issue, it should be fixed in the next release for |
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-10-02.at.22.40.04.mp4 |
The fix only addresses vertical lists and doesn’t resolve the issue for horizontal lists. |
@oe-bayram should be fairly easy to update the locking function for horizontal support. |
@theobouwman FYI, v5 exports BottomSheetFlashList, which works very good, so you should be good to migrate. |
@hirbod Thanks for the suggestion! Just to clarify, would you recommend using a custom |
This seems to be the same issue I'm having with a horizontal Here's the issue: Screen_Recording_20241030_212743_Expo_Go.mp4This is the code at that state (tried with <BottomSheet
ref={bottomSheetRef}
snapPoints={[130, '60%']}
enableDynamicSizing={false}
index={0}
style={{
paddingStart: 8,
}}
>
{placeBasic ?
<BottomSheetView
style={{width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
<Text style={{ fontSize: 22 }}>{placeBasic.name.replaceAll('\n', ' ')}</Text>
</BottomSheetView> : null}
{placeBasic ? <BottomSheetFlashList
data={["Save", "Share", "Events", "Edit", "Directions", "More"]}
horizontal
keyExtractor={(item) => item}
renderItem={(data) => <View style={{marginVertical: 4, marginHorizontal: 2}}><CustomButton title={data.item}/></View>}
estimatedItemSize={24}
/> : null}
{placeBasic ? placeComplexLoading ? <TextLoading/> : placeComplex?.photos?.length ?
<BottomSheetFlashList
data={data}
horizontal
keyExtractor={(data) => data.name}
renderItem={(data) => {
const size = 240
return <View style={{height: size, width: size, marginHorizontal: 4}}>
<Image source={{
uri: `https://places.googleapis.com/v1/${data.item.name}/media?maxHeightPx=${size}&maxWidthPx=${size}&key=${apiKey}`,
}} style={{height: size, width: size, borderRadius: 10}} width={size} height={size}
resizeMode="cover"/>
</View>
}}
estimatedItemSize={240}
/>
: null : null}
{placeBasic ? placeComplexLoading? <TextLoading/> : placeComplex?.formattedAddress ?
<BottomSheetView
style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingEnd:8 }}>
<Text style={{fontSize: 16, flexWrap:"wrap"}}>{placeComplex.formattedAddress}</Text>
<CustomButton title=">"/>
</BottomSheetView>
: null:null}
</BottomSheet> |
Yes, the code I've seen only locks and take care for the Y axis and does nothing for X. I think adding the same for X will fix it. |
Oh great, so is this fixed in an upcoming update? I also need horizontal scrolling to work. |
possible fixScrollView from react-native-gesture-handler supports disallowInterruption which solves the issue of fighting handlers for a proper solution we can wrap any List component by createNativeWrapper of the react-native-gesture-handler legacy api and use the horizontal and disallowInterruption props I was able to use it to fix that issue on android as in ios this was never an issue because the first handler always wins.
gotchathis somehow does not work with FlashList as the component above doesn't even allow it to initiate scrolling |
Bug
When BottomSheetFlatList is scrolling, and BottomSheet is panning down, then BottomSheetFlatList scrolls to top.
Here a screen recording:
RPReplay_Final1726515224.MP4
Environment info
Steps To Reproduce
Describe what you expected to happen:
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.
The text was updated successfully, but these errors were encountered: