Issue: Exception in HostFunction: Malformed calls from JS: field sizes are different

[krisnaItsAVirus]

Description

Environment

• React Native version: 0.72.12
• react-native-screens: 3.29.0
• @react-navigation/native: 6.1.8
• @react-navigation/native-stack: 6.11.0

Description

I'm encountering a consistent crash in my application with the following error:

ERROR Error: Exception in HostFunction: Malformed calls from JS: field sizes are different. 
[[7,104,104,107],[4,0,1,15],[[3556,2000,1741840689749,false],[3556],[3515,"onTransitionProgress",374]],8218]

This error occurs in the RNSScreen component during screen transitions. The full error stack trace shows it's happening within the navigation stack:

This error is located at: in RNSScreen in Unknown in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze in InnerScreen (created by Screen) in Screen (created by SceneView) in SceneView (created by NativeStackViewInner) ...

Navigation Structure

My app uses a nested navigator structure:

1. RootNavigator: The top-level navigator that wraps everything in a NavigationContainer and OverlayProvider

   export const RootNavigator = forwardRef((props, ref) => {
     const insets = useSafeAreaInsets()
     const topInset = Platform.select({ ios: insets.top, android: -heightScale(20) })
   
     return (
       <NavigationContainer {...props} ref={ref}>
         <OverlayProvider value={{ style: chatTheme }} topInset={topInset}>
           <RootStack />
         </OverlayProvider>
       </NavigationContainer>
     )
   })
   

2. RootStack: A native stack navigator with modal presentation

   const RootStack = () => {
     return (
       <Navigator
         screenOptions={{
           headerShown: false,
           presentation: 'modal',
         }}
       >
         <Screen name="StackNavigator" component={MainStackNavigator} />
       </Navigator>
     )
   }
   

3. MainStackNavigator: Handles authentication state and switches between auth and main flows

   export const MainStackNavigator = () => {
     const { registrationInProgress } = useSnapshot(authStore.state)
     const { isAuthenticated } = useSnapshot(authStore.computed)
   
     return (
       <Navigator screenOptions={{ headerShown: false }}>
         {isAuthenticated && !registrationInProgress ? (
           <Screen name="MainNavigator" component={MainNavigator} />
         ) : (
           <Screen name="AuthNavigator" component={AuthNavigator} />
         )}
       </Navigator>
     )
   }
   

4. MainNavigator: Contains all the screens for authenticated users

   export const MainNavigator = () => {
     const { onBoardingInProgress } = useSnapshot(authStore.state)
   
     return (
       <Navigator
         initialRouteName={onBoardingInProgress ? 'OnboardingScreen' : 'LandingScreen'}
         screenOptions={{ headerShown: false }}
       >
      <Screen
        name="StoryWatchScreen"
        component={StoryWatchScreen}
        options={{
          gestureDirection: 'vertical',
          gestureEnabled: true,
          fullScreenGestureEnabled: true,
        }}
      />
         {/* Many more screens... */}
       </Navigator>
     )
   }
   

Expected Behavior

Screen transitions should work smoothly without any crashes or errors.

Attempted Solutions

I've tried the following approaches without success:

• Clearing cache and rebuilding the app

Any guidance would be greatly appreciated as this is blocking our development process.

Steps to reproduce

1. Navigate to the StoryWatchScreen
2. Attempt to dismiss the screen with a gesture
3. The error occurs seemingly at random during screen transitions
4. The app crashes with the above error message

Snack or a link to a repository

Screens version

3.29.0

React Native version

0.72.12

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

iPhone 12

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description and Snack or a link to a repository sections.