fix(Android, Stack, Fabric): Fix jumping content in nested stack for Fabric (#3442)

## Description

This PR introduces a set of fixes and manual layout adjustments to
address layout/content jumps in Fabric. I listed them under `Changes`
section with some motivations.

> [!CAUTION]
> This PR aims to resolve the issue only on Fabric; on Paper some
additional effort is needed and (potentially) would require adapting
`ScreenDummyLayoutHelper` to old arch. The work will be continued in a
separate PR.

## Changes

- Added `CustomAppBarLayout`: This custom implementation triggers a
layout refresh on the `AppBarLayout` when we apply padding adjustments
to the `CustomToolbar`. `AppBarLayout` just dispatches insets to
`Toolbar`; therefore, I'm still handling them at the `Toolbar` level.
- Ensured early initialization of `ActionMenuView` in the `Toolbar`:
Initializing the `ActionMenuView` early in the layout process prevents
inconsistencies and avoids fallback to the system default toolbar height
in `onMeasure`, ensuring a consistent layout.
- Manual shadow offset correction in the `Screen`: I'm applying some
temporary padding corrections at the `Screen` level until insets are
applied.
- Layout correction for `ScreenDummyLayoutHelper`: A similar early
correction approach is used for `ScreenDummyLayoutHelper` to keep the
consistency for the header size before full layout pass (this one with
insets applied) is complete.
- Added `DecorViewInsetHelper`: React's layout arrives before insets
have been applied, leading to content jumps. To counter this, we rely on
insets available from the `DecorView` (child of `RootView`). A dedicated
helper class extracts these inset values. Additionally, it ensures that
the insets are applied only on the topmost Screen with Toolbar,
preventing the unnecessary padding on the nested Toolbars.

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

## Fabric

### Before
<table>
  <tr>
    <td width="50%">
<video
src="https://github.com/user-attachments/assets/8c16b90c-2809-4ed3-8a8e-f2fc2a4a3827"></video>
    </td>
    <td width="50%">
<video
src="https://github.com/user-attachments/assets/12e82a10-1ace-462a-a1cb-3fed9b17d246"></video>
    </td>
  </tr>
</table>

### After
<table>
  <tr>
    <td width="50%">
<video
src="https://github.com/user-attachments/assets/1706b298-5a93-4175-acec-832341598db8"></video>
    </td>
    <td width="50%">
<video
src="https://github.com/user-attachments/assets/596c6797-94a0-49aa-913e-42f80036a22d"></video>
    </td>
  </tr>
</table>

## Test code and steps to reproduce

Added Test3006, tested with API levels above and below 30, with both
Status Bar and Display Cutout. As mentioned earlier only testing on
FabricExample is in the scope of this PR.

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

Author: t0maboro

android/src/main/java/com/swmansion/rnscreens/CustomAppBarLayout.kt

@@ -0,0 +1,25 @@
+package com.swmansion.rnscreens
+
+import android.annotation.SuppressLint
+import android.content.Context
+import com.google.android.material.appbar.AppBarLayout
+
+@SuppressLint("ViewConstructor")
+class CustomAppBarLayout(
+    context: Context,
+) : AppBarLayout(context) {
+    /**
+     * Handles the layout correction from the child Toolbar.
+     */
+    internal fun applyToolbarLayoutCorrection(toolbarPaddingTop: Int) {
+        applyFrameCorrectionByTopInset(toolbarPaddingTop)
+    }
+
+    private fun applyFrameCorrectionByTopInset(topInset: Int) {
+        measure(
+            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height + topInset, MeasureSpec.EXACTLY),
+        )
+        layout(left, top, right, bottom + topInset)
+    }
+}

android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt

