react-native: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. Invariant Violation

Have you ever see such below error while developing your react-native application. I did encounter once. wrote down how I figure it out and hope will help you as well. ERROR Invariant Violation: [329,"RCTText",11,{"margin":5,"borderWidth":1,"padding":5,"borderRadius":5,"fontSize":"<<Infinity>>","color":-1335225,"borderColor":-1335225,"accessibilityState":{},"allowFontScaling":true,"ellipsizeMode":"tail","isHighlighted":false,"selectionColor":null}] is not usable as a native method argument T

Post, Code and Quiet Time. react-native: Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. Invariant Violation By Errong Leng – 10 May 2024 – View online → Photo by Christoph Nolte / Unsplash Have you ever see such below error while developing your react-native application. I did encounter once. wrote down how I figure it out and hope will help you as well. ERROR Invariant Violation: [329,"RCTText",11,{"margin":5,"borderWidth":1,"padding":5,"borderRadius":5,"fontSize":"<<Infinity>>","color":-1335225,"borderColor":-1335225,"accessibilityState":{},"allowFontScaling":true,"ellipsizeMode":"tail","isHighlighted":false,"selectionColor":null}] is not usable as a native method argument This error is located at: in RCTText (created by Text) in Text (created by WordCloud) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by TouchableOpacity) in TouchableOpacity (created by TouchableOpacity) in TouchableOpacity (created by WordCloud) in RCTView (created by View) in View (created by WordCloud) in WordCloud (created by Alaphbet) in RCTView (created by View) in View (created by ScrollView) in RCTScrollView (created by ScrollView) in ScrollView (created by ScrollView) in ScrollView (created by Alaphbet) in RCTView (created by View) in View (created by Alaphbet) in RCTView (created by View) in View (created by Alaphbet) in Alaphbet (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View in CardSheet (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by PanGestureHandler) in PanGestureHandler (created by PanGestureHandler) in PanGestureHandler (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by Card) in RCTView (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by StackView) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by AppNavigator) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by AppNavigator) in AppNavigator (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in Coca(RootComponent), js engine: hermes ERROR Invariant Violation: [329,"RCTText",11,{"margin":5,"borderWidth":1,"padding":5,"borderRadius":5,"fontSize":"<<Infinity>>","color":-1335225,"borderColor":-1335225,"accessibilityState":{},"allowFontScaling":true,"ellipsizeMode":"tail","isHighlighted":false,"selectionColor":null}] is not usable as a native method argument This error is located at: in RCTText (created by Text) in Text (created by WordCloud) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by TouchableOpacity) in TouchableOpacity (created by TouchableOpacity) in TouchableOpacity (created by WordCloud) in RCTView (created by View) in View (created by WordCloud) in WordCloud (created by Alaphbet) in RCTView (created by View) in View (created by ScrollView) in RCTScrollView (created by ScrollView) in ScrollView (created by ScrollView) in ScrollView (created by Alaphbet) in RCTView (created by View) in View (created by Alaphbet) in RCTView (created by View) in View (created by Alaphbet) in Alaphbet (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View in CardSheet (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by PanGestureHandler) in PanGestureHandler (created by PanGestureHandler) in PanGestureHandler (created by Card) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by Card) in RCTView (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in RNSScreen (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by StackView) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by AppNavigator) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by AppNavigator) in AppNavigator (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in Coca(RootComponent), js engine: hermes ERROR Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. [[4,18],[2,5],[[80,259]],744] This error is located at: in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by StackView) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by AppNavigator) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by AppNavigator) in AppNavigator (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in Coca(RootComponent), js engine: hermes ERROR Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. [[4,18],[2,5],[[80,259]],744] This error is located at: in AnimatedComponent in AnimatedComponentWrapper (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by StackView) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by AppNavigator) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by AppNavigator) in AppNavigator (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in Coca(RootComponent), js engine: hermes The stack trace was not that clear, since it is quite deep. The last Exception in HostFunction: Malformed calls from JS: field sizes are different. But be patinent, scroll to top, you will find the root cause. ERROR Invariant Violation: [329,"RCTText",11,{"margin":5,"borderWidth":1,"padding":5,"borderRadius":5,"fontSize":"<<Infinity>>","color":-1335225,"borderColor":-1335225,"accessibilityState":{},"allowFontScaling":true,"ellipsizeMode":"tail","isHighlighted":false,"selectionColor":null}] is not usable as a native method argument the fontSize is Infinity, NAN, not a number. That cause the Text component not able to render by react native. Unlucky, the stack trace didn't showed this Text were from which JSX section. I have to review my code and find out the code was calculate the font size at runtime, somehow the value will be NAN in a specific case. const maxCount = Math.max(...data.map(item => item.count)); const minCount = Math.min(...data.map(item => item.count)); const calculateFontSize = (count: number): number => { const range = maxCount - minCount; // fix to avoid NAN if (range <= 0) { return minFontSize; } const fontSizeRange = maxFontSize - minFontSize; const adjustedCount = count - minCount; return minFontSize + (fontSizeRange * adjustedCount) / range; }; After the fix, issue was gone. Post, Code and Quiet Time. © 2024 – Unsubscribe