[iOS] screen flickers on new architecture if previous screen has animated view

[kantorm]

Description

When using react-native-screens with new architecture on iOS the screen flickers on navigation when the previous screen contains an Animated.View with an animated style applied.

The issue does not occur when:

1. Using stack navigator instead of native stack
2. The animated style is not applied but the animation runs

flickering_demo_rn_screens.mov

Steps to reproduce

1. Create a native stack navigator with at least two screens.
2. On one screen add an animated view with some animated styles applied
3. Add navigation to the next screen
4. On the second screen add navigation to the first screen
5. You should observe flickering upon navigating between screens

Snack or a link to a repository

https://snack.expo.dev/@kantorm/a4f338

Screens version

4.4.0

React Native version

0.76

Platforms

iOS

JavaScript runtime

Hermes

Workflow

None

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[kkafar]

Thanks for the report!