ios: cannot dismiss Modal

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

When modal is dismissed the whole screen turns black. see video

React Native version:

System:
    OS: macOS 11.6
    CPU: (8) x64 Apple M1
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    npm: 7.6.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /opt/homebrew/bin/watchman
  IDEs:
    Android Studio: Not Found
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_302 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: ~0.66.0 => 0.66.0
    react-native-macos: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. use this code with react native 0.66 on iOS

RCTModalHostViewController is what’s blocking the screen

.

[Humad]

Another update – Here’s what I ended up doing:

<View style={{flex: 1}}>
    <Modal visible={isVisible}></Modal>
</View>

This seemed to work, though I’m not sure why wrapping it with a View with flex: 1 is needed 🤔

I also then noticed that if I have multiple modals on the same page, this issue is only fixed for the first one (likely because of the flex: 1). So I updated the code to be

{isFirstModalVisible && (
    <View style={{flex: 1}}>
        <Modal visible={isFirstModalVisible}></Modal>
    </View>
)}

{isSecondModalVisible && (
    <View style={{flex: 1}}>
        <Modal visible={isSecondModalVisible}></Modal>
    </View>
)}

That way the modals are only rendered when visible, and there’s only 1 modal on a page at a time.

This has solved my issue for now, but I wish I didn’t have to do all this. Really hoping this issue is looked into.

[littleski]

Hello, Version 2.2.3 of react-reanimated seems to fix the issue on our side. Regards