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

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.

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