[android] layout shift bug on new architecture

[AndreiCalazans]

Description

When changing orientation we see large layout shifts occurring in the new
archicture. Upon close investigation we isolated the problem to be related to
react-native-screen's Screen component.

isolated-reproduction-orientation-issue.mp4

Note, while in this reproducible this is fast. In a large app with busy threads
the layout shift is way more prominent giving users a broken App sensation.

Also note how the padding applied to Screen is showing but then disappears?

At first we thought this was particularly related to absolute layout positioning
but further investigation proved us wrong.

We found that this onLayout updateState call in FabricEnabledViewGroup onLayout triggered by the ScreenContainer's onLayout causes a layout change that is different from the layout represented in the Shadow Tree. In consequence it causes a large layout shift when orientation change happens and overrides the underlying padding.

We don't understand yet why this updateState exists but removing it does seem to
fix things, see video below:

without-onLayout-new-arch.mp4

Now I'm not sure how to proceed here, I'd like to understand the following:

1. Why does this updateState exist?
2. if we need to keep it how do we ensure possibly schedule the update to occur
   together with its children layout to avoid the layout shift?
3. is this maybe just a problem of incorrect dimenisions here?
4. does Fabric now make this code unnecessary given I didn't find any bugs in
   our App by testing it without this logic?

Note that I used React Native 0.78.2 and RN Screens 3.37.0 because it's what we have in our app but the code is exactly the same in the latest version which I assume means the same behavior exists.

Steps to reproduce

1. Run the reproducible locally
2. Change orientation back and forth notice the blue background flash.

Snack or a link to a repository

https://github.com/AndreiCalazans/reproducible-rn-screens-absolute-layout-shift-new-arch/tree/main

Screens version

3.37.0

React Native version

0.78.2

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

Samsung A22

Acknowledgements

Yes

[AndreiCalazans]

Confirmed it also happens with React Native 0.79.x and latest react-native-screens. See repros here:

1. RN 0.79.x repro
2. RN 0.79.x repro with latest rn-screens

[AndreiCalazans]

Historically looking at Screen.kt it looks like this was just ported from the Paper implementation.

[kkafar]

Hey @AndreiCalazans, short story is: native layout is the source of truth for screen components, because it takes into consideration things that yoga is not aware of (e.g. native header) & can not compute proper screen dimensions; therefore Yoga must be told what the real screen dimensions are & this is reason why we send shadow state update there. If this goes out of sync, the first thing to break are screen dimensions & pressables.

I will find time early next week to run your reproduction, however I must emphasize that I do not observe the effect you described in FabricExample (our test application in the repo).

[AndreiCalazans]

Hey @kkafar thanks for the reply and sorry for the delay on my response.

I posted a reproducible using the FabricExample: #2981

In that PR I wrote a description and included a video recording. Thanks.

[AndreiCalazans]

@kkafar were you able to run the reproducible PR?

[AjayFrancisTechversant]

Hi @AndreiCalazans , Im also having the same issue. How do i fix this yoga issue

[Prajwaltechversant]

+1

react-native : 0.80.1 ( new arch)
@react-navigation/native-stack : 7.3.21
react-native-screens:4.12.0

[Prajwaltechversant]

HI @AndreiCalazans @kkafar Please check this #3008 (comment)

[AjayFrancisTechversant]

This issue is only reproduced in Native-stack navigator, not in stack navigator. I'm using this native stack because I had some other major issues (e.g., white screen issues) in stack navigator. So, going back to stack navigator is not possible for me. Please provide a solution. I'm Stuck here🤯.

[saif-techversant]

+1
Experiencing the same layout shift issue with new architecture enabled. Layout shifts during orientation changes are very noticeable. This is really frustrating as it's blocking our production release 😓 Users are reporting the app feels "broken" during rotation.

Any recommended workarounds? 🙏

Really hoping for a solution soon 🤞