feat: added dynamic sizing

[gorhom]

Closes #658, closes #32, closes #1363

Motivation

This PR is a replacement for #1510 by @Eli-Nathan & #1402 by @ororsatti, where the implementation been shifted into the core library allowing the removal of the useBottomSheetDynamicSnapPoints hook.

Users will be able to enable dynamic sizing by only providing a boolean prop into the bottom sheet component enableDynamicSizing. And enable setting a limit for content height by providing a max value with maxDynamicContentSize.

Testing

• tested with Bottom Sheet View
• tested with Bottom Sheet Scrollables

yarn add ssh://git@github.com:gorhom/react-native-bottom-sheet#feat/dynamic-sizing

[Eli-Nathan]

This looks amazing! Nice work!
Does this remove the ability for users to set initial snap points and have CONTENT_HEIGHT as a specific snap point?

[Eli-Nathan]

Is there anything we can do with the type annotation to tell users that this is only not required when the enableDynamicSizing prop is true?

[gorhom]

mmm not sure how could we achieve that, but if customers did not provide snap points and dynamic sizing prop, it will throw an exception https://github.com/gorhom/react-native-bottom-sheet/pull/1513/files#diff-620b7ea703632ea948b10134aaea17e0efd09781b64f587ecab4395812f9a3ccR26

[Eli-Nathan]

Just in the JSDoc comment above I was thinking. Should show in most IDEs when you hover over the prop or while you're typing

[gorhom]

@Eli-Nathan i have added an extra description in the latest commit

[gorhom]

Does this remove the ability for users to set initial snap points and have CONTENT_HEIGHT as a specific snap point?

users could provide their own snap points, and when the layout is calculated, the logic will insert the content size in the snap points list and sort it accordingly

[ororsatti]

Tested, looks awesome !

[ororsatti]

When this is expected to be released?

[younes0]

@ororsatti this has been released 10 minutes ago
@gorhom thanks for the awesome work

[gorhom]

@Eli-Nathan @ororsatti @younes0 please have a look at the docs before using this prop
https://gorhom.github.io/react-native-bottom-sheet/props#enabledynamicsizing

Setting this prop to true, will result in adding a new snap point to the provided snap points and will be sorted accordingly, and this might effect the indexing, for example, if provided snap points are [100, 1000], and the content size is 500 then the final snap points will be [100, 500, 1000].

[Eli-Nathan]

@gorhom thanks for the quick turn around here!
Can I confirm that it's possible to use enabaleDynamicSizing without passing snapPoints?
Just tested it and it throws an error

Scratch that, had to dump my node_modules and reinstall

[rodolphoasb]

It's working perfectly here! Great work on this!

A reminder if you are having trouble with the dynamic sizing, don't use SafeAreaView as the child of BottomSheetModal, the size gets miscalculated sometimes, causing your sheet to not fully open and sometimes it opens and close instantly.

Don't use this:

<BottomSheetModal>
  <BottomSheetView>
    <SafeAreaView>
    </SafeAreaView>
  </BottomSheetView>
</BottomSheetModal>

Use something like this:

<BottomSheetModal>
  <BottomSheetView>
    <View>
    </View>
  </BottomSheetView>
</BottomSheetModal>

[gabrieldonadel]

enableDynamicSizing does not work for me, my BottomSheet is stuck at 0px height

[sylvain-abadie]

@gabrieldonadel Can you try passing a sharedValue for the contentHeight prop?

const animatedContentHeight = useSharedValue(0);

return ( 
  <BottomSheet
        enableDynamicSizing
        contentHeight={animatedContentHeight} >
        ...
  </BottomSheer>
);

[todorone]

@gabrieldonadel Can you try passing a sharedValue for the contentHeight prop?

const animatedContentHeight = useSharedValue(0);

return ( 
  <BottomSheet
        enableDynamicSizing
        contentHeight={animatedContentHeight} >
        ...
  </BottomSheer>
);

It works with animatedContentHeight, thanks for the workaround. Can it be fixed though to work properly? @gorhom

[younes0]

