[Android][Fabric & Paper] - Jumping/flickering for nested stacks

[ferrannp]

Description

When using bottom-tabs and native header, the first time you focus a tab, the screen will jump/flicker and not being in the correct position as you can see on the video. This happens on Fabric and on Paper.

It started happening after this PR: #2756

jumping.mp4

Here is the repo: https://github.com/ferrannp/react-native-screens-testing

Steps to reproduce

See https://github.com/ferrannp/react-native-screens-testing

1. Add enableEdgeToEdge to MainActivity to enable edge to edge below API 35
2. Add @react-navigation/bottom-tabs
3. Each bottom tab is a Native Stack
4. When loading the app, the first time you focus a tab, the screen will flicker and not being in the correct position

Snack or a link to a repository

https://github.com/ferrannp/react-native-screens-testing

Screens version

4.12.0

React Native version

0.79.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Pixel 8 Api 34

Acknowledgements

Yes

[viet795]

This issue occurs only with New Architecture enabled. Disabling New Architecture in both Android and iOS resolves the flickering problem.
newArchEnabled=false in gradlew.propertíe
ENV['RCT_NEW_ARCH_ENABLED'] = '0' in top Podfile

[ferrannp]

For me it happens only in Android and in both architectures because of the PR I pointed out.

Also disabling the new architecture is not the solution, I want to enable it 😃

[maciekstosio]

It started happening after this PR: #2756

Do you remember, if edge-to-edge wasn't enabled then? I jumped to that commit and it worked, but the edge-to-edge was disabled, so I wonder if it's the problem with those changes or handling edge-to-edge.

[ferrannp]

@maciekstosio I think edge-to-edge was not enabled back then.

[itajenglish]

+1

[ferrannp]

@maciekstosio @kkafar any news on this one?