Malformed calls from JS: field sizes are different / Error calling JSTimers.CallTimers [Fixed]

[nunobasto]

I have several similar Apps still with this pioneer Navigation, so now that Google requires a 64 bit version that is only available on RN 0.59, I had to upgrade. There are too many implications and limitations in changing now to another navigation system.

In this version of RN, when I navigated to another route, I was having this error Malformed calls from JS: field sizes are different.and in another experiment Error calling JSTimers.CallTimers.
I found out that if I removed the RightButton from NavigationBarRouteMapper all was ok so after some research, I fixed this error by commenting/removing this bit of code from src/NavigatorNavigationBarStylesIOS.js:

left: {
  type: 'linear',
  from: startStyles.RightButton.left,
  to: endStyles.RightButton.left,
  min: 0,
  max: 1,
  extrapolate: true,
},

I just leave this fix here so anyone with the same problem can have this possible solution.

[tonybebber]

@nunobasto - thank you, this helped me a lot.

One thing that threw me off for a bit, was that since I was experiencing the error on Android, I figured that the file I would have to edit was src/NavigatorNavigationBarStylesAndroid.js. However, I wasn't able to get past the error (on Android) until I made the change you suggested in src/NavigatorNavigationBarStylesIOS.js. I guess it makes sense because both of those files get imported into src/NavigatorNavigationBar.js which is used for both platforms.

Although, this feels like a workaround, I'm not sure of a better solution at this point. It does seem to work for me, and you saved me a lot of time. Thanks again.

[JorgeMoV]

@nunobasto I just want to thank you for publishing this information. You are a life saver, at least my life has been saved by you. THANK YOU 👍

[anilrg1793]

@nunobasto Really thanks for this for sharing this information. Also it saves my lot of time.

[SpencerLynn]

I also ran into this issue but solution was similar but slightly different.

The root cause that I found was that in NavigatorNavigationBarStylesAndroid.js, the BASE_STYLES object defines RightButton as the following

var BASE_STYLES = {
  other stuff...,
  RightButton: {
    position: 'absolute',
    top: 0,
    right: BUTTON_EFFECTIVE_MARGIN,
    overflow: 'hidden',
    alignItems: 'flex-end',
    height: NAV_ELEMENT_HEIGHT,
    backgroundColor: 'transparent',
  },
}

That's consumed and built into the Stages variable and the Right field is defined as the following

var Stages = {
  other stuff...,
  Right: {
    Title: merge(BASE_STYLES.Title, { opacity: 0 }),
    LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 0 }),
    RightButton: merge(BASE_STYLES.RightButton, { opacity: 0 }),
  },
}

Then buildSceneInterpolators returns an object with a RightButton field that consumes this Styles.Right (via a call from the Interpolators object definition) as the following

function buildSceneInterpolators(startStyles, endStyles) {
  return {
    other stuff...,
    RightButton: buildStyleInterpolator({
      opacity: {
        type: 'linear',
        from: startStyles.RightButton.opacity,
        to: endStyles.RightButton.opacity,
        min: 0,
        max: 1,
        round: opacityRatio,
      },
      left: {
        type: 'linear',
        from: startStyles.RightButton.left,
        to: endStyles.RightButton.left,
        min: 0,
        max: 1,
        extrapolate: true,
      },
  }
}

Here you see that startStyles.RightButton.left is referenced. However, that value is not defined above on BASE_STYLES that ends up being consumed here. So you end up with NaN which causes issues.

If I add left: 0 to the base right button style, everything seems to work as expected.

Another fix was to change the RightButton styles in the buildSceneInterpolators function to return something like the following

function buildSceneInterpolators(startStyles, endStyles) {
  return {
    other stuff...,
    RightButton: buildStyleInterpolator({
      opacity: {
        type: 'linear',
        from: startStyles.RightButton.opacity,
        to: endStyles.RightButton.opacity,
        min: 0,
        max: 1,
        round: opacityRatio,
      },
      right: {
        type: 'linear',
        from: startStyles.RightButton.right,
        to: endStyles.RightButton.right,
        min: 0,
        max: 1,
        extrapolate: true,
      },
  }
}

[SpencerLynn]

Rather than modifying node_modules directly, I set up a script to do it for me, so I can get consistent fixes without manually applying every time I clean m node_modules folder.

Here is what I did to fix it until I can move away from this library (or the library fixes this issue).

Add a node script to modify the file. Here is what mine was:

const fs = require('fs');
const path = require('path');

const filePath = path.join(
    path.dirname(fs.realpathSync(__filename)),
    '../node_modules/react-native-deprecated-custom-components/src/NavigatorNavigationBarStylesAndroid.js'
);
let contents = fs.readFileSync(filePath, 'utf8');
contents = contents.replace('right: BUTTON_EFFECTIVE_MARGIN,', 'left: 0, right: BUTTON_EFFECTIVE_MARGIN,');
fs.writeFileSync(filePath, contents);

Then in package.json, set it up as a postinstall script.

  "scripts": {
    "postinstall": "node <path-to-file>.js",
  }

[AndriiUhryn]

For the one that will have the same issue. No need for custom postinstall scripts. This library is either not supported. I have forked it and replace all needed for RN 0.61+. It's here https://github.com/AndriiUhryn/react-native-custom-components and free to install.