Way to get content height or vertically centered

[HenrikZabel]

Feature Request

With the useBottomSheetDynamicSnapPoints hook I was able to receive the height of the bottom sheet content using animatedContentHeight. A way to receive the content height would be great.

#1054 also requested this feature over a year ago, but the issue was automatically closed.

Why it is needed

I am using the BottomSheet in a detached form for a custom alert. The alert must be centered vertically and I calculating all the insets using the animatedContentHeight because the alert does not always have the same height.

Possible implementation

🤷‍♂️

Code sample

There could be two ways:

1. Bring back the animtedContentHeight prop
2. Implement a method in order to center the detached BottomSheet directly e.g. prop detachedCenteredVertically

[ng-ha]

I want this feature too. Has anyone found the solution yet?

[kuzkokov]

@ng-ha here is what I do to achieve this:

const { height: windowHeight } = useWindowDimensions();
  const ref = useRef<BottomSheetModal>(null);

  const [bottomInset, setBottomInset] = useState(0);
  const handleContentLayout = useCallback(
    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
      setBottomInset((windowHeight - layout.height) / 2);
    },
    [windowHeight],
  );

return (
    <BottomSheetModal
      ref={ref}
      detached
      enableDynamicSizing
      bottomInset={bottomInset}
      enablePanDownToClose={false}
      enableContentPanningGesture={false}
    >
      <BottomSheetView
        onLayout={handleContentLayout}
        style={[styles.contentContainer, !buttons.length && styles['contentContainer--noButtons']]}
      >
       ...
      </BottomSheetView>
    </BottomSheetModal>

not the cleanest solution, but it does its' job

[theyanniss23002]

I also encountered a problem. any other ideas?

[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.