Malformed calls from JS: field sizes are different

[Blutude]

🐛 Bug Report

Here is the bug I get.

Malformed calls from JS: field sizes are different.

[[74,24],[19,1],[[64,2000,1552169087432,false]],415]

RCTFatal
-[RCTCxxBridge handleError:]
__34-[RCTCxxBridge _initializeBridge:]_block_invoke
facebook::react::RCTMessageThread::tryFunc(std::__1::function<void ()> const&)
facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1::operator()() const
void std::__1::__invoke_void_return_wrapper::__call<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&>(facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1&&&)
std::__1::__function::__func<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1, std::__1::allocator<facebook::react::RCTMessageThread::runOnQueue(std::__1::function<void ()>&&)::$_1>, void ()>::operator()()
std::__1::function<void ()>::operator()() const
invocation function for block in facebook::react::RCTMessageThread::runAsync(std::__1::function<void ()>)
CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK
__CFRunLoopDoBlocks
__CFRunLoopRun
CFRunLoopRunSpecific
+[RCTCxxBridge runRunLoop]
NSThread__start
_pthread_body
_pthread_body
thread_start

To Reproduce

I was on branch master, everything was working fine. I created a new branch 'android' and ran the android simulator, fixing a few things related to android. Then I wanted to make sure things still looked good in iPhone, so I ran to iPhone simulator and that's when I got the bug. The screen does not crash immediately. It crashes as soon as I login. The android simulator runs completely fine though. I figured I would 'git checkout master' branch to pinpoint what exactly caused that error, but the error persisted on the master branch. That doesn't make much sense to me

Expected Behavior

The iPhone simulator should run fine.

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
Memory: 1.38 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.11.0 - ~/.nvm/versions/node/v11.11.0/bin/node
npm: 6.7.0 - ~/.nvm/versions/node/v11.11.0/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: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 26.0.1, 28.0.3
System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64
IDEs:
Android Studio: 3.0 AI-171.4443003
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: ^16.7.0 => 16.7.0
react-native: ^0.58.4 => 0.58.4
npmGlobalPackages:
react-native-cli: 2.0.1

[cristian1703]

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(R) Core(TM) 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?

[react-native-bot]

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.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[Blutude]

@cristian1703 I was not. I reverted to an old commit before react-native upgrade and it started working again.

[daveols]

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

[cristian1703]

@daveols as you can see in my react-native info, I am already using 0.59.1

[rickhanlonii]

Hey @Blutude thanks for reporting!

Currently what's posted is a crash report, not a bug report, so it's not really actionable for us

Can you update to outline what the bug is and how to reproduce?

[agarant]

I stumbled on the same error with RN 0.59.1. I'm not sure if it is linked to react-native or the underlying libraries, but maybe it can help reproducing it.

1. When trying out react-native-reanimated-bottom-sheet, it crashed as soon as the component rendered.

2. When trying out the new Menu component from react-native-paper, it crashed when trying to open the menu.

Both of these cases (and the error message) seem to be linked to animation. Here is the PR for the Menu component.

[joebernard]

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.

[kala888]

I got the same issue, and find a solution react-navigation/react-navigation#4058

here is the issue code:

[cpojer]

Seems like this is a react-navigation issue.

[AugustoAleGon]

@cpojer I got the same problem. But I don't have react-navigation. I do have react-native-navigation.

[wicharek]

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).

[nppull]

my problem RN0.59.8

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

[wicharek]

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

[nppull]

@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);

[sungsong88]

I'm getting the same error message issue.... @nppull what was the change u made there? So is this such an issue that will happen when prop_types type mismatch or invalid value somehow??

[ithustle]

Same here. 0.59.10

[sajjanhubale]

I'm getting the same error for date input field and I am using react-navigation. is this react-navigation issue?

[pothos-dev]

Same problem, RN 0.59.10

I traced it back to a call to executeSql by "react-native-sqlite-storage", a library that hasn't been updated in a while. I'm thinking there might be some breaking change in the underlying JS bridge which does not show up as compile error with some native libs.

Edit: I just saw that I'm passing NaN over the bridge, so I'm assuming this is related to the problem.
Edit2: NaN was produced by new Date(datestring).getTime(), which seems to use a different date parsing algorithm as is used by Node (which parses that string just fine). Has the Date implementation used by RN on Android changed?

[mairi17]

Same problem, not using react-navigation. We are using animation on this transition and are seeing:
[1635,"RCTView",41,{"flex":1,"marginTop":16,"marginLeft":64,"marginRight":64,"opacity":"<<NaN>>"}] is not usable as a native method argument

[sajjanhubale]

@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.

[steventilator]

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.

[StarkAndy]

if your code inside render() return function is like as below:
`

<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);
}
}}
/>

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

[abedolinger]

Thank you @nppull, @steventilator, this thread helped me track down a bad value in react-native-maps.

[varungupta85]

@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].

[winni4eva]

Mine was related to AsyncStorage and I fixed it using https://stackoverflow.com/questions/56806467/error-exception-in-hostfunction-malformed-calls-from-js-field-sizes-are-diffe?answertab=active#tab-top

[JPritchard9518]

I had a similar issue when using a Pan Responder and animated value. My issue is I was setting an Animated.ValueXY variable called position via

position.setValue({y: gesture.dy})

without setting the x value as well. Updated to:

position.setValue({y: gesture.dy, x: 0})

and the error went away.

[vahidrn98]

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

[varungupta85]

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.

[arthedza]

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

I confirm it

[abedolinger]

Just had another fun instance of this I'll leave here for Google's sake. When passing a custom component to react-native-gesture-handler, I got this error again until I wrapped the custom component in a blank <View>. Looks like RNGH can't always pass down native props to custom elements. The error propagated from a ReAnimated component, which I haven't figured out, and probably never will.

[ovistoica]

@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].

This seems to be the closest issue to ours. It also stopped our development. If you fixed this issue please provide some feedback.

• React Native 0.61.2
• Android Development Mode

[cgdstnc]

i was having same problem with code like this. I change code to second one and it seems problem gone. But i still don't know why
const style = { ...StyleSheet.absoluteFillObject, zIndex: 900, transform: [ { translateX }, { translateY }, { rotateZ }, ], }; return ( <PanGestureHandler {...{ onGestureEvent }}> <Animated.View {...style}> <Card /> </Animated.View> </PanGestureHandler> )

<PanGestureHandler {...{ onGestureEvent }}> <Animated.View style={{ ...StyleSheet.absoluteFillObject, zIndex: 900, transform: [ { translateX }, { translateY }, { rotateZ }, ], }}> <Card /> </Animated.View> </PanGestureHandler>

[tarunjuneja]

I was integrating firebase in my react native app

it was showing some alert using Alert.alert that caused it for me.
The moment i turned it to a console.log it started working
So other similar react code can also be one of the reason
that weird ...

[benevbright]

    const translateY = this.translateY.interpolate({
      inputRange: [-1, 0, 1],
      outputRange: [-1000, -(this.height), 0]
    });

Now sure if it's the same. But I got the error message too.
My mistake was this.height was undefined at the beginning.
and I didn't use state so it never triggered re-render.
Putting the default value and putting this.height on state resolved my issue.

RN ver: 0.61.5

[basukiwinoto]

"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.

[EricWiener]

This occurred for me when I was sending an object over the JS bridge to native iOS code. I thought I was passing an array, but it turned out to be a dictionary with numeric indices {0: 'element1', 1: 'element2'}. Once I converted this into an array, my issue went away.