ImagePicker.launchCameraAsync displays the Camera under Modal on iOS 14.5

Summary

Problem: The Camera is displayed under Modal after upgrading to iOS 14.5

Expected behavior: Display Camera over Modal

Source Code

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, StyleSheet, Text, View, Modal } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Modal
        visible={true}
        animationType="slide"
        hardwareAccelerated={true}
        transparent={true}
      >
        <View style={styles.modal}>
          <View style={{ width: 200, height: 200, backgroundColor: "#fff" }}>
            <Button title="Camera" onPress={async () => {
              const { status: cameraStatus } = await ImagePicker.requestCameraPermissionsAsync()
                .catch(err => console.log(`camera_permission_err: ${err}`));
              const { status: cameraRollStatus } = await ImagePicker.requestMediaLibraryPermissionsAsync()
                .catch(err => console.log(`camera_roll_permission_err: ${err}`));
              if (cameraStatus !== 'granted' || cameraRollStatus !== 'granted') {
                Alert.alert(
                  'Permission not granted',
                  'Please allow this app to access camera and photo library in your phone\'s setting.',
                  [
                    {
                      text: 'OK',
                      onPress: async () => {
                        if (cameraStatus !== 'granted') {
                          await ImagePicker.requestCameraPermissionsAsync();
                        }
                        if (cameraRollStatus !== 'granted') {
                          await ImagePicker.requestMediaLibraryPermissionsAsync();
                        }
                      },
                    },
                  ],
                  { cancelable: true },
                );
                return;
              }
              const capturedImage = await ImagePicker.launchCameraAsync({
                allowsEditing: false,
                aspect: [4, 3],
                base64: true,
              }).catch(err => {
                console.log(err)
              });
              console.log(capturedImage)
            }} />
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modal: {
    flex: 1,
    backgroundColor: '#fff0',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

iOS

SDK Version (managed workflow only)

41

Environment

Expo CLI 4.4.3 environment info: System: OS: Windows 10 10.0.18363 Binaries: Node: 10.16.3 - C:\Program Files\nodejs\node.EXE Yarn: 1.19.1 - C:\Users\xidanzheng\AppData\Roaming\npm\yarn.CMD npm: 6.14.8 - C:\Users\xidanzheng\AppData\Roaming\npm\npm.CMD npmPackages: expo: ~41.0.1 => 41.0.1 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 react-native-web: ~0.13.12 => 0.13.18 Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

Demo https://snack.expo.io/@macroview.dbs/test

https://user-images.githubusercontent.com/34149063/116500022-36c5b780-a8e0-11eb-9ae6-09d49225e75a.mp4

[cruzach]

Currently looking into a fix, at first glance this seems due to the modalPresentationStyle we are setting.

[giekus]

This issue is now a problem on IOS 14.5 official version, this is causing a lot of issues. 😦