react-native: Freeze & Crash when remote debug enabled RN@0.42.0-rc.1

Oooookay guys, so I have it figured out… sort of.

The elevation changes I introduced to YellowBox cause iOS apps to hang when remote debugging is enabled and a warning is logged.

So my changes do not effect the Modal component directly, it’s just that Modal is logging the warning "Calling of '[-RCTUIManager setFrame:forView]' which is deprecated" which in turn brings out the bug introduced by my YellowBox changes in iOS.

So the actual bug we’re observing is what @alphasp posted.

In summary: Android + no remote debugging = OK Android + remote debugging = OK iOS + no remote debugging = OK iOS + remote debugging = HANGS

Interestingly, if I change elevation: Number.MAX_VALUE to Number.MAX_SAFE_INTEGER the bug dissappears. So maybe there’s some sort of overflow occurring on iOS, I’m not sure.

I don’t really have the time to get to the actual root of the issue, so I just propose any of these changes:

elevation: Platform.OS === 'android' ? Number.MAX_SAFE_INTEGER : undefined // since elevation IS only an android property

or 2)

elevation: Number.MAX_SAFE_INTEGER

or 3)

elevation: 1000 // pick a value, any value

Preferences? Or does someone want to get to the ACTUAL root of the issue?

I think this issue is also related to #12368 and appears when using Modal on IOS, in a specific context, in debug mode.

I do not use redux, my app actually uses NavigationExperimental (the root component of the display is a NavigationCardStack) and when I display a Modal on IOS in Debug Mode, the render() function freezes and the modal is never displayed. On Android, the very same code works fine in both Normal and Debug Mode.

This freeze happens in 0.42.0-rc3, but NOT in 0.41.2.

I couldn’t create a minimal app that reproduces the bug, as just adding a modal to the default app created after an init’ does not trigger the issue. There is something more, but not sure what makes the issue appear.

@shergin Sorry for the wrong ping! You’re absolutely right.

i did a git bisect of the whole release and the offending commit is https://github.com/facebook/react-native/commit/407973ab27212616cdfac4509875beb6d20c1222 @cailenmusselman Could you look into it? To resolve this i deleted the elevation part locally and it works perfectly again. Is there some polyfill missing in chrome debugger to support elevation props?

Funny thing is I noticed a similar bad behavior on android - i’m still looking into it where it could come from. It’s not related to a modal but seems to be related to touchables on top of a native view - but it also only happens while debugging.

I had this issue today, tried all solutions but nothing worked. In the end i just rm -rf ios/build which seemed to have done the trick.

Nope, fresh install RN 0.47.2 still has the problem. I tested only on Android.

edit

I has testing on AVD with API 23, with Remote JS Debugging enabled app crash when reload is called.

In logcat

E/Surface: getSlotFromBufferLocked: unknown buffer: 0xf40bd5c0
...
Fatal signal 11 (SIGSEGV), code 1, fault addr 0xea0c6000 in tid 3664

On AVD with API 26, works nicely 😄

PS: When will the v.42.1 be released?

Will try and find the time to investigate today

I upgraded to v0.42.2 and it works.

@robcalcroft the fix is already available in v0.42.1 and v0.43.0-rc.2

@robcalcroft the way I solved it was to locally edit the YellowBox.js file (inside node_modules/react-native/...) with the 3 lines from this commit: https://github.com/facebook/react-native/commit/adeb5ff940cb56a594b1f653660f22faeeebf382

Since this is only breaking development, it has no side-effects for production. It’s an interim solution until a new react-native release is baked

I’m also having the same problem on version 0.42. When I try to open a modal, the app freezes and after trying to interact with it, it crashes. Also the remote debugger is showing this warning: “Calling of [-RCTUIManager setFrame:forView:] which is deprecated.” Which might be related to the commit f33f84e75f1957f381e34bc99a902b9c324db6fa

I am having similar issue when running on ios with version 0.43.0-rc.0 with remote debug enabled. It can be reproduce by creating a new project with react-native init --version="0.43.0-rc.0" rn43, then add a console.warn in render function, the screen will be render in blank and no yellow box appear.

  render() {
    console.warn("test warning here");
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }

v0.42.1 seems not to be published right now, but you can test it by putting this instead of v0.42.1 in the package.json: facebook/react-native#v0.42.1