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

user_11286344 0
Viewed 37729

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?

react-native javascript
6 Answers

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

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

I was facing similar issue and solved it by changing easing value from elastic to other method. Yeah ! weird but solved the issue just incase it might be helpful to someone. 

 Animated.timing(height, {
  toValue: 500,
  duration: 1500,
  easing: Easing.elastic,
}).start();

TO

 Animated.timing(height, {
  toValue: 500,
  duration: 1500,
  easing: Easing.linear,
}).start();
user_72564110

My issue was that I was using Easing.inOut itself without passing another easing function inside, like Easing.inOut(Easing.elastic(1)). I thought Easing.inOut was an ease in itself but it actually just makes whatever easing function you pass into it symmetric. Easing.in and Easing.out similarly make whatever you pass into them run forwards or backwards. See https://reactnative.dev/docs/easing

user_32738060

that error appeared to me when I passed a wrong type value as date to this peace of code

PushNotification.localNotificationSchedule({
  channelId: 'channel-id', // (required) channelId, if the channel doesn't exist, notification will not trigger.
  title: 'My Notification Title', // (optional)
  message: 'My Notification Message', // (required)
  date: date, // in 60 secs
  allowWhileIdle: false, // (optional) set notification to work while on doze, default: false
  repeatTime: 1, // (optional) Increment of configured repeatType. Check 'Repeating Notifications' section for more info.
});
user_117830730

In my case, I was passing an entire response object to an analytics tool, but it wasn't JSON.stringify-able.

user_12534820
Related