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

Activity

1. tonybebber commented on Jun 17, 2019

   

   tonybebber

   on Jun 17, 2019

   More actions

   @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.
2. JorgeMoV commented on Jul 26, 2019

   

   JorgeMoV

   on Jul 26, 2019

   More actions

   @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 👍

   👍React with 👍1Reacted by anilrg1793
3. anilrg1793 commented on Aug 21, 2019

   

   anilrg1793

   on Aug 21, 2019

   More actions

   @nunobasto Really thanks for this for sharing this information. Also it saves my lot of time.
4. SpencerLynn commented on Sep 6, 2019

   

   SpencerLynn

   on Sep 6, 2019

   Last edited by SpencerLynn

   More actions

   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,
         },
     }
   }
   

   👍React with 👍1Reacted by BlueGenieTech
5. SpencerLynn commented on Sep 6, 2019

   

   SpencerLynn

   on Sep 6, 2019

   More actions

   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",
     }
   

   👍React with 👍1Reacted by BlueGenieTech

   😄React with 😄1Reacted by BlueGenieTech

   🎉React with 🎉1Reacted by BlueGenieTech
6. AndriiUhryn commented on Dec 15, 2019

   

   AndriiUhryn

   on Dec 15, 2019

   More actions

   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.

   👍React with 👍2Reacted by maarekj and Samuel De Backer