Scrolling issue in 'react-native-simple-bottom-sheet'

Question

I was using the library 'react-native-simple-bottom-sheet'. Below is the code for your reference. Code:

    return (
        <View style={bottomSheetStyle.container}>
            <BottomSheet ref={bottomSheetRef} sliderMaxHeight={400} sliderMinHeight={0}>
                <View style={bottomSheetStyle.bottomSheet}>
                    <TouchableOpacity onPress={() => closeBottomSheet()} style={bottomSheetStyle.closeIcon}>
                        <CloseIcon width={14.65} height={14.65} />
                    </TouchableOpacity>
                    <View style={bottomSheetStyle.header}>
                        <Text style={bottomSheetStyle.title}>Truminds</Text>
                        <Text style={[bottomSheetStyle.create, { color: expandedItem !== null ? '#0F8D48' : '#4D4D4D' }]}>
                            + Create Subspace
                        </Text>
                    </View>
                    <View style={bottomSheetStyle.separator} />
                    <FlatList
                        style={bottomSheetStyle.list}
                        data={data}
                        renderItem={renderItem}
                        keyExtractor={(item) => item.label}
                    />
                </View>
            </BottomSheet>
        </View>
    );
};

const bottomSheetStyle = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 0,
        paddingTop: 28,
        paddingBottom: 12,
    },
    itemContainer: {
        backgroundColor: '#F2F2F2',
        padding: 10,
        borderRadius: 10,
        marginBottom: 17,
    },
    title: {
        fontSize: 24,
        fontWeight: '800',
        color: '#4D4D4D',
        //fontFamily: fontFamily.theme.EXTRA_BOLD
    },
    create: {
        fontSize: 12,
        fontWeight: '600',
    },
    bottomSheet: {
        backgroundColor: 'white',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        paddingHorizontal: 5,
        paddingBottom: 10,
        marginTop: -20,
    },
    separator: {
        height: 1,
        backgroundColor: '#ddd',
        marginVertical: 10,
    },
    list: {
        marginTop: 10,
    },
    listItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingVertical: 10,
    },
    labelContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingBottom: 3,
        paddingTop: 3,
    },
    label: {
        fontSize: 16,
        fontWeight: '600',
        color: '#4D4D4D',
    },
    arrowIcon: {
        marginLeft: 10,
        color: '#000000',
    },
    closeIcon: {
        flex: 1,
        alignItems: 'flex-end',
    },
    rowContainer: {
        paddingHorizontal: 4,
        paddingVertical: 10,
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    rowLabel: {
        fontSize: 12,
        fontWeight: '500',
        color: '#4D4D4D',
    },
    rowArrowIcon: {
        marginLeft: 10,
        color: '#000000',
    },
});

export default SpaceBottomSheet;

I have created a list of 6 items using flatlists and when I am trying to scroll through it, the screen behind the bottom sheet is getting scrolled instead. How can I disable this?

Basically what I am trying to do is make these list items scrollable so that i can scroll through these items as the list gets bigger. The issue i'm having is the background screen of this bottom sheet getting scrolled instead.

Answer 1

Try to wrap main content of BottomSheet in a ScrollView and move bottomSheetStyle.bottomSheet to ScrollView.

Please see below code:

  return (
    <View style={bottomSheetStyle.container}>
        <BottomSheet ref={bottomSheetRef} sliderMaxHeight={400} sliderMinHeight={0}>
            <ScrollView
                style={bottomSheetStyle.bottomSheet}
                contentContainerStyle={{
                    borderTopLeftRadius: 20,
                    borderTopRightRadius: 20,
                    paddingHorizontal: 5,
                    paddingBottom: 10,
                }}>
                <TouchableOpacity onPress={() => closeBottomSheet()} style={bottomSheetStyle.closeIcon}>
                    <CloseIcon width={14.65} height={14.65} />
                </TouchableOpacity>
                <View style={bottomSheetStyle.header}>
                    <Text style={bottomSheetStyle.title}>Truminds</Text>
                    <Text style={[bottomSheetStyle.create, { color: expandedItem !== null ? '#0F8D48' : '#4D4D4D' }]}>
                        + Create Subspace
                    </Text>
                </View>
                <View style={bottomSheetStyle.separator} />
                <FlatList
                    style={bottomSheetStyle.list}
                    data={data}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.label}
                />
            </ScrollView>
        </BottomSheet>
    </View>
);