fix(Android, Fabric): jumping content with native header

[kkafar]

Description

This PR intents to solve the eternal issue with "jumping content" on Android & Fabric. The issue itself is present on every platform / RN architecture combination, however this PR scope is to solve situation only on Android + Fabric. Android + Paper, and iOS will be solved in separate PRs.

Note

These videos are recorded with topInsetEnabled: false, as this prop implementation causes another series of issues that will be handled separately.

Here is before & after comparison (best way to see is to go frame-by-frame)

Before	After
before-topinsetenabled-false.mov	after-topinsetenabled-false.mov

This will even work with irregular font sizes!

Short issue genesis

Note

The flow described here below is a simplification, but should give you a good grasp on the issue.

Basically during the very first Yoga layout, that happens on secondary thread, React layout mechanism has no knowledge of the header size (there isn't even a node representing the header at appropriate tree-level present in shadow tree), thus the Screen content is layouted with more available space that it has in reality. These dimensions are then send to UI thread, and propagated bottom-up (children before parents) and Screen contents do receive too high frame. Then, when ScreenContainer / ScreenStack does receive its frame from RN, it triggers a fragmentary pass of native layout using CoordinatorLayout (the layout stops at Screen), offsetting the Screen by just-computed-header-height on Y axis, and in consequence pushing some of the Screen's contents off the screen (exactly a strip of header height). The situation is then salvaged by sending state update from Screen to React Native with new frame size.

Implemented solution

During the first Yoga layout pass (when there is not state from UI thread received yet) we utilise the fact that RN clones our ShadowNode & calls adapt on it. In the adapt method we call into JVM where we have set up a dummy view hierarchy with coordinator layout & header, we layout it & return result to C++ layer where we set bottom padding on the Screen so that its contents do have right amount of space.

Important

Downside of this solution is the fact, that the Yoga state / Shadow Tree still indicates that the Screen's origin is at (x, y) = (0, 0) and it still will have wrong dimensions.
Setting dummy dimension on HeaderConfig shadow node will improve situation only slightly, as the Screen will still have wrong origin, but it will have appropriate size immediately, hence Screen's state update might not trigger follow-up transaction. Thus I'm thinking now that I will update the solution.

Yet untested approaches

• I want to try making custom descriptor for ScreenStack, and try to customise shadownode's layout method. <- tested this & I believe this will not work due to the fact, that ShadowNode.layout does not use layoutContext.viewportOffset at all (so we can not use this to offset our descendants). At the same time the layout method does not propagate layout metrics - they are extracted for each shadow node directly from it's yoga node and this process does not take into consideration parent's layout metrics. However, if the x, y view origin coordinates determined by yoga are in parent node coordinate system we can use HeaderConfig to ensure appropriate Screens size and at the same time set frame.y manually!

Test code and steps to reproduce

I've added TestHeader test case. It's best to run it with FabricTestExample, record it, and then see frame-by-frame that the content no longer jumps.

Checklist

• Included code example that can be used to test this change
• Ensured that CI passes

[WoLewicki]

LGTM! Just answer all the comments and apply changes if needed before merging.