Option to Disable useRNModalOnAndroid on Actionsheet

[markfuechec]

Description

I'm building an actionsheet with native-base that is never closed. It sits on a screen with a map and a few buttons to interact with the map and is either in a barely-visible position or full size, toggled by user gestures. Unfortunately, this makes interacting with the map and buttons impossible on Android, unless I go into the native-base files and set useRNModalOnAndroid to false in the Modal component.

It would be cool if the actionsheet component had a property to set useRNModalOnAndroid to false.

Problem Statement

Actionsheets use RN modals on Android. This causes the background to be non-interactive. I'd like the option to set that property to false.

Proposed Solution or API

const Actionsheet = (
{ children, hideDragIndicator = false, ...props }: IActionsheetProps,
ref: any
) => {
const {
isOpen,
disableOverlay,
onClose,
useRNModalOnAndroid, // Add this as a prop
...resolvedProps
} = usePropsResolution('Actionsheet', props);

//TODO: refactor for responsive prop
if (useHasResponsiveProps(props)) {
return null;
}
return (
<Modal
isOpen={isOpen}
onClose={onClose}
{...resolvedProps}
overlayVisible={disableOverlay ? false : true}
closeOnOverlayClick={disableOverlay ? false : true}
ref={ref}
useRNModalOnAndroid={useRNModalOnAndroid} // Pass it down to the Modal component
>
<ActionSheetContext.Provider value={{ hideDragIndicator }}>
{children}
</ActionSheetContext.Provider>

);
};

const Modal = (
{
children,
isOpen,
onClose,
defaultIsOpen,
initialFocusRef,
finalFocusRef,
avoidKeyboard,
closeOnOverlayClick = true,
isKeyboardDismissable = true,
overlayVisible = true,
backdropVisible = true,
animationPreset,
useRNModalOnAndroid, // Add this as a prop
...rest
}: any,
ref: any
) => {

return (
<Overlay
isOpen={visible}
onRequestClose={handleClose}
isKeyboardDismissable={isKeyboardDismissable}
animationPreset={animationPreset}
useRNModalOnAndroid={useRNModalOnAndroid} // Add this as a prop to the Overlay component
>
<ModalContext.Provider value={contextValue}>
<Fade in={visible} style={StyleSheet.absoluteFill} {..._backdropFade}>
{overlayVisible && backdropVisible && (
<Backdrop
onPress={() => {
closeOnOverlayClick && handleClose();
}}
{..._backdrop}
/>
)}

{animationPreset === 'slide' ? (
<Slide in={visible} {..._slide}>
<FocusScope
contain={visible}
autoFocus={visible && !initialFocusRef}
restoreFocus={visible && !finalFocusRef}
>
{child}


) : (
<Fade in={visible} style={StyleSheet.absoluteFill} {..._fade}>
<FocusScope
contain={visible}
autoFocus={visible && !initialFocusRef}
restoreFocus={visible && !finalFocusRef}
>
{child}


)}
</ModalContext.Provider>

);
};

Alternatives

This seems like the simplest solution.

Additional Information

No response

[Krithikj20]

@markfuechec Thank you for your valuable feedback. We will pass it to the concerned team so that they check the possibilities of adding the same in future updates. Thank you.

[devYonz]

This is still not resolved with useRnModal API