How to properly measure height of TrueSheet?

[dawid-bytys]

Hello, I made myself a reusable component where I control whether to render content inside TrueSheet or not. Main idea is to always render content again when TrueSheet opens to avoid resetting states inside content manually. Therefore there is a problem because I don't know how to measure TrueSheet height manually because as docs say height: 100% won't work because it doesn't handle React Native components well.

import React, {
    PropsWithChildren,
    RefObject,
    useCallback,
    useImperativeHandle,
    useRef,
    useState,
} from 'react';
import { TrueSheet, TrueSheetProps } from '@lodev09/react-native-true-sheet';
import { useAppTheme } from '~/providers/ThemeProvider';
import { View } from 'react-native';

export interface SheetRef {
    open: () => void;
    close: () => void;
}

interface SheetProps extends TrueSheetProps {
    ref: RefObject<SheetRef | null>;
}

export function Sheet(props: PropsWithChildren<SheetProps>) {
    const { children, ref, ...restProps } = props;

    const { theme } = useAppTheme();
    const [renderContent, setRenderContent] = useState(false);
    const [sheetDimensions, setSheetDimensions] = useState({
        width: 0,
        height: 0,
    });
    const sheetRef = useRef<TrueSheet>(null);

    const open = useCallback(() => {
        setRenderContent(true);
        sheetRef.current?.present();
    }, []);

    const close = useCallback(() => {
        sheetRef.current?.dismiss();
    }, []);

    const handleDismiss = () => {
        setRenderContent(false);
    };

    useImperativeHandle(ref, () => ({ open, close }));

    return (
        <TrueSheet
            ref={sheetRef}
            onDidDismiss={handleDismiss}
            backgroundColor={theme.colors.background}
            detents={['auto']}
            cornerRadius={25}
            onLayout={(e) => {
                console.log({
                    width: e.nativeEvent.layout.width,
                    height: e.nativeEvent.layout.height,
                });
                setSheetDimensions({
                    width: e.nativeEvent.layout.width,
                    height: e.nativeEvent.layout.height,
                });
            }}
            {...restProps}>
            {renderContent ? (
                <View
                    style={{
                        backgroundColor: 'black',
                        width: sheetDimensions.width,
                        height: sheetDimensions.height,
                    }}>
                    {children}
                </View>
            ) : null}
        </TrueSheet>
    );
}

It fires onLayout when the component lands in the DOM Tree but not when I call open() function. Is there any way to get exact sheet height?

[lodev09]

lazy loading is already enabled by default in truesheet. you don't have to do it yourself