react-native: Malformed calls from JS: field sizes are different

It looks like you are using an older version of React Native. Please update to the latest release, v0.59 and verify if the issue still exists.

@Blutude @cristian1703 – upgrading to the latest patch 0.59.1 fixed this issue for me.

I had a similar issue. In my case, I tracked it down to native bridge serialization problem. Basically, the problem is that some JS values are not accepted as arguments for native method calls. Most notably: NaN and Infinity, also functions.

How to diagnose:

First, look for the errors like this in your log:

Invariant Violation
["<<NaN>>"] is not usable as a native method argument

This might give you and idea what specific value causing the problem.

In order to figure out the specific method, you should look into the first 2 number array reported by RN. Those are internal ids of native module and method:

[[74,24],[19,1] ...

They are not very straightfoward to look up, but one place you can start is NativeModules.js at function genMethod. Once you understand which native methods might cause the error just check your code for possibly incorrect values being passed. Good luck!

(In my case this only was a problem in debug mode, when the calls are made via Websockets, in release mode everything was working - I believe because of a different serialization mechanism React Native uses in release vs debug).

Seems like this is a react-navigation issue.

@nppull notice "left":"<<NaN>>". Seems like somewhere in the code an incorrect value (NaN? Infinity?) is passed as left of some view.

i was fixed it 😃 i use lib navigator… have a file NavigatorNavigationBar.js

before:

COMPONENT_NAMES.forEach(function (componentName) { var component = this._components[componentName].get(this.props.navState.routeStack[index]); var props = this._getReusableProps(componentName, index); if (component && interpolate[componentName](props.style, amount)) { props.pointerEvents = props.style.opacity === 0 ? “none” : “box-none”; component.setNativeProps(props); } }, this);

after:

COMPONENT_NAMES.forEach(function (componentName) { var component = this._components[componentName].get(this.props.navState.routeStack[index]); var props = this._getReusableProps(componentName, index); if (component && interpolate[componentName](props.style, amount)) { props.pointerEvents = props.style.opacity === 0 ? ‘none’ : ‘box-none’; if(isNaN(props.style.left) == false){ component.setNativeProps(props); } } }, this);

my problem RN0.59.8

[1209,"RCTView",{"opacity":1,"left":"<<NaN>>","pointerEvents":"box-none"}] is not usable as a native method argument

my case was that i was trying to show server’s response with Alert . I just removed it and the error went away.

Same here. 0.59.10

I ran into this error and it turned out I was passing NaN into a react-navigation config. I had to just start stripping out code until I isolated it.

In my case, I was providing moment date as the fire date to PushNotificationIOS. I guess it is certain that this is happening when some invalid parameter is provided to a native method.

I just upgraded to React Native 0.60.4 and am facing the same issue. It happens when trying to animate the opacity like so:

opacity: this.props.scrollX.interpolate({
   inputRange: [0, this.width, 2 * this.width, 3 * this.width], // where this.width is a valid number
   outputRange: [0, 0, 0, 1],
}),

The error message includes the following – with opacity being the important part:

Invariant Violation: 
[1207,"RCTView",61,{
"position":"absolute",
"top":0,
"bottom":0,
"left":0,
"right":0,
"flex":1,
"opacity":"<<NaN>>"
}] is not usable as a native method argument.

Seems like the AnimatedValue is not transformed correctly to a number.

I have the same issue after running react native upgrade from 0.57 to 0.59 info React Native Environment Info: System: OS: macOS 10.14.4 CPU: (8) x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz Memory: 38.76 MB / 16.00 GB Shell: 5.3 - /bin/zsh Binaries: Node: 8.11.2 - /usr/local/bin/node npm: 5.6.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1 Android SDK: API Levels: 19, 23, 25, 26, 27 Build Tools: 23.0.1, 25.0.2, 26.0.1, 26.0.2, 27.0.2, 27.0.3, 28.0.0, 28.0.3 System Images: android-19 | Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 10.1/10B61 - /usr/bin/xcodebuild npmPackages: react: ^16.8.4 => 16.8.4 react-native: ^0.59.1 => 0.59.1 npmGlobalPackages: react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7

@Blutude were you able to find a solution?

if your code inside render() return function is like as below: ` <View> <Provider store={store}> <SafeAreaView style={{ flex: 1, backgroundColor: theme.SECONDARY_COLOR }} forceInset={{ bottom: 'never ’ }} > <View style={{ flex: 1 }}> <AppNavigator ref={navigatorRef => { NavigationService.setTopLevelNavigator(navigatorRef); }} onNavigationStateChange={(prevState, currentState) => { this.setState({ prevState, currentState }); const currentScreen = this.getActiveRouteName(currentState); const prevScreen = this.getActiveRouteName(prevState); if (prevScreen !== currentScreen) { console.log('currentScreen --------> ', currentScreen); } }} /> </View> </SafeAreaView> </Provider>

`Please remove SafeAreaView .Hope it works for you !!

@mairi17 I fixed similar issue by setting up default value and added condition to check whether value is correct. In your case, opacity value should be a number.

@nppull notice "left":"<>". Seems like somewhere in the code an incorrect value (NaN? Infinity?) is passed as left of some view.

I got the same issue, and find a solution https://github.com/react-navigation/react-navigation/issues/4058

here is the issue code:

"react-native": "0.61.5",
"@react-native-firebase/app": "^6.3.4",

I got this same error message when writing json object to firebase database.

A hacky solution: JSON.parse(JSON.stringify(<the_json_object_causing_problem>)) works for me.

@wicharek Thanks for your insights. I am also observing same problem only in debug mode which has almost blocked my development as I see the red screen as soon as the app is loaded. How did you fix the problem with the web sockets in your case. For me also, there are no bad values as such in the fields and it is happening during WebSocket.emit. The fields reported are [[24,24,34,24],[1,0,4,0],[[377],[378,45000,1571487185812,true],[379,0,1571487185822,false]],1066].