Malformed calls from JS : field sizes are different

[ShubhamJain0]

When the component unmounts (i.e., when I navigate to other screen (bottom tab navigator) before component is mounted) it throws the error Malformed calls from JS : field sizes are different. After this I have also added the condition to start the tutorial only when the component is mounted and also added clean up function for any active events, but it still throws the same error. But it works fine if waited for the component to mount. It seems that some of the property values will be NaN if component unmounts. Could you provide me with a solution asap ? Thanks !

[miladrasooli]

I have the same issue, please respond

[RRaideRR]

@ShubhamJain0 I might not understand you correctly but you said But it works fine if waited for the component to mount. - so why just not wait for the component to be mounted?

[ShubhamJain0]

@RRaideRR Yes that is what I have done. The problem is that until the data is fetched from API loading screen component is displayed which also has bottom tab navigation. But the copilot is in the main component, so if the user navigates during the loading screen, as the main component was not mounted the values of copilot were NaN. So it was throwing the error. Anyway I removed the navigation from the loading component. Now it works fine. Also I could do was instead of using if condition I could have used terenary operator and changed the view as soon as data is fetched. Although I don't understand why the values are NaN?

[tradebulls]

@ShubhamJain0 Facing same issue. How did you removed the navigation in the bottom tab?

[ShubhamJain0]

@ShubhamJain0 Facing same issue. How did you removed the navigation in the bottom tab?

I used tab navigation only on the screens I needed and until the data is fetched from API a loading component is mounted using state. Since the main component is not yet mounted no tab navigation will be shown. As soon as data is fetched the loading component is unmounted and then the main component is mounted which has bottom tab navigation.

[tomerbraun]

@ShubhamJain0 which react-native version did you use?

[yudai524]

I resolved this issue. In my case, the screen including copilot was mounted in backgound because I used useEffect to start copilot steps. I'm using React Navigation and it mounts a screen immediately depending on conditions you defined on your Navigator component.

My Navigator component mounts the screen including copilot if the user signing in procedure has been completed.

Check useFocusEffect hook if you use React Navigation. cf., https://reactnavigation.org/docs/function-after-focusing-screen/#triggering-an-action-with-the-usefocuseffect-hook