withReactModal with android not working

[VictorPulzz]

Describe the bug I use withReactModal for show modalize, but click on backdrop and hide not working on android. I don't want use portlize, because if I use modalize inside react modal modalize show behind the modal.

Code

import React, { forwardRef, PropsWithChildren, useImperativeHandle } from 'react';
import { Easing } from 'react-native';
import { Modalize, ModalizeProps, useModalize } from 'react-native-modalize';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { useTheme } from '~/view/plugins/Theme';

const DEFAULT_ANIMATION = {
  timing: { duration: 200, easing: Easing.ease },
  spring: { mass: 1, damping: 50 },
};

export interface BottomSheetRefProps {
  open: () => void;
  close: () => void;
}

export interface BottomSheetProps extends ModalizeProps {}

export const BottomSheet = forwardRef<BottomSheetRefProps, PropsWithChildren<BottomSheetProps>>(
  ({ children, ...props }, ref) => {
    const theme = useTheme();
    const { ref: modalizeRef, open, close } = useModalize();
    const { bottom } = useSafeAreaInsets();

    useImperativeHandle(ref, () => ({
      open,
      close,
    }));

    return (
      <Modalize
        ref={modalizeRef}
        scrollViewProps={{ scrollEnabled: false }}
        adjustToContentHeight
        handlePosition="inside"
        withHandle
        openAnimationConfig={DEFAULT_ANIMATION}
        withReactModal
        modalStyle={{
          borderTopLeftRadius: theme.rounded.l,
          borderTopRightRadius: theme.rounded.l,
        }}
        childrenStyle={{
          paddingBottom: bottom,
        }}
        handleStyle={{
          position: 'relative',
          width: 64,
          height: 5,
          backgroundColor: theme.colors.gray6,
          marginTop: theme.spacing.sm,
        }}
        {...props}
      >
        {children}
      </Modalize>
    );
  },
);

Dependencies:

• "react-native-modalize": "^2.1.1",
• "react-native": "0.70.6",
• "react-native-gesture-handler": "~2.7.1",

[VictorPulzz]

@jeremybarbet Can you check pls. This event not callable. Then I replace on TouchableWithoutFeedback, click working!

[frenic]

You need this patch react-native-modalize+2.1.1.patch due to this issue.

diff --git a/node_modules/react-native-modalize/lib/index.js b/node_modules/react-native-modalize/lib/index.js
index 5d5edac..d4c61c0 100644
--- a/node_modules/react-native-modalize/lib/index.js
+++ b/node_modules/react-native-modalize/lib/index.js
@@ -657,7 +657,7 @@ onOpen, onOpened, onClose, onClosed, onBackButtonPress, onPositionChange, onOver
     if (!avoidKeyboardLikeIOS && !adjustToContentHeight) {
         keyboardAvoidingViewProps.onLayout = handleModalizeContentLayout;
     }
-    const renderModalize = (React.createElement(react_native_1.View, { style: [styles_1.default.modalize, rootStyle], pointerEvents: alwaysOpen || !withOverlay ? 'box-none' : 'auto' },
+    const renderModalize = React.createElement(react_native_gesture_handler_1.GestureHandlerRootView, { style: react_native_1.StyleSheet.absoluteFill }, React.createElement(react_native_1.View, { style: [styles_1.default.modalize, rootStyle], pointerEvents: alwaysOpen || !withOverlay ? 'box-none' : 'auto' },
         React.createElement(react_native_gesture_handler_1.TapGestureHandler, { ref: tapGestureModalizeRef, maxDurationMs: tapGestureEnabled ? 100000 : 50, maxDeltaY: lastSnap, enabled: panGestureEnabled },
             React.createElement(react_native_1.View, { style: styles_1.default.modalize__wrapper, pointerEvents: "box-none" },
                 showContent && (React.createElement(AnimatedKeyboardAvoidingView, Object.assign({}, keyboardAvoidingViewProps),