search

mohebifar / react-native-copilot

Step-by-step walkthrough tooltip for your react native app
MIT License
2.24k stars 407 forks source link

Malformed calls from JS : field sizes are different #227

Open ShubhamJain0 opened 3 years ago

ShubhamJain0 commented 3 years ago

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 commented 3 years ago

I have the same issue, please respond

RRaideRR commented 3 years ago

@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 commented 3 years ago

@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 commented 2 years ago

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

ShubhamJain0 commented 2 years ago

@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 commented 2 years ago

@ShubhamJain0 which react-native version did you use?

yudai524 commented 1 year ago

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