Modal doesn't disappear using ImagePicker

[phlima3]

Describe the bug When inserting an ImagePicker feature inside a magic-modal. Only on iOS does the magic-modal not disappear and I'm prevented from choosing the image

To Reproduce

const handleOpenModalAddTask = async () => {
    await magicModal.show(() => <ModalAddTask />, {
      swipeDirection: undefined,
      style: {
        height: 400,
      },
    });
  };

  const ModalAddTask = (props: ModalAddTaskProps) => {

   const handleOpenGallery = () => {
    ImagePicker.requestMediaLibraryPermissionsAsync().then((permission) => {
      if (permission.status === "granted") {
        ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.Images,
          cameraType: ImagePicker.CameraType.back,
          allowsEditing: true,
          aspect: [4, 3],
          quality: 1,
        }).then((result) => {
          console.log(result);
        });
      }
    });
  };

   return (
   <View>
     <Button
        onPress={handleOpenGallery}>
           Open 
     </Button>
    </View> 

Expected behavior That the modal disappears and I can choose my image

Screenshots

[GSTJ]

Hey!

That's due to the use of FullWindowOverlay on IOS in this library. We do this to make magic modals appear even on top of react-navigation native models. This is just an unwanted side-effect.

I'll work on escape hatches and solutions to support your use case. For now, you can split the modal or use this patch to remove FullWindowOverlay usage on IOS. Be careful, as modals won't appear on top of other react-navigation modal screens anymore after this.

diff --git a/node_modules/react-native-magic-modal/dist/index.cjs b/node_modules/react-native-magic-modal/dist/index.cjs
index eee7dbe..119b64a 100644
--- a/node_modules/react-native-magic-modal/dist/index.cjs
+++ b/node_modules/react-native-magic-modal/dist/index.cjs
@@ -90,7 +90,7 @@ const hideAll = ()=>{
    */ hideAll
 };

-/** Don't use .ios file extension as bunchee can't bundle it properly */ const FullWindowOverlay = reactNative.Platform.OS === "ios" ? require("react-native-screens").FullWindowOverlay : React.Fragment;
+/** Don't use .ios file extension as bunchee can't bundle it properly */ const FullWindowOverlay = React.Fragment;

 const styles = reactNative.StyleSheet.create({
     overlay: {