How to replicate the native Modal functionality

[shessafridi]

I want to close the bottom sheet when the user presses the back button on Android and also when User taps outside on the backdrop, also what is the best practice for binding the bottom sheet to a boolean state variable as the bottom sheet lacks a visible prop like the native modal

[shessafridi]

UPDATE, I ended up doing something like this

import { ComponentProps, useEffect, useRef } from 'react';
import { BackHandler } from 'react-native';

import { BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import colors from '@src/config/colors';
import { useIsDarkMode } from '@src/hooks/theme/useIsDarkMode';
import { StyledPressable } from '@src/utils/styled-components';

type Props = {
  visible: boolean;
  onRequestClose?: () => void;
} & ComponentProps<typeof BottomSheetModal>;

const BottomSheet = ({ visible, onRequestClose, ...props }: Props) => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
  const isDarkMode = useIsDarkMode();

  useEffect(() => {
    if (visible) bottomSheetModalRef.current?.present();
    if (!visible) bottomSheetModalRef.current?.close();
  }, [visible]);

  useEffect(() => {
    const handleBack = () => {
      if (visible) {
        onRequestClose?.();
        return true;
      }
      return null;
    };
    BackHandler.addEventListener('hardwareBackPress', handleBack);

    return () =>
      BackHandler.removeEventListener('hardwareBackPress', handleBack);
  }, [visible]);

  return (
    <BottomSheetModalProvider>
      <BottomSheetModal
        backdropComponent={() => (
          <StyledPressable
            onPress={() => onRequestClose?.()}
            className='flex-1'
          />
        )}
        backgroundStyle={{
          backgroundColor: isDarkMode ? colors.primary[950] : '#fff',
        }}
        handleIndicatorStyle={{
          backgroundColor: isDarkMode ? '#fff' : colors.primary[950],
        }}
        enableDismissOnClose
        enablePanDownToClose
        ref={bottomSheetModalRef}
        index={1}
        onDismiss={() => onRequestClose?.()}
        {...props}
      >
        {props.children}
      </BottomSheetModal>
    </BottomSheetModalProvider>
  );
};

export default BottomSheet;

Now the experience is like this

     <BottomSheet
        snapPoints={snapPoints}
        visible={showBottomSheet}
        onRequestClose={() => setShowBottomSheet(false)}
      >
        <StyledView className='flex-1 p-6'>
          <StyledText>Awesome 🎉</StyledText>
        </StyledView>
      </BottomSheet>