enablePanDownToClose={false} dont work with backdropComponent - BottomSheetModal

Question

I'm using React Native in my app and employing the '@gorhom/bottom-sheet' library to utilize the BottomSheetModal. I created a component for the BottomSheetModal and would like to have the ability to close the BottomSheetModal by tapping outside of it. I want to pass this as a parameter. I thought about using the 'enablePanDownToClose' property, but it doesn't work when I'm using 'backdropComponent'. When I remove the 'backdropComponent' property, 'enablePanDownToClose={false}' starts working. Here's my code:

import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProps, BottomSheetView,  } from "@gorhom/bottom-sheet";
import { globalStyles } from "../../../styles/global";
import React, { ReactNode, forwardRef, useCallback, useRef } from "react";

interface ModalBottomSheetProps extends BottomSheetModalProps{
    children: React.ReactNode
}

export type Ref = BottomSheetModal;

const ModalBottomSheet = forwardRef<Ref, ModalBottomSheetProps>(({
    style,
    enablePanDownToClose = false,
    children,
    ...props
}, ref) => {
    const renderBackDrop = useCallback((props: any) => {
        return (<BottomSheetBackdrop appearsOnIndex={0} disappearsOnIndex={-1} {...props}/>)
      }, []) 

    return (
        <BottomSheetModal
            ref={ref}
            enableDynamicSizing
            style={{shadowColor: '#000', elevation: 10}}
            enablePanDownToClose={false}
            enableOverDrag={false}
            handleIndicatorStyle={globalStyles.bottomSheetIndicator}
            backgroundStyle={globalStyles.bottomSheetBackground}
            backdropComponent={renderBackDrop}
            {...props}
        >
            <BottomSheetView style={[globalStyles.bottomSheetView]}>
                {children}
            </BottomSheetView>
        </BottomSheetModal>
      )
})

export default ModalBottomSheet 

How can I continue using BottomSheetBackdrop and at the same time be able to enable or disable the function of closing by clicking on the background?

Answer 1

I managed to solve this by changing the BottomSheetBackdrop props. I added the property disableableClosePressingBackDrop = false and set the property pressBehavior={disableableClosePressingBackDrop ? 'collapse' : 'close'} within BottomSheetBackdrop. In the end, it looked like this:

import { BottomSheetBackdrop, BottomSheetModal, BottomSheetModalProps, BottomSheetView,  } from "@gorhom/bottom-sheet";
import { globalStyles } from "../../../styles/global";
import React, { ReactNode, forwardRef, useCallback, useRef } from "react";

interface ModalBottomSheetProps extends BottomSheetModalProps{
    children: React.ReactNode,
    disableableClosePressingBackDrop?: boolean
}

export type Ref = BottomSheetModal;

const ModalBottomSheet = forwardRef<Ref, ModalBottomSheetProps>(({
    style,
    children,
    disableableClosePressingBackDrop = false,
    ...props
}, ref) => {
    console.log(disableableClosePressingBackDrop)
    const renderBackDrop = useCallback((props: any) => {
        return (<BottomSheetBackdrop appearsOnIndex={0}  disappearsOnIndex={-1} pressBehavior={disableableClosePressingBackDrop ? 'collapse' : 'close'} {...props}/>)
      }, [])

    return (
        <BottomSheetModal
            ref={ref}
            enableDynamicSizing
            style={{shadowColor: '#000', elevation: 10}}
            handleIndicatorStyle={globalStyles.bottomSheetIndicator}
            enablePanDownToClose={false}
            backgroundStyle={globalStyles.bottomSheetBackground}
            backdropComponent={renderBackDrop}
            {...props}
        >
            <BottomSheetView style={[globalStyles.bottomSheetView]}>
                {children}
            </BottomSheetView>
        </BottomSheetModal>
      )
})

export default ModalBottomSheet