CONTENT_HEIGHT but with percentage max?

[ftzi]

I want to always leave at least a 10~20% free on the top. I am using the useBottomSheetDynamicSnapPoints system.

Any way to do it?

[ftzi]

I was having many issues with the dynamicSnapPoints, like the scroll in the bottomSheet wasn't working and I couldn't have my free space on top.

This is how I done:

import type React from 'react';
import { useCallback, useMemo, useState } from 'react';
import type { LayoutChangeEvent } from 'react-native';
import { StyleSheet, useWindowDimensions, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import type { BottomSheetProps as BottomSheetPropOriginal } from '@gorhom/bottom-sheet';
import BottomSheetOriginal, {
  BottomSheetBackdrop, BottomSheetScrollView,
} from '@gorhom/bottom-sheet';
import { LinearGradient } from 'expo-linear-gradient';

// Based on https://github.com/gorhom/react-native-bottom-sheet/blob/master/example/src/screens/advanced/DynamicSnapPointExample.tsx
// to have a dynamic bottom sheet size, but it was just not working at all. Sometimes the scroll, sometimes the size...

type BottomSheetProps = Partial<Omit<BottomSheetPropOriginal, 'snapPoints' | 'onClose'>> & {visible: boolean; onClose: (p: false) => void};

export const BottomSheet: React.FC<BottomSheetProps> = ({ onClose, visible, children, ...p }) => {

  const { height: screenHeight } = useWindowDimensions();
  const [contentHeight, setContentHeight] = useState(0);
  // The lib complains when snapPoint is 0. we fallback to 1, but it isn't used at all.
  const snapPoints = useMemo(() => [contentHeight || 1], [contentHeight]);
  const { bottom: safeBottomArea } = useSafeAreaInsets();

  const contentContainerStyle = useMemo(() => [
    s.scrollContainer,
    { paddingBottom: safeBottomArea + s.scrollContainer.paddingBottom },
  ], [safeBottomArea]);

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

  const handleContentLayout = useCallback((e: LayoutChangeEvent) => {
    /** Not exported by the bottomSheet lib, but available here:
     * https://github.com/gorhom/react-native-bottom-sheet/blob/master/src/components/bottomSheetHandle/styles.ts */
    const handleHeight = 24; // padding=10 * 2 + height=4
    const maxProportionalHeight = 0.85; // 85%
    setContentHeight(Math.min(screenHeight * maxProportionalHeight, e.nativeEvent.layout.height + handleHeight));
  }, [screenHeight]);

  return (
    <BottomSheetOriginal
      index={(visible && contentHeight) ? 0 : -1}
      onClose={() => onClose(false)}
      backdropComponent={renderBackdrop}
      enablePanDownToClose
      animateOnMount
      snapPoints={snapPoints}
      {...p}
    >
      <BottomSheetScrollView indicatorStyle='white'>
        <View
          onLayout={(e) => handleContentLayout(e)}
          style={visible && contentContainerStyle} // To unset padding, so we get a 0 height on onLayout
        >
          {children}
        </View>
      </BottomSheetScrollView>
    </BottomSheetOriginal>
  );
};

const s = StyleSheet.create({
  scrollContainer: {
    paddingTop: 12,
    paddingBottom: 40,
    paddingHorizontal: 34,
  },
});

[ftzi]

But, for some reason if I have my keyboard open (tested only on Android), I can't scroll at first to the bottom of the content. I have to close the keyboard to do so.

[clintjansen]

Did you try <BottomSheetScrollView style={{ maxHeight: Dimensions.get('window').height * 0.85 }} />

[ftzi]

Maybe, can't remember. Possibly.

Not worth revisiting this for me as I have it working.