@rodolphoasb how do you handle safe area in your case ?

[todorone]

@rodolphoasb how do you handle safe area in your case ?

https://github.com/th3rdwave/react-native-safe-area-context#usesafeareainsets

[younes0]

@todorone thanks for the documentation which I'm already aware of but this is not helpful.
never mind, I will play with this and provide a full example unless someone does.

[fendermany]

const GorhomBottomModal = React.forwardRef<BottomSheet, GorhomBottomModalProps>((props, ref) => {
  const insets = useSafeAreaInsets();

  const renderBackdrop = useCallback(
    (props: any) => <BottomSheetBackdrop disappearsOnIndex={-1} appearsOnIndex={0} {...props} />,
    [],
  );

  return (
    <BottomSheet
      enablePanDownToClose
      ref={ref}
      // detached={true}

      index={-1}
      handleComponent={CustomHandle}
      backdropComponent={renderBackdrop}
      enableDynamicSizing={true}
      backgroundStyle={styles.backgroundStyle}>
      <BottomSheetScrollView>
        <View style={[styles.container, { paddingBottom: insets.bottom + 10 }, props.style]}>{props.children}</View>
      </BottomSheetScrollView>
    </BottomSheet>
  );
});

working example

[karlkristopher]

@fendermany I believe this example is only working when including <BottomSheetScrollView>.

const GorhomBottomModal = React.forwardRef<BottomSheet, GorhomBottomModalProps>((props, ref) => {
  const insets = useSafeAreaInsets();

  const renderBackdrop = useCallback(
    (props: any) => <BottomSheetBackdrop disappearsOnIndex={-1} appearsOnIndex={0} {...props} />,
    [],
  );

  return (
    <BottomSheet
      enablePanDownToClose
      ref={ref}
      // detached={true}

      index={-1}
      handleComponent={CustomHandle}
      backdropComponent={renderBackdrop}
      enableDynamicSizing={true}
      backgroundStyle={styles.backgroundStyle}>
      <BottomSheetScrollView>
        <View style={[styles.container, { paddingBottom: insets.bottom + 10 }, props.style]}>{props.children}</View>
      </BottomSheetScrollView>
    </BottomSheet>
  );
});

working example

[badalsaibo]

Any example with both a fixed view and a scrollable content inside?

<BottomSheetModal>
  <View>
    <Text>Some fixed view</Text>
    <BottomSheetScrollView>
        {/* some scrollable list */}
    </BottomSheetScrollView>
  </View>
</BottomSheetModal>

With enableDynamicSizing and maxDynamicSnapPoint the modal does get adjusted, but the calculation is a bit off. (See video)

Record_2023-11-03-14-16-19.mp4

In the video you can see as I switch the tabs, the content is still scrollable even when the height for the new content is well below the maxDynamicContentSize.

<BottomSheetModal
      ref={bottomSheetModalRef}
      enableDynamicSizing
      maxDynamicContentSize={700}
      handleIndicatorStyle={{ display: 'none' }}
      backdropComponent={CustomBackdrop}
      enableContentPanningGesture={false}>
      <View style={{ flex: 1 }}>
        <BottomSheetView>
        </BottomSheetView>
        <BottomSheetScrollView>
          {/* some scrollable list */}
        </BottomSheetScrollView>
      </View>
</BottomSheetModal>

However using useBottomSheetDynamicSnapPoints and useBottomSheetMaxHeight as proposed by @Eli-Nathan here works fine (see video)

Record_2023-11-03-15-04-26.mp4

As you can see here the new content is being rendered fully without being scrolled.

const initialSnapPoints = useMemo(() => ['CONTENT_HEIGHT'], []);
  const {
    animatedHandleHeight,
    animatedSnapPoints,
    animatedContentHeight,
    handleContentLayout,
  } = useBottomSheetDynamicSnapPoints(initialSnapPoints);

  const useBottomSheetMaxHeight = (maxHeight = '85%'): number => {
    const { height: deviceHeight } = useWindowDimensions();
    const maxHeightDecimal = parseFloat(`${maxHeight}`) / 100.0;
    const { top: topSafeAreaInset } = useSafeAreaInsets();
    return (deviceHeight - topSafeAreaInset) * maxHeightDecimal;
  };

  const maxHeightStyle = useBottomSheetMaxHeight('60%');

