Crash in RCTView

Description:

This is one of the crashes that I experience when I am using react-native-debugger AND when I enable Inspector to highlight the components. Please see reproduction steps.

NOTE: I am using expo on top.

ExceptionsManager.js:44 Invariant Violation: [339,"RCTView",{"left":"<<NaN>>","top":"<<NaN>>","width":"<<NaN>>","height":"<<NaN>>"}] is not usable as a native method argument

This error is located at:
    in RCTView (at ElementBox.js:64)
    in ElementBox (at InspectorOverlay.js:59)
    in RCTView (at InspectorOverlay.js:67)
    in InspectorOverlay (at Inspector.js:250)
    in RCTView (at Inspector.js:248)
    in Inspector (at AppContainer.js:65)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

React Native version: System: OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver) CPU: (8) x64 Intel® Core™ i5-8350U CPU @ 1.70GHz Memory: 263.64 MB / 15.55 GB Shell: 4.4.20 - /bin/bash Binaries: Node: 8.10.0 - /usr/bin/node Yarn: 1.21.1 - /usr/bin/yarn npm: 3.5.2 - /usr/bin/npm npmPackages: react: ~16.9.0 => 16.9.0 react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4 npmGlobalPackages: create-react-native-app: 2.0.2

Steps To Reproduce

1. Use code attached as an App.js.
2. Start react-native-debugger, have it listen on 19001 or whatever your metro bundler expose
3. Start app with expo start, then choose android emulator (but you can use device the same thing happens).
4. After the application loaded, open developer menu and use Debug option. Hopefully your react-native-debugger will overtake, you should see the application structure in it.
5. Once again from developer menu open inspector, it should be collapsed and you should be able to highlight the content on your target while walking through the structure. But as soon as you highlight RCTView, you will get error attached above. If I remove style from the code, inspector is working without problems.

Expected Results

Should not crash 😃

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

I have minimal test case, it is so simple that I will paste in here. In fact it is so simple that I am afraid that maybe I am doing something wrong?

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default function App() {
	return (
		<View style={styles.container}>
			<Text>Dupa</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		marginTop: 50
	}
});

The clue is in style, if I remove this style inspector is working as expected.

[16oh4]

I am having the same problem when inspecting elements in react-devtools!

[mhorowitz]

The “<<NaN>>” in the invariant violation comes from a little bit above the invariant, here: https://github.com/facebook/react-native/blob/ce1703a84d2712a7df8f93a3f3ecbb2c04b72e57/Libraries/BatchedBridge/MessageQueue.js#L291

This is good signal that those state values are a NaN numeric value, which cannot be reliably passed across the bridge.

If they are initialized as undefined, but NaN when you try to pass then across the bridge, it seems likely there’s some bit of code somewhere which is applying arithmetic operations on the state without checking for undefined, as that’s what happens when you do math on an undefined value:

>>> x = undefined
undefined
>>> x + 1
NaN
>>> x * 2
NaN

I don’t know anything about the Inspector so I can’t provide additional specific advice. You’ll need to find where in the JS code the state values are being set to NaN, and fix them.