in new arch the modal stopped working correctly

[philipheinser]

Description

new buggy behavior with new arch enabled:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-10-27.at.13.04.03.mp4

with old arch:

ScreenRecording_10-27-2024.13-05-13_1.MP4

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

[alduzy]

Hey @chrfalch thanks for reporting. It looks like it's a reanimated problem.

I copied your reproduction code into a workspace with older versions to see if that's a regression and it worked as expected. Eventually found out downgrading reanimated to 3.14.0 resolves the issue for me.

[chrfalch]

Hi @alduzy - thanks!! Did you try all the versions from 3.16 -> 3.14?

[alduzy]

@chrfalch just 3.15 and 3.14

[chrfalch]

Just wondering if we could try to pinpoint/identify the change that introduced this bug...?

[alduzy]

I didn't go that far into the investigation

[chrfalch]

I understand why you didn't try each of them :) :)

[alduzy]

@philipheinser Are you using reanimated as well? I feel like it's not the same issue we're talking about 😅

Let me know when you manage to prepare the reproducible code so that I can check it. Looking at the recordings, I suspect that your issue may be related to navigation, but cannot confirm without a working repro.

[chrfalch]

Reverting the commits from this PR when using 3.15.0 or REA seems to fix the issue:

software-mansion/react-native-reanimated#6214

I'll make an issue referencing this issue in the REA repo.

[philipheinser]

@alduzy we use reanimated in the project but not in the screen that we are pushing.

[chrfalch]

software-mansion/react-native-reanimated#6659

I think we can close this one then, @alduzy - and continue tracking in the REA issue.