...
...
<BottomSheetModal
      ref={bottomSheetModalRef}
      snapPoints={animatedSnapPoints as any}
      handleHeight={animatedHandleHeight}
      contentHeight={animatedContentHeight}
      handleIndicatorStyle={{ display: 'none' }}
      backdropComponent={CustomBackdrop}
      enableContentPanningGesture={false}>
      <View style={{ flex: 1 }} onLayout={handleContentLayout}>
        <BottomSheetView>
        </BottomSheetView>
        <BottomSheetScrollView
        </BottomSheetScrollView>
      </View>
    </BottomSheetModal>

[Eli-Nathan]

@badalsaibo yeah I'm still having to use my max height solution alongside this too although I'm able to use it with the new enableDynamicSizing prop:

const MyBottomSheetModal: FunctionComponent<BottomSheetModalProps> = ({ bottomSheetModalRef, maxHeight }) => {
    const calculatedMaxHeight = useBottomSheetMaxHeight(maxHeight)

    return (
        <BottomSheetModal
            ref={bottomSheetModalRef}
            enableDynamicSizing
            maxDynamicContentSize={calculatedMaxHeight}
            // ... more props
        >
          <BottomSheetScrollView style={{ maxHeight: calculatedMaxHeight }}>{children}</BottomSheetScrollView>
        </BottomSheetModal>
...

useBottomSheetMaHeight hook:

/*
    Designed to take the specified max height (or default 85%)
    and take away top safe area inset
*/
import { useWindowDimensions } from "react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import type { UseBottomSheetMaxHeight } from "./types"

type MaxHeight = `${string}%` | number

const getPercentageMaxHeight = (
    maxHeight: `${string}%`,
    safeMaxheightValue: number
) => {
    return safeMaxheightValue * (parseFloat(maxHeight) / 100)
}

const getNumberMaxHeight = (maxHeight: number, safeMaxheightValue: number) => {
    if (maxHeight > safeMaxheightValue) {
        return safeMaxheightValue
    }
    return maxHeight
}

export const useBottomSheetMaxHeight: UseBottomSheetMaxHeight = (
    maxHeight?: MaxHeight
) => {
    const { height: deviceHeight } = useWindowDimensions()
    const { top: topSafeAreaInset } = useSafeAreaInsets()
    if (!maxHeight) {
        return undefined
    }
    const safeDeviceHeight = deviceHeight - topSafeAreaInset
    const maxHeightIsPercentage = typeof maxHeight === "string"
    const maxHeightNumber = maxHeightIsPercentage
        ? getPercentageMaxHeight(maxHeight as `${string}%`, safeDeviceHeight)
        : getNumberMaxHeight(maxHeight as number, safeDeviceHeight)

    return maxHeightNumber
}

This allows you to pass a specific number as he max height, or a percentage
And safe areas are taken into account 😄

Note that I'm using the react-native-safe-area-context lib as a helper here.

Hope that helps

[badalsaibo]

I don't know man. For some reason it behaves the way as in the first video even with the new enableDynamicSizing prop and your hook 😅

I have no idea what's going on but I'll be saving a copy of useBottomSheetDynamicSnapPoints hook for now incase it gets deprecated tomorrow!

[felipebrahm]

Doesn't this mean that I can't have additional content inside my bottom sheet if I'm using a scrollable component? The height of the sheet will be set to the height of the scrollable component instead of using the height of all the content in the sheet..

[spsaucier]

When will this be added to v5? I have migrated to a high v4 but would like to use enableDynamicSizing in v5 as well.

[audn]

I'm not able to get this working with React Navigation Integration, is there any limits to enableDynamicSizing?

[karlkristopher]

I'm not able to get this working with React Navigation Integration, is there any limits to enableDynamicSizing?

@audn my experience was that when using a nested navigator, a fixed height for the sheet was necessary.