React-native: Modal won't open on iOS when __DEV__ is true/Debugger is turned on

[JodiWarren]

Description

After updating to 0.42, none of our click-triggered Modals are opening when Remote JS Debugging is set to true. This seems to be related to https://github.com/facebook/react-native/blob/master/Libraries/Modal/Modal.js#L159. If we override it to innerChildren = this.props.children, it works perfectly.

Sadly there are no errors in the DevTools, even with Pause on Caught Exception on. It just fails silently.

A quick gif illustration of the problem follows:

Reproduction

I've created a new project with react-native init, and just added in the Modal example from the docs: https://github.com/JodiWarren/BrokenModal

If you clone that down, run react-native run-ios and then turn on Remote JS Debugging, you should find that the modal no longer works when activated.

Solution

I don't fully understand what <AppContainer> is doing in this situation, so I don't feel confident in proposing a fix. I'm open to suggestions though, and will happily submit a PR if I find anything robust.

Additional Information

• React Native version: 0.42.0
• Platform: iOS - on device and in simulator. Android is not affected.
• Operating System: Tested on OSX 10.11 and macOS 10.12

[sibelius]

I can confirm this

[ajwhite]

Duplicate of #12515

[zoontek]

Just met the error today, it brokes our dev app. I hope a fix will be published soon (as version 0.42.1) 😞

[JustinDFuller]

For anyone looking into it here is what Jodi was referencing about AppContainer: https://github.com/facebook/react-native/blob/master/Libraries/Modal/Modal.js#L159-L162

[JustinDFuller]

I've narrowed it down further to this line in YellowBox: https://github.com/facebook/react-native/blob/master/Libraries/ReactNative/YellowBox.js#L377

When you remove styles.list it begins showing the correct yellowbox at the bottom (for me at least, it didn't show a yellowbox until it was removed).

I'm still debugging to see what this is supposed to be.

List styles are:

list: {
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    elevation: Number.MAX_VALUE
  },

So I'm guessing this somehow is blocking the modal.

[JustinDFuller]

Ok this is actually fixed but I don't think has been put in a release yet? that elevation: Number.MAX_VALUE was causing the issue and is fixed in the following PR:

https://github.com/facebook/react-native/pull/12744

[JodiWarren]

@JustinDFuller Sorry, I should've updated with that information. But yeah, I've been using that fix since the PR was first posted about a week ago. It definitely works for me.

[JustinDFuller]

@JodiWarren Cool you might want to close this issue then