[v4] | [v2] FlatList cutoff by bottom of screen

[bwees]

Bug

I have a bottom sheet with a segmented control and a list of items in it. I am not using the BottomSheetFlatList since I need the segmented control to stay at the top. I have a FlatList that I am then putting information into. However, the flatlist is cutoff by the bottom of the screen. Is there a way to have the flat list resize to the bottom of the display no matter what snap the drawer is at?

Here is a video of behavior

Environment info

Library	Version
@gorhom/bottom-sheet	4.5.1
react-native	0.72.3
react-native-reanimated	3.3.0
react-native-gesture-handler	2.9.0

Steps To Reproduce

Use the below View inside of a Bottom Sheet

1. My snap points are [ '35%', 110, '80%']

Describe what you expected to happen:

1. The scroll view should be fully scrollable and not cut off by the bottom of the screen no matter the position of drawer.

Reproducible sample code

<BottomSheetView className="px-4">
                { groups == undefined ? (
                    <ActivityIndicator />
                ) : (
                <View style={{flexGrow: 1}}>
                    <SegmentedControl
                    values={Object.keys(groups)}
                    selectedIndex={selectedIndex}
                    onValueChange={(value) => {
                        setSelectedGroup(groups[value])
                        setDrawnRoutes(groups[value])
                    }}
                    onChange={(event) => setSelectedIndex(event.nativeEvent.selectedSegmentIndex)}

                />
                    <FlatList
                        data={selectedGroup}
                        keyExtractor={busRoute => busRoute.key}
                        renderItem={({ item: busRoute }) => {
                            return (
                                <TouchableOpacity 
                                    style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 8 }} 
                                    onPress={() => {
                                        setDrawnRoutes([busRoute])
                                        sheetRef.current?.snapToIndex(0)
                                        setSelectedRoute(busRoute)
                                    }}
                                >
                                    <View className="w-12 h-10 rounded-lg mr-4 content-center justify-center" style={{backgroundColor: "#" + busRoute.routeInfo.color}}>
                                        <Text 
                                            adjustsFontSizeToFit={true} 
                                            numberOfLines={1}
                                            className="text-center font-bold text-white p-1"
                                            style={{fontSize: 16}} // this must be used, nativewind is broken :(
                                        >
                                            {busRoute.shortName}
                                        </Text>
                                    </View>
                                    <View>
                                        <Text className="font-bold text-xl">{busRoute.name}</Text>
                                        <Text>
                                            {busRoute.endpointName}
                                        </Text>
                                    </View>
                                </TouchableOpacity>
                            )
                        }}                        
                    />
                    </View>
                )}
            </BottomSheetView>

[bwees]

If you would like a full project to test on take a look at the api-map branch on https://github.com/bwees/ReveilleRides/tree/api-map

[vaibhavverma9]

I am facing a similar bug. Did you end up resolving this error @bwees ?

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[bwees]

I am facing a similar bug. Did you end up resolving this error @bwees ?

Yeah I ended up using a BottomSheetFlatList instead of a BottomSheetView with a FlatList inside of it