[Feature Request]: Dynamic Sizing

[Praisecodes]

Could the team enable dynamic sizing for bottom sheets?
It'll be really nice if the bottom sheet could automatically adjust to the height of the content. We could have the option of snap points to show points to which the bottom sheet opens to.

[rthic23]

yes i have same request. dynamic height from children and snappoints

[TallNutAlt]

I also have this need

[iamvinny]

I came up with a little hack that works..

import React, { useRef, useEffect } from 'react';
import RBSheet from 'react-native-raw-bottom-sheet';
import { StyleSheet, SafeAreaView, View, Dimensions } from 'react-native';

export default function BottomSheet({ children, height = '92%', openDuration = 250 }: any) {
    const sheetRef = useRef(null) as any;

    // Convert percentage string to actual height if needed
    const getHeight = () => {
        if (typeof height === 'string' && height.includes('%')) {
            const percentage = parseInt(height) / 100;
            return Dimensions.get('window').height * percentage;
        }
        return height;
    };

    useEffect(() => {
        // Automatically open the bottom sheet when the component mounts
        sheetRef.current.open();
    }, []);

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <RBSheet ref={sheetRef} height={getHeight()} openDuration={openDuration}
                customStyles={{ container: styles.container }}>
                <View style={styles.sheetContent}>
                    {children}
                </View>
            </RBSheet>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        borderTopLeftRadius: 14,
        borderTopRightRadius: 14,
    },
    sheetContent: {
        padding: 24,
        alignItems: 'stretch',
    },
});