[v3] Set height of BottomSheet to children height

[mralj]

Hello,

I'm having trouble opening BottomSheet so its height is the same as the height of its children.
Not sure am I missing something stupidly obvious or this isn't possible in V3.

I have tried something simillarto this issue, the app crashes if I don't add the key, here is rough example:

export const MadBottomSheet = forwardRef<MadBottomSheetRefProps, MadBottomSheetProps>(({ children }, ref) => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  const [contentHeight, setContentHeight] = React.useState(-1);
  const snapPoints = React.useMemo(() => [contentHeight], [contentHeight]);

  const handleOnLayout = React.useCallback(({ nativeEvent }: LayoutChangeEvent) => {
    const { height } = nativeEvent.layout;
    setContentHeight(height);
  }, []);

  const openBottomSheet = () => {
    bottomSheetModalRef.current?.present();
  };

  const closeBottomSheet = () => {
    bottomSheetModalRef.current?.dismiss();
  };

  useImperativeHandle(ref, () => ({
    openBottomSheet,
    closeBottomSheet
  }));

  return (
    <BottomSheetModalProvider key={`Provider${contentHeight}`}>
      <BottomSheetModal
        waitFor
        simultaneousHandlers
        ref={bottomSheetModalRef}
        snapPoints={snapPoints}
        key={`Modal${contentHeight}`}
      >
        <BottomSheetView onLayout={handleOnLayout} key={`View${contentHeight}`}>
          {children}
        </BottomSheetView>
      </BottomSheetModal>
    </BottomSheetModalProvider>
  );
});

With the key prop it "almost" works, I have to tap twice on the button to open the modal.
The first time it just flashes and disappears, but after that everything is 👍
Ofc. this is not acceptable, but this is the furthest I got 😩

For V2 there was this issue, but as far as I can see, the prop shouldMeasureContentHeight doesn't exist in V3.

Could someone please help me out :), it would be very much appreciated 🙂?

P.S.
I know I could add useEffect to simulate/force the second click, but I am looking for less hacky solutions 🙂

[github-actions]

@mralj: hello! 👋

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