Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. In an Animated View

Question

As I understand this error can occur in a number of different use cases. Here is what happened in this use case

• An Animated View is being controlled by a PanResponder and this is reset at certain intervals to create an infinite scroll effect.
• Compiles and runs perfectly and functions as intended.
• Small gestures (almost like a tap) ie. pixel movements of about +- 4dx/ 4 dy the code crashes with the error in the title.

The error is thrown in the Child View of the PanResponsder with the mismatch resulting from the translate: [{transform}] I believe.

Why does the code function fine except for smaller gestures? What casuses the error?

Answer 1

I ended up resolving the issue. In this case, it was specific to a PanResponder, but I believe this can occur in other situations as well, the error tracking should be similar. A moveY variable on the PanResponder went beyond a threshold set elsewhere. This resulted in translateY being set to NaN which threw the above error. This results in a mismatch in props.

1. If others experience this issue my advice would be to identify the specific component experiencing the mismatch. (In this case PanResponder)
2. Isolate the props (set defaults/ dummy values) and ensure that each prop is resolved correctly (especially in Animated transform: translatex/translateY )
3. Trace the prop responsible and adjust the logic specific to that prop to avoid NaNs and undefined being passed.

Answer 2

I got this error when i mistakenly passed a closure as a second argument to AsyncStorage instead of the string literal i needed to store

AsyncStorage.setItem('loggedIn', (err, result) => {
      console.log('I am logged In');
});

The correct thing to do is

AsyncStorage.setItem('loggedIn', 'my-jwt-token', (err, result) => {
      console.log('I am logged In');
});