@@ -34,11 +34,31 @@ open class CustomToolbar(
 
     private val shouldApplyTopInset = true
 
+    private var shouldApplyLayoutCorrectionForTopInset = false
+
     private var lastInsets = InsetsCompat.NONE
 
     private var isForceShadowStateUpdateOnLayoutRequested = false
 
     private var isLayoutEnqueued = false
+
+    init {
+        // Ensure ActionMenuView is initialized as soon as the Toolbar is created.
+        //
+        // Android measures Toolbar height based on the tallest child view.
+        // During the first measurement:
+        // 1. The Toolbar is created but not yet added to the action bar via `activity.setSupportActionBar(toolbar)`
+        //    (typically called in `onUpdate` method from `ScreenStackHeaderConfig`).
+        // 2. At this moment, the title view may exist, but ActionMenuView (which may be taller) hasn't been added yet.
+        // 3. This causes the initial height calculation to be based on the title view, potentially too small.
+        // 4. When ActionMenuView is eventually attached, the Toolbar might need to re-layout due to the size change.
+        //
+        // By referencing the menu here, we trigger `ensureMenu`, which creates and attaches ActionMenuView early.
+        // This guarantees that all size-dependent children are present during the first layout pass,
+        // resulting in correct height determination from the beginning.
+        menu
+    }
+
     private val layoutCallback: Choreographer.FrameCallback =
         object : Choreographer.FrameCallback {
             override fun doFrame(frameTimeNanos: Long) {
@@ -55,6 +75,17 @@ open class CustomToolbar(
 
     override fun requestLayout() {
         super.requestLayout()
+
+        val maybeAppBarLayout = parent as? CustomAppBarLayout
+        maybeAppBarLayout?.let {
+            if (shouldApplyLayoutCorrectionForTopInset && !it.isInLayout) {
+                // In `applyToolbarLayoutCorrection`, we call and immediate layout on AppBarLayout
+                // to update it right away and avoid showing a potentially wrong UI state.
+                it.applyToolbarLayoutCorrection(paddingTop)
+                shouldApplyLayoutCorrectionForTopInset = false
+            }
+        }
+
         val softInputMode =
             (context as ThemedReactContext)
                 .currentActivity
@@ -161,6 +192,7 @@ open class CustomToolbar(
         right: Int,
         bottom: Int,
     ) {
+        shouldApplyLayoutCorrectionForTopInset = true
         requestForceShadowStateUpdateOnLayout()
         setPadding(left, top, right, bottom)
     }

android/src/main/java/com/swmansion/rnscreens/Screen.kt

@@ -8,6 +8,7 @@ import android.util.SparseArray
 import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
+import android.view.WindowInsets
 import android.view.WindowManager
 import android.webkit.WebView
 import android.widget.ImageView
@@ -35,6 +36,7 @@ import com.swmansion.rnscreens.events.SheetDetentChangedEvent
 import com.swmansion.rnscreens.ext.asScreenStackFragment
 import com.swmansion.rnscreens.ext.parentAsViewGroup
 import com.swmansion.rnscreens.gamma.common.FragmentProviding
+import com.swmansion.rnscreens.utils.getDecorViewTopInset
 import kotlin.math.max
 
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
@@ -52,6 +54,8 @@ class Screen(
     val reactEventDispatcher: EventDispatcher?
         get() = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
 
+    var insetsApplied = false
+
     var fragmentWrapper: ScreenFragmentWrapper? = null
     var container: ScreenContainer? = null
     var activityState: ActivityState? = null
@@ -191,7 +195,20 @@ class Screen(
             val width = r - l
             val height = b - t
 
-            dispatchShadowStateUpdate(width, height, t)
+            if (!insetsApplied && headerConfig?.isHeaderHidden == false && headerConfig?.isHeaderTranslucent == false) {
+                val topLevelDecorView =
+                    requireNotNull(
+                        reactContext.currentActivity?.window?.decorView,
+                    ) { "[RNScreens] DecorView is required for applying inset correction, but was null." }
+
+                val topInset = getDecorViewTopInset(topLevelDecorView)
+                val correctedHeight = height - topInset
+                val correctedOffsetY = t + topInset
+
+                dispatchShadowStateUpdate(width, correctedHeight, correctedOffsetY)
+            } else {
+                dispatchShadowStateUpdate(width, height, t)
+            }
         }
     }
 
@@ -502,6 +519,12 @@ class Screen(
         }
     }
 
+    override fun onApplyWindowInsets(insets: WindowInsets?): WindowInsets? {
+        insetsApplied = true
+
+        return super.onApplyWindowInsets(insets)
+    }
+
     override fun onAttachedToWindow() {
         super.onAttachedToWindow()
 

android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt

@@ -52,7 +52,7 @@ class KeyboardVisible(
 class ScreenStackFragment :
     ScreenFragment,
     ScreenStackFragmentWrapper {
-    private var appBarLayout: AppBarLayout? = null
+    private var appBarLayout: CustomAppBarLayout? = null
     private var toolbar: Toolbar? = null
     private var isToolbarShadowHidden = false
     private var isToolbarTranslucent = false
@@ -204,7 +204,7 @@ class ScreenStackFragment :
 
         if (!screen.usesFormSheetPresentation()) {
             appBarLayout =
-                context?.let { AppBarLayout(it) }?.apply {
+                context?.let { CustomAppBarLayout(it) }?.apply {
                     // By default AppBarLayout will have a background color set but since we cover the whole layout
                     // with toolbar (that can be semi-transparent) the bar layout background color does not pay a
                     // role. On top of that it breaks screens animations when alfa offscreen compositing is off

android/src/main/java/com/swmansion/rnscreens/utils/DecorViewInsetsUtils.kt

@@ -0,0 +1,23 @@
+package com.swmansion.rnscreens.utils
+
+import android.view.View
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+
+/**
+ * Retrieves the top system inset (such as status bar or display cutout) from the given decor view.
+ *
+ * @param decorView The top-level window decor view.
+ * @return The top inset in pixels.
+ */
+internal fun getDecorViewTopInset(decorView: View): Int {
+    val insetsCompat = ViewCompat.getRootWindowInsets(decorView) ?: return 0
+
+    return getTopInset(insetsCompat)
+}
+
+private fun getTopInset(insetsCompat: WindowInsetsCompat): Int =
+    insetsCompat
+        .getInsets(
+            WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout(),
+        ).top

android/src/main/java/com/swmansion/rnscreens/utils/ScreenDummyLayoutHelper.kt

@@ -179,8 +179,9 @@ internal class ScreenDummyLayoutHelper(
         }
 
         val topLevelDecorView = requireActivity().window.decorView
+        val topInset = getDecorViewTopInset(topLevelDecorView)
 
-        // These dimensions are not accurate, as they do include status bar & navigation bar, however
+        // These dimensions are not accurate, as they do include navigation bar, however
         // it is ok for our purposes.
         val decorViewWidth = topLevelDecorView.width
         val decorViewHeight = topLevelDecorView.height
@@ -208,7 +209,10 @@ internal class ScreenDummyLayoutHelper(
         // scenarios when layout violates measured dimensions.
         coordinatorLayout.layout(0, 0, decorViewWidth, decorViewHeight)
 
-        val headerHeight = PixelUtil.toDIPFromPixel(appBarLayout.height.toFloat())
+        // Include the top inset to account for the extra padding manually applied to the CustomToolbar.
+        val totalAppBarLayoutHeight = appBarLayout.height.toFloat() + topInset
+
+        val headerHeight = PixelUtil.toDIPFromPixel(totalAppBarLayoutHeight)
         cache = CacheEntry(CacheKey(fontSize, isTitleEmpty), headerHeight)
         return headerHeight
     }

apps/src/tests/Test3006.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { View, Text, StyleSheet, Button } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import Colors from '../shared/styling/Colors';
+
+type RootTabParamList = {
+  First: undefined;
+  Second: undefined;
+  Third: undefined;
+};
+
+type InnerScreenName =
+  | 'Inner11' | 'Inner12' | 'Inner13'
+  | 'Inner21' | 'Inner22' | 'Inner23'
+  | 'Inner31' | 'Inner32' | 'Inner33';
+
+const Tab = createBottomTabNavigator<RootTabParamList>();
+const Stack = createNativeStackNavigator<any>();
+
+type ScreenProps = {
+  current: InnerScreenName;
+  next?: InnerScreenName;
+};
+
+const Screen = ({ current, next, navigation }: ScreenProps & { navigation: any }) => (
+  <View style={styles.container}>
+    <Text>{`${current} Screen`}</Text>
+    {next && (
+      <Button title="Forward" onPress={() => navigation.navigate(next)} />
+    )}
+  </View>
+);
+
+const createScreen = (current: InnerScreenName, next?: InnerScreenName) =>
+  function ScreenWrapper({ navigation }: { navigation: any }) {
+    return <Screen current={current} next={next} navigation={navigation} />;
+  };
+
+const screenGroups: Record<string, { screens: InnerScreenName[]; headerColor: string; contentColor: string }> = {
+  First: {
+    screens: ['Inner11', 'Inner12', 'Inner13'],
+    headerColor: Colors.BlueLight80,
+    contentColor: Colors.BlueLight40,
+  },
+  Second: {
+    screens: ['Inner21', 'Inner22', 'Inner23'],
+    headerColor: Colors.GreenLight80,
+    contentColor: Colors.GreenLight40,
+  },
+  Third: {
+    screens: ['Inner31', 'Inner32', 'Inner33'],
+    headerColor: Colors.YellowLight80,
+    contentColor: Colors.YellowLight40,
+  },
+};
+
+const createStack = (groupKey: keyof typeof screenGroups) => {
+  const { screens, headerColor, contentColor } = screenGroups[groupKey];
+
+  return () => (
+    <Stack.Navigator
+      screenOptions={{
+        title: groupKey,
+        headerStyle: { backgroundColor: headerColor },
+        contentStyle: { backgroundColor: contentColor },
+      }}
+    >
+      {screens.map((screen, index) => {
+        const nextScreen = screens[index + 1];
+        return (
+          <Stack.Screen
+            key={screen}
+            name={screen}
+            component={createScreen(screen, nextScreen)}
+          />
+        );
+      })}
+    </Stack.Navigator>
+  );
+};
+
+const tabOptions = {
+  tabBarIcon: () => null,
+};
+
+const RootTabs = () => (
+  <Tab.Navigator screenOptions={{ headerShown: false }}>
+    <Tab.Screen name="First" component={createStack('First')} options={tabOptions} />
+    <Tab.Screen name="Second" component={createStack('Second')} options={tabOptions} />
+    <Tab.Screen name="Third" component={createStack('Third')} options={tabOptions} />
+  </Tab.Navigator>
+);
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <NavigationContainer>
+        <RootTabs />
+      </NavigationContainer>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

apps/src/tests/index.ts

@@ -143,6 +143,7 @@ export { default as Test2926 } from './Test2926'; // [E2E created](iOS): PR rela
 export { default as Test2949 } from './Test2949'; // [E2E skipped]: can't check system bars styles
 export { default as Test2963 } from './Test2963'; // [E2E created](iOS): issue related to iOS
 export { default as Test3004 } from './Test3004';
+export { default as Test3006 } from './Test3006';
 export { default as Test3045 } from './Test3045';
 export { default as Test3074 } from './Test3074';
 export { default as Test3093 } from './Test3093';