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.
- If others experience this issue my advice would be to identify the specific component experiencing the mismatch. (In this case
PanResponder
) - Isolate the props (set defaults/ dummy values) and ensure that each prop is resolved correctly (especially in
Animated
transform
:translatex
/translateY
) - 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');
});