Option to Disable useRNModalOnAndroid on Actionsheet #5021
Description
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