CODEWITHSUNDEEP
javascriptreact-native
Stuart Gough
Stuart Gough

Reputation: 1714

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

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

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?

Error

Upvotes: 24

Views: 74192

Answers (9)

Nitsan BenHanoch
Nitsan BenHanoch

Reputation: 709

It's definitely about passing the wrong types into functions.

in my case, I was calling setTimeout(ms, callback) instead of setTimeout(callback, ms).

I wish the error message said what line in my code caused the issue. I spent 30 minutes tracking that down.

Upvotes: 1

Abdullah
Abdullah

Reputation: 553

In my case I got this error when I was accidentally passing NaN to width property of a component. So double check that all your data is in the expected/correct format at different stages of state updates.

Upvotes: 3

Udbhav Vikram Singh
Udbhav Vikram Singh

Reputation: 41

I don't know if its relevent or not but in my case, this error was occuring when i was doing this in react native ->

Alert.alert("Error", error, [ { text: "OK", }, ]);

instead of this ->

Alert.alert("Error", error.message, [ { text: "OK", }, ]);

so that's means pass the correct data type and error will get resolve.

Upvotes: 2

Stephen Saucier
Stephen Saucier

Reputation: 2087

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

Upvotes: 2

mahmood
mahmood

Reputation: 399

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

Upvotes: 0

raphaelrk
raphaelrk

Reputation: 827

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

Upvotes: 1

Stuart Gough
Stuart Gough

Reputation: 1714

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.

Upvotes: 15

Redmen Ishab
Redmen Ishab

Reputation: 2339

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

Upvotes: 2

Winnipass
Winnipass

Reputation: 950

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

Upvotes: 10

Related Questions