[v4] listview in sheet scrolls to top when scrolling sometimes

[theobouwman]

Bug

We have a BottomSheetFlatList in our BottomSheet and as shown in the screenrecoding, you need to scroll carefully otherwise the listview scrolls to the top.

RPReplay_Final1723206729.2.mov

Environment info

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

Steps To Reproduce

<BottomSheet 
            onClose={() => dispatch(toggleNearbySheet())}
            ref={bottomSheetRef}
            index={1}
            snapPoints={snapPoints}
            onChange={handleSheetChanges}
            style={styles.container}
        >
            <View flex>
                <FinaliseProfileBanner />
                <View marginT-10 marginB-10 row>
                    <View flex right>
                        <Button
                            iconSource={() => <MaterialIcons name={!allowsLocationSharing ? "location-on" : "location-off"} size={14} color={Colors.white} />}
                            onPress={() => {
                                if (hasLocationPermission) { 
                                    dispatch(setAllowsLocationSharing(allowsLocationSharing ? ALLOWS_LOCATION_SHARING.NO : ALLOWS_LOCATION_SHARING.NOT_SET_ASK_AGAIN)) 
                                }

                                selectTab('People')
                            }}
                            green={hasLocationPermission}
                            grey={!hasLocationPermission}
                            circle
                            flex
                            paddingH-10
                        />
                    </View>
                    <View flex-5 row center>
                        <View marginR-10>
                            <Button label='People' size='small' outline={!tabIsSelected('People')} onPress={() => selectTab('People')} />
                            {nearbyCount || meNetworkCount ? <CustomBadge color={Colors.badgeGreen} top={-3} count={nearbyCount + meNetworkCount} /> : !allowsLocationSharing ? <CustomBadge color={Colors.badgeRed} top={-3} count={0} /> : null}
                        </View>
                        <View>
                            <Button label="Moments" size='small' outline={!tabIsSelected('Moments')} onPress={() => selectTab('Moments')} />
                            {false ? <CustomBadge color={Colors.badgeGreen} top={-3} count={'new'} /> : null}
                        </View>
                        <View marginL-10>
                            <Button label="Events" size='small' outline={!tabIsSelected('Events')} onPress={() => selectTab('Events')} />
                            {eventsCount ? <CustomBadge color={Colors.badgeGreen} top={-3} count={eventsCount} /> : null}
                        </View>
                    </View>
                    <View flex></View>
                </View>

                <PagerView 
                    style={{
                        flex: 1
                    }} 
                    scrollEnabled={false}
                    initialPage={selectedIndex} 
                    onPageSelected={(event) => {
                        setSelectedIndex(event.nativeEvent.position)
                    }}
                    onPageScroll={(event) => {
                        setSelectedIndex(event.nativeEvent.position)
                    }}
                    ref={pagerView => {
                        setPagerRef(pagerView)
                    }}
                >
                    <View key="1">
                        <BottomSheetSectionList
                            style={styles.list}
                            // ListHeaderComponent={renderNearbyUserSearch()}
                            stickySectionHeadersEnabled={false}
                            ListFooterComponent={
                                <InviteMembersCard />
                            }
                            contentContainerStyle={styles.contentContainerStyle}
                            sections={combinedFilteredNearbyMeNetworkSections} 
                            renderSectionHeader={renderSectionHeader}
                            renderItem={renderPeopleItem}
                        />
                    </View>
...

Is this a common issue?

[github-actions]

@theobouwman: hello! 👋

This issue is being automatically closed because it does not follow the issue template.