RN Alert button sometimes renders in the upper-left corner of the screen (iOS)

Description

It appears that an RN Alert’s button occasionally appears in the top-left corner occasionally for some of our iOS users, and the only way to dismiss it is to force quit and re-open the app (or if the JS bundle reloads in debug mode). This Alert’s button does show up on top of any and all components that it covers up, but curiously all TouchableOpacity components that are covered up by this can still have touch events be triggered. For example, our back button in the screenshot example below works just fine, even though it’s covered up.

Version

0.66.2

Output of npx react-native info

System: OS: macOS 12.3.1 CPU: (10) arm64 Apple M1 Max Memory: 2.75 GB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 18.0.0 - /opt/homebrew/bin/node Yarn: 1.22.18 - /opt/homebrew/bin/yarn npm: 8.6.0 - /opt/homebrew/bin/npm Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: API Levels: 23, 30, 31 Build Tools: 30.0.2, 30.0.3, 31.0.0 System Images: android-31 | Google APIs ARM 64 v8a, android-32 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8193401 Xcode: 13.4/13F17a - /usr/bin/xcodebuild Languages: Java: 11.0.13 - /usr/bin/javac

Steps to reproduce

This happens quite randomly, with some users never experiencing it and other users seeing it all the time.

Snack, code example, screenshot, or link to a repository

[henrik-d]

I have the same issue. I’m displaying the Alert inside useEffect, when the component mounts. For me the bug only occurs in release builds and only when showing the Alert directly after starting the app.

[kupilikula]

Same, happens only on release build.