in new arch the modal stopped working correctly

[philipheinser]

Description

new buggy behavior with new arch enabled:

https://github.com/user-attachments/assets/119fa1dd-472b-4052-8406-d987f44f76a7

with old arch:

https://github.com/user-attachments/assets/c28ac505-88c1-4d31-9b4b-e93cb3b17429

Steps to reproduce

1. enable new arch

2. have a

   <Stack.Screen
       options={{
         gestureEnabled: true,
         presentation: 'modal',
         headerShown: false,
       }}
       name="SettingsModal"
       component={SettingsStackNavigator}
     />

   that pushes a navigation stack

Snack or a link to a repository

https://snack.expo.dev/@philipheinser/gnarly-red-bagel

Screens version

4.0.0-beta.14

React Native version

0.76.0

Platforms

iOS

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Real device

Device model

No response

Acknowledgements

Yes

[RyanTG]

Might be useful to describe the buggy behavior with words, in addition to your videos. Sometimes videos do not speak for themselves. Plus, your second video isn't loading for me.

[alduzy]

@philipheinser Thanks for reporting. Unfortunately I was unable to reproduce the problem. Can you confirm that you're able to replicate it using the snack provided?

The versions of the dependencies in the snack appear to be different from those reported here. Please specify the versions you're using.

[philipheinser]

@alduzy the code provided should work in a new arch project not in the snack link. It was just required to open the issue for some reason. We don't use snack or expo we have a bare react native project.

[alduzy]

@philipheinser Okay I get it. Can you confirm that you're able to reproduce the issue by pasting the contents of App.tsx file into a bare react native project then? It does not work for me, that's why I am asking.

[chrfalch]

Can confirm that this also fails in a bare react native project (0.76/new arch). The problem seems to be related to how the Modal screen in RNScreens 4.0 calculates layout when using the new arch.

To reproduce I used the following dependencies:

"@react-navigation/native": "7.0.0-rc.20",
"@react-navigation/native-stack": "7.0.0-rc.28",
"react-native-gesture-handler": "~2.20.2",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "4.0.0-beta.14"

[chrfalch]

I've made a reproduction using bare RN 0.76 that shows the error. The strange thing is that I'm able to narrow it down to using an Animated.View (REA) with an animated style. Removing the animated style removes the error above...

This repro contains all the details:

https://github.com/chrfalch/screens-repro