React-native: Regression with Alert, AlertIOS, ActionSheetIOS on React Native 0.54.2

[wcandillon]

Hello team 🙋🏼‍♂️

I just upgraded to RN 16.3 and launching an alert of an action sheet from a modal makes it appear below the modal the first time and above the modal if an alert is already below the modal.
You can see the behaviour in this video: https://www.dropbox.com/s/i17nlr5psnxqu6h/modal-bug.mp4?dl=0

Thank you for your great work ❤️

• [x] I have reviewed the documentation
• [x] I have searched existing issues
• [x] I am using the latest React Native version

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.6.0
Yarn: 1.1.0
npm: 5.3.0
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz => 0.54.2

Steps to Reproduce

Launch an alert on iOS from a modal

Expected Behavior

The alert is shown on top of the modal

Actual Behavior

The alert is shown below the modal as seen here

[react-native-bot]

Thanks for posting this! It looks like your issue may be incomplete. Are all the fields required by the Issue Template filled out?

If you believe your issue contains all the relevant information, let us know in order to have a maintainer remove the No Template label. Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[LouisJS]

Hey @wcandillon. I've just noticed the same problem in my app ! ⚠️

[rafaelmotta]

We are facing this issue aswell

[trevorkirpaul]

If you're all using expo, I found this ticket on their forums.

The expo team is helping there so hopefully it might help some of you.

[LouisJS]

This is more of an issue related with the Modal itself.
Because it does the same for WebBrowser and ImagePicker

[trevorkirpaul]

I posted a ticket on Expo's github.

Seems like it's not a React Native issue based on the fact that I didn't have the issue on an older Expo app version, using the same code/project and same expo SDK (25). The example I posted uses SDK 26.

Hopefully, it gets some attention, I linked a small app that showcases the issue as well as a GIF of the issue.

[trevorkirpaul]

A workaround can be found here.

This solution was provided by @brentvatne from the Expo team, found in this ticket

Here's what he said in his post:

Hi people!

You can use the Expo Modal API instead of the React Native one, like this: https://snack.expo.io/ByEqo7Bif

I’ll work on getting some documentation up shortly. The main differences between the react-native Modal API and this are:

you need to use ModalHost at the root of your app, like a Provider. you should also ideally put it inside of any Providers so it has the same context available
only the context that is available to the ModalHost is available to Modal

[rafaelmotta]

Use another expo package? Really? I’m getting afraid of this.

[brentvatne]

@rafaelmotta - you're welcome to use whatever solution you want, we just have one in the SDK for your convenience.

anyhow, closing this issue as it is related to Expo and not react-native itself, as far as I know

[wcandillon]

Thank you @brentvatne 🙌🏻