react-native-screens 4.0.0-beta.0 → 4.0.0-beta.1

package/README.md

@@ -188,7 +188,7 @@ To take advantage of the native stack navigator primitive for React Navigation t
 
 ## `FullWindowOverlay`
 
-Native `iOS` component for rendering views straight under the `Window`. Based on `RCTPerfMonitor`. You should treat it as a wrapper, providing full-screen, transparent view which receives no props and should ideally render one child `View`, being the root of its view hierarchy. For the example usage, see https://github.com/software-mansion/react-native-screens/blob/main/TestsExample/src/Test1096.tsx
+Native `iOS` component for rendering views straight under the `Window`. Based on `RCTPerfMonitor`. You should treat it as a wrapper, providing full-screen, transparent view which receives no props and should ideally render one child `View`, being the root of its view hierarchy. For the example usage, see https://github.com/software-mansion/react-native-screens/blob/main/apps/src/tests/Test1096.tsx
 
 ## Interop with [react-native-navigation](https://github.com/wix/react-native-navigation)
 

package/android/build.gradle

@@ -9,7 +9,11 @@ buildscript {
         rnsDefaultKotlinVersion = '1.8.0'
     }
     ext.safeExtGet = {prop, fallback ->
-        rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+        def props = (prop instanceof String) ? [prop] : prop
+        def result = props.find { key ->
+            return rootProject.ext.has(key)
+        }
+        return result ? rootProject.ext.get(result) : fallback
     }
     repositories {
         google()
@@ -77,8 +81,8 @@ android {
     }
 
     defaultConfig {
-        minSdkVersion safeExtGet('minSdkVersion', rnsDefaultMinSdkVersion)
-        targetSdkVersion safeExtGet('targetSdkVersion', rnsDefaultTargetSdkVersion)
+        minSdkVersion safeExtGet(['minSdkVersion', 'minSdk'], rnsDefaultMinSdkVersion)
+        targetSdkVersion safeExtGet(['targetSdkVersion', 'targetSdk'], rnsDefaultTargetSdkVersion)
         versionCode 1
         versionName "1.0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", IS_NEW_ARCHITECTURE_ENABLED.toString()
@@ -136,7 +140,7 @@ android {
             }
         }
         res {
-            if (safeExtGet('compileSdkVersion', rnsDefaultCompileSdkVersion) >= 33) {
+            if (safeExtGet(['compileSdkVersion', 'compileSdk'], rnsDefaultCompileSdkVersion) >= 33) {
                 srcDirs = ["${androidResDir}/base", "${androidResDir}/v33"]
             } else {
                 srcDirs = ["${androidResDir}/base"]
@@ -148,10 +152,26 @@ android {
 repositories {
     maven {
         // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-        // Matches the RN Hello World template
+
+        // First look for the standard location of react-native, as in RN Hello World template
         // https://github.com/facebook/react-native/blob/1e8f3b11027fe0a7514b4fc97d0798d3c64bc895/local-cli/templates/HelloWorld/android/build.gradle#L21
-        url "$projectDir/../node_modules/react-native/android"
+        // TODO(kkafar): Note, that in latest template app https://github.com/react-native-community/template/blob/0f4745b7a9d84232aeedec2def8d75ab9b050d11/template/android/build.gradle
+        // this is not specified at all.
+        File standardRnAndroidDirLocation = file("$rootDir/../node_modules/react-native/android")
+        if (standardRnAndroidDirLocation.exists()) {
+            url standardRnAndroidDirLocation
+        } else {
+            // We're in non standard setup - try to use node resolver to locate the react-native package.
+            File reactNativePackage = file(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim())
+            def rnAndroidDirLocation = "$reactNativePackage.parentFile/android"
+            if (reactNativePackage.exists()) {
+                url rnAndroidDirLocation
+            } else {
+                println "[RNScreens] Failed to resolve react-native directory. Attempted locations: ${standardRnAndroidDirLocation}, ${rnAndroidDirLocation}"
+            }
+        }
     }
+
     mavenCentral()
     mavenLocal()
     google()

package/android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt

@@ -24,7 +24,7 @@ abstract class FabricEnabledViewGroup(
     protected fun updateScreenSizeFabric(
         width: Int,
         height: Int,
-        headerHeight: Double,
+        headerHeight: Int,
     ) {
         updateState(width, height, headerHeight)
     }
@@ -33,10 +33,11 @@ abstract class FabricEnabledViewGroup(
     fun updateState(
         width: Int,
         height: Int,
-        headerHeight: Double,
+        headerHeight: Int,
     ) {
         val realWidth: Float = PixelUtil.toDIPFromPixel(width.toFloat())
         val realHeight: Float = PixelUtil.toDIPFromPixel(height.toFloat())
+        val realHeaderHeight: Float = PixelUtil.toDIPFromPixel(headerHeight.toFloat())
 
         // Check incoming state values. If they're already the correct value, return early to prevent
         // infinite UpdateState/SetState loop.
@@ -54,7 +55,7 @@ abstract class FabricEnabledViewGroup(
                 putDouble("frameWidth", realWidth.toDouble())
                 putDouble("frameHeight", realHeight.toDouble())
                 putDouble("contentOffsetX", 0.0)
-                putDouble("contentOffsetY", headerHeight)
+                putDouble("contentOffsetY", realHeaderHeight.toDouble())
             }
         mStateWrapper?.updateState(map)
     }

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

@@ -2,11 +2,50 @@ package com.swmansion.rnscreens
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.os.Build
 import androidx.appcompat.widget.Toolbar
+import com.facebook.react.modules.core.ChoreographerCompat
+import com.facebook.react.modules.core.ReactChoreographer
 
 // This class is used to store config closer to search bar
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
 open class CustomToolbar(
     context: Context,
     val config: ScreenStackHeaderConfig,
-) : Toolbar(context)
+) : Toolbar(context) {
+    private var isLayoutEnqueued = false
+    private val layoutCallback: ChoreographerCompat.FrameCallback =
+        object : ChoreographerCompat.FrameCallback() {
+            override fun doFrame(frameTimeNanos: Long) {
+                isLayoutEnqueued = false
+                measure(
+                    MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+                    MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+                )
+                layout(left, top, right, bottom)
+            }
+        }
+
+    override fun requestLayout() {
+        super.requestLayout()
+        if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.Q) {
+            // Below Android API 29, layout is not being requested when subviews are being added to the layout,
+            // leading to having their subviews in position 0,0 of the toolbar (as Android don't calculate
+            // the position of each subview, even if Yoga has correctly set their width and height).
+            // This is mostly the issue, when windowSoftInputMode is set to adjustPan in AndroidManifest.
+            // Thus, we're manually calling the layout **after** the current layout.
+            @Suppress("SENSELESS_COMPARISON") // mLayoutCallback can be null here since this method can be called in init
+            if (!isLayoutEnqueued && layoutCallback != null) {
+                isLayoutEnqueued = true
+                // we use NATIVE_ANIMATED_MODULE choreographer queue because it allows us to catch the current
+                // looper loop instead of enqueueing the update in the next loop causing a one frame delay.
+                ReactChoreographer
+                    .getInstance()
+                    .postFrameCallback(
+                        ReactChoreographer.CallbackType.NATIVE_ANIMATED_MODULE,
+                        layoutCallback,
+                    )
+            }
+        }
+    }
+}

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

@@ -5,20 +5,21 @@ import android.content.pm.ActivityInfo
 import android.graphics.Paint
 import android.os.Parcelable
 import android.util.SparseArray
-import android.util.TypedValue
 import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
 import android.webkit.WebView
+import android.widget.ImageView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.view.children
 import androidx.fragment.app.Fragment
+import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
 import com.facebook.react.bridge.GuardedRunnable
 import com.facebook.react.bridge.ReactContext
-import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.views.scroll.ReactScrollView
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.swmansion.rnscreens.events.HeaderHeightChangeEvent
 import com.swmansion.rnscreens.events.SheetDetentChangedEvent
@@ -140,17 +141,14 @@ class Screen(
             val width = r - l
             val height = b - t
 
-            val headerHeight = calculateHeaderHeight()
-            val totalHeight =
-                headerHeight.first + headerHeight.second // action bar height + status bar height
             if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-                updateScreenSizeFabric(width, height, totalHeight)
+                updateScreenSizeFabric(width, height, t)
             } else {
                 updateScreenSizePaper(width, height)
             }
 
             footer?.onParentLayout(changed, l, t, r, b, container!!.height)
-            notifyHeaderHeightChange(totalHeight)
+            notifyHeaderHeightChange(t)
         }
     }
 
@@ -367,7 +365,7 @@ class Screen(
         parent?.let {
             for (i in 0 until it.childCount) {
                 val child = it.getChildAt(i)
-                if (child.javaClass.simpleName.equals("CircleImageView")) {
+                if (parent is SwipeRefreshLayout && child is ImageView) {
                     // SwipeRefreshLayout class which has CircleImageView as a child,
                     // does not handle `startViewTransition` properly.
                     // It has a custom `getChildDrawingOrder` method which returns
@@ -384,38 +382,22 @@ class Screen(
                     startTransitionRecursive(child.toolbar)
                 }
                 if (child is ViewGroup) {
+                    // The children are miscounted when there's a FlatList with
+                    // removeCLippedSubviews set to true (default).
+                    // We add a simple view for each item in the list to make it work as expected.
+                    // See https://github.com/software-mansion/react-native-screens/issues/2282
+                    if (it is ReactScrollView && it.removeClippedSubviews) {
+                        for (j in 0 until child.childCount) {
+                            child.addView(View(context))
+                        }
+                    }
                     startTransitionRecursive(child)
                 }
             }
         }
     }
 
-    private fun calculateHeaderHeight(): Pair<Double, Double> {
-        val actionBarTv = TypedValue()
-        val resolvedActionBarSize =
-            context.theme.resolveAttribute(android.R.attr.actionBarSize, actionBarTv, true)
-
-        // Check if it's possible to get an attribute from theme context and assign a value from it.
-        // Otherwise, the default value will be returned.
-        val actionBarHeight =
-            TypedValue
-                .complexToDimensionPixelSize(actionBarTv.data, resources.displayMetrics)
-                .takeIf { resolvedActionBarSize && headerConfig?.isHeaderHidden != true && headerConfig?.isHeaderTranslucent != true }
-                ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() } ?: 0.0
-
-        val statusBarHeight =
-            context.resources
-                .getIdentifier("status_bar_height", "dimen", "android")
-                // Count only status bar when action bar is visible and status bar is not hidden
-                .takeIf { it > 0 && isStatusBarHidden != true && actionBarHeight > 0 }
-                ?.let { (context.resources::getDimensionPixelSize)(it) }
-                ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() }
-                ?: 0.0
-
-        return actionBarHeight to statusBarHeight
-    }
-
-    private fun notifyHeaderHeightChange(headerHeight: Double) {
+    private fun notifyHeaderHeightChange(headerHeight: Int) {
         val screenContext = context as ReactContext
         val surfaceId = UIManagerHelper.getSurfaceId(screenContext)
         UIManagerHelper
@@ -454,6 +436,8 @@ class Screen(
         SLIDE_FROM_LEFT,
         FADE_FROM_BOTTOM,
         IOS,
+        IOS_FROM_RIGHT,
+        IOS_FROM_LEFT,
     }
 
     enum class ReplaceAnimation {

package/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt

@@ -182,7 +182,9 @@ class ScreenStack(
                                 R.anim.rns_no_animation_medium,
                             )
                         StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_fade_from_bottom, R.anim.rns_no_animation_350)
-                        StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_slide_in_from_right_ios, R.anim.rns_slide_out_to_left_ios)
+                        StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_open, R.anim.rns_ios_from_right_background_open)
+                        StackAnimation.IOS_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_open, R.anim.rns_ios_from_right_background_open)
+                        StackAnimation.IOS_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_ios_from_left_foreground_open, R.anim.rns_ios_from_left_background_open)
                     }
                 } else {
                     when (stackAnimation) {
@@ -220,7 +222,9 @@ class ScreenStack(
                                 R.anim.rns_slide_out_to_bottom,
                             )
                         StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_no_animation_250, R.anim.rns_fade_to_bottom)
-                        StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_slide_in_from_left_ios, R.anim.rns_slide_out_to_right_ios)
+                        StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_close, R.anim.rns_ios_from_right_background_close)
+                        StackAnimation.IOS_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_ios_from_right_background_close, R.anim.rns_ios_from_right_foreground_close)
+                        StackAnimation.IOS_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_ios_from_left_background_close, R.anim.rns_ios_from_left_foreground_close)
                     }
                 }
             }
@@ -413,6 +417,8 @@ class ScreenStack(
             Build.VERSION.SDK_INT >= 33 ||
                 fragmentWrapper.screen.stackAnimation === StackAnimation.SLIDE_FROM_BOTTOM ||
                 fragmentWrapper.screen.stackAnimation === StackAnimation.FADE_FROM_BOTTOM ||
-                fragmentWrapper.screen.stackAnimation === StackAnimation.IOS
+                fragmentWrapper.screen.stackAnimation === StackAnimation.IOS ||
+                fragmentWrapper.screen.stackAnimation === StackAnimation.IOS_FROM_RIGHT ||
+                fragmentWrapper.screen.stackAnimation === StackAnimation.IOS_FROM_LEFT
     }
 }

package/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt

@@ -87,7 +87,6 @@ open class ScreenViewManager :
         stateWrapper: StateWrapper?,
     ): Any? {
         if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-            // fabricViewStateManager should never be null in Fabric. The null check is only for Paper's empty impl.
             view.setStateWrapper(stateWrapper)
         }
         return super.updateState(view, props, stateWrapper)
@@ -144,6 +143,8 @@ open class ScreenViewManager :
                 "slide_from_bottom" -> Screen.StackAnimation.SLIDE_FROM_BOTTOM
                 "fade_from_bottom" -> Screen.StackAnimation.FADE_FROM_BOTTOM
                 "ios" -> Screen.StackAnimation.IOS
+                "ios_from_right" -> Screen.StackAnimation.IOS_FROM_RIGHT
+                "ios_from_left" -> Screen.StackAnimation.IOS_FROM_LEFT
                 else -> throw JSApplicationIllegalArgumentException("Unknown animation type $animation")
             }
     }

package/android/src/main/java/com/swmansion/rnscreens/ScreenWindowTraits.kt

@@ -225,7 +225,7 @@ object ScreenWindowTraits {
         val window = activity.window
 
         val screenForNavBarTranslucent = findScreenForTrait(screen, WindowTraits.NAVIGATION_BAR_TRANSLUCENT)
-        val translucent = screenForNavBarTranslucent?.isNavigationBarTranslucent ?: false
+        val translucent = screenForNavBarTranslucent?.isNavigationBarTranslucent ?: return
 
         // Following method controls whether to display edge-to-edge content that draws behind the navigation bar
         WindowCompat.setDecorFitsSystemWindows(window, !translucent)

package/android/src/main/java/com/swmansion/rnscreens/events/HeaderHeightChangeEvent.kt

@@ -7,16 +7,16 @@ import com.facebook.react.uimanager.events.Event
 class HeaderHeightChangeEvent(
     surfaceId: Int,
     viewId: Int,
-    private val headerHeight: Double,
+    private val headerHeight: Int,
 ) : Event<HeaderHeightChangeEvent>(surfaceId, viewId) {
     override fun getEventName() = EVENT_NAME
 
     // As the same header height could appear twice, use header height as a coalescing key.
-    override fun getCoalescingKey(): Short = headerHeight.toInt().toShort()
+    override fun getCoalescingKey(): Short = headerHeight.toShort()
 
     override fun getEventData(): WritableMap? =
         Arguments.createMap().apply {
-            putDouble("headerHeight", headerHeight)
+            putDouble("headerHeight", headerHeight.toDouble())
         }
 
     companion object {

package/android/src/main/res/base/anim/rns_ios_from_left_background_close.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_shortAnimTime"
+    android:fromXDelta="30%"
+    android:toXDelta="0%" />

package/android/src/main/res/base/anim/{rns_slide_out_to_left_ios.xml → rns_ios_from_left_background_open.xml}

@@ -2,4 +2,4 @@
 <translate xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="@android:integer/config_shortAnimTime"
     android:fromXDelta="0%"
-    android:toXDelta="-30%"/>
+    android:toXDelta="30%" />

package/android/src/main/res/base/anim/rns_ios_from_left_foreground_close.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_shortAnimTime"
+    android:interpolator="@android:interpolator/accelerate_decelerate"
+    android:fromXDelta="0%"
+    android:toXDelta="-100%" />

package/android/src/main/res/base/anim/rns_ios_from_left_foreground_open.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_shortAnimTime"
+    android:interpolator="@android:interpolator/accelerate_decelerate"
+    android:fromXDelta="-100%"
+    android:toXDelta="0%" />

package/android/src/main/res/base/anim/rns_ios_from_right_background_open.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_shortAnimTime"
+    android:fromXDelta="0%"
+    android:toXDelta="-30%" />

package/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt

@@ -12,7 +12,7 @@ abstract class FabricEnabledViewGroup(
     protected fun updateScreenSizeFabric(
         width: Int,
         height: Int,
-        headerHeight: Double,
+        headerHeight: Int,
     ) {
         // do nothing
     }

package/common/cpp/react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h

@@ -5,9 +5,9 @@
 #endif
 #include <react/debug/react_native_assert.h>
 #include <react/renderer/components/rnscreens/Props.h>
+#include <react/renderer/components/rnscreens/utils/RectUtil.h>
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
 #include "RNSScreenShadowNode.h"
-#include "utils/RectUtil.h"
 
 namespace facebook {
 namespace react {
@@ -19,9 +19,6 @@ class RNSScreenComponentDescriptor final
  public:
   using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
 
-  static constexpr const char *kScreenDummyLayoutHelperClass =
-      "com/swmansion/rnscreens/utils/ScreenDummyLayoutHelper";
-
   void adopt(ShadowNode &shadowNode) const override {
     react_native_assert(dynamic_cast<RNSScreenShadowNode *>(&shadowNode));
     auto &screenShadowNode = static_cast<RNSScreenShadowNode &>(shadowNode);
@@ -39,8 +36,8 @@ class RNSScreenComponentDescriptor final
 #ifdef ANDROID
     if (stateData.frameSize.width != 0 && stateData.frameSize.height != 0) {
       // When we receive dimensions from JVM side we can remove padding used for
-      // correction, and we can stop applying height correction for the frame.
-      // We want to leave top offset correction though intact.
+      // correction, and we can stop applying height and offset corrections for
+      // the frame.
       // TODO: In future, when we have dynamic header height we might want to
       // update Y offset correction here.
 
@@ -67,36 +64,11 @@ class RNSScreenComponentDescriptor final
       screenShadowNode.setPadding({0, 0, 0, 0});
       screenShadowNode.getFrameCorrectionModes().unset(
           FrameCorrectionModes::Mode::FrameHeightCorrection);
+      screenShadowNode.getFrameCorrectionModes().unset(
+          FrameCorrectionModes::Mode::FrameOriginCorrection);
 
       layoutableShadowNode.setSize(
           Size{stateData.frameSize.width, stateData.frameSize.height});
-    } else {
-      // This code path should be executed only on the very first (few)
-      // layout(s), when we haven't received state update from JVM side yet.
-
-      auto headerConfigChildOpt = findHeaderConfigChild(layoutableShadowNode);
-
-      // During creation of the shadow node children are not attached yet.
-      // We also do not want to set any padding in case.
-      if (headerConfigChildOpt) {
-        const auto &headerConfigChild = headerConfigChildOpt->get();
-        const auto &headerProps =
-            *std::static_pointer_cast<const RNSScreenStackHeaderConfigProps>(
-                headerConfigChild->getProps());
-
-        const auto headerHeight = headerProps.hidden
-            ? 0.f
-            : findHeaderHeight(
-                  headerProps.titleFontSize, headerProps.title.empty())
-                  .value_or(0.f);
-
-        screenShadowNode.setPadding({0, 0, 0, headerHeight});
-        screenShadowNode.setHeaderHeight(headerHeight);
-        screenShadowNode.getFrameCorrectionModes().set(
-            FrameCorrectionModes::Mode(
-                FrameCorrectionModes::Mode::FrameHeightCorrection |
-                FrameCorrectionModes::Mode::FrameOriginCorrection));
-      }
     }
 #else
     if (stateData.frameSize.width != 0 && stateData.frameSize.height != 0) {
@@ -106,72 +78,6 @@ class RNSScreenComponentDescriptor final
 #endif // ANDROID
     ConcreteComponentDescriptor::adopt(shadowNode);
   }
-
-  std::optional<std::reference_wrapper<const ShadowNode::Shared>>
-  findHeaderConfigChild(
-      const YogaLayoutableShadowNode &screenShadowNode) const {
-    for (const ShadowNode::Shared &child : screenShadowNode.getChildren()) {
-      if (std::strcmp(
-              child->getComponentName(), "RNSScreenStackHeaderConfig") == 0) {
-        return {std::cref(child)};
-      }
-    }
-    return {};
-  }
-
-#ifdef ANDROID
-  std::optional<float> findHeaderHeight(
-      const int fontSize,
-      const bool isTitleEmpty) const {
-    JNIEnv *env = facebook::jni::Environment::current();
-
-    if (env == nullptr) {
-      LOG(ERROR) << "[RNScreens] Failed to retrieve env\n";
-      return {};
-    }
-
-    jclass layoutHelperClass = env->FindClass(kScreenDummyLayoutHelperClass);
-
-    if (layoutHelperClass == nullptr) {
-      LOG(ERROR) << "[RNScreens] Failed to find class with id "
-                 << kScreenDummyLayoutHelperClass;
-      return {};
-    }
-
-    jmethodID computeDummyLayoutID =
-        env->GetMethodID(layoutHelperClass, "computeDummyLayout", "(IZ)F");
-
-    if (computeDummyLayoutID == nullptr) {
-      LOG(ERROR)
-          << "[RNScreens] Failed to retrieve computeDummyLayout method ID";
-      return {};
-    }
-
-    jmethodID getInstanceMethodID = env->GetStaticMethodID(
-        layoutHelperClass,
-        "getInstance",
-        "()Lcom/swmansion/rnscreens/utils/ScreenDummyLayoutHelper;");
-
-    if (getInstanceMethodID == nullptr) {
-      LOG(ERROR) << "[RNScreens] Failed to retrieve getInstanceMethodID";
-      return {};
-    }
-
-    jobject packageInstance =
-        env->CallStaticObjectMethod(layoutHelperClass, getInstanceMethodID);
-
-    if (packageInstance == nullptr) {
-      LOG(ERROR)
-          << "[RNScreens] Failed to retrieve packageInstance or the package instance was null on JVM side";
-      return {};
-    }
-
-    jfloat headerHeight = env->CallFloatMethod(
-        packageInstance, computeDummyLayoutID, fontSize, isTitleEmpty);
-
-    return {headerHeight};
-  }
-#endif // ANDROID
 };
 
 } // namespace react

package/common/cpp/react/renderer/components/rnscreens/RNSScreenShadowNode.cpp

@@ -15,6 +15,107 @@ Point RNSScreenShadowNode::getContentOriginOffset(
   return {contentOffset.x, contentOffset.y};
 }
 
+std::optional<std::reference_wrapper<const ShadowNode::Shared>>
+findHeaderConfigChild(const YogaLayoutableShadowNode &screenShadowNode) {
+  for (const ShadowNode::Shared &child : screenShadowNode.getChildren()) {
+    if (std::strcmp(child->getComponentName(), "RNSScreenStackHeaderConfig") ==
+        0) {
+      return {std::cref(child)};
+    }
+  }
+  return {};
+}
+
+static constexpr const char *kScreenDummyLayoutHelperClass =
+    "com/swmansion/rnscreens/utils/ScreenDummyLayoutHelper";
+
+#ifdef ANDROID
+std::optional<float> findHeaderHeight(
+    const int fontSize,
+    const bool isTitleEmpty) {
+  JNIEnv *env = facebook::jni::Environment::current();
+
+  if (env == nullptr) {
+    LOG(ERROR) << "[RNScreens] Failed to retrieve env\n";
+    return {};
+  }
+
+  jclass layoutHelperClass = env->FindClass(kScreenDummyLayoutHelperClass);
+
+  if (layoutHelperClass == nullptr) {
+    LOG(ERROR) << "[RNScreens] Failed to find class with id "
+               << kScreenDummyLayoutHelperClass;
+    return {};
+  }
+
+  jmethodID computeDummyLayoutID =
+      env->GetMethodID(layoutHelperClass, "computeDummyLayout", "(IZ)F");
+
+  if (computeDummyLayoutID == nullptr) {
+    LOG(ERROR) << "[RNScreens] Failed to retrieve computeDummyLayout method ID";
+    return {};
+  }
+
+  jmethodID getInstanceMethodID = env->GetStaticMethodID(
+      layoutHelperClass,
+      "getInstance",
+      "()Lcom/swmansion/rnscreens/utils/ScreenDummyLayoutHelper;");
+
+  if (getInstanceMethodID == nullptr) {
+    LOG(ERROR) << "[RNScreens] Failed to retrieve getInstanceMethodID";
+    return {};
+  }
+
+  jobject packageInstance =
+      env->CallStaticObjectMethod(layoutHelperClass, getInstanceMethodID);
+
+  if (packageInstance == nullptr) {
+    LOG(ERROR)
+        << "[RNScreens] Failed to retrieve packageInstance or the package instance was null on JVM side";
+    return {};
+  }
+
+  jfloat headerHeight = env->CallFloatMethod(
+      packageInstance, computeDummyLayoutID, fontSize, isTitleEmpty);
+
+  return {headerHeight};
+}
+#endif // ANDROID
+
+void RNSScreenShadowNode::appendChild(const ShadowNode::Shared &child) {
+  YogaLayoutableShadowNode::appendChild(child);
+#ifdef ANDROID
+  const auto &stateData = getStateData();
+  if (stateData.frameSize.width == 0 || stateData.frameSize.height == 0) {
+    // This code path should be executed only on the very first (few)
+    // layout(s), when we haven't received state update from JVM side yet.
+    auto headerConfigChildOpt = findHeaderConfigChild(*this);
+    auto &screenShadowNode = static_cast<RNSScreenShadowNode &>(*this);
+
+    // During creation of the shadow node children are not attached yet.
+    // We also do not want to set any padding in case.
+    if (headerConfigChildOpt) {
+      const auto &headerConfigChild = headerConfigChildOpt->get();
+      const auto &headerProps =
+          *std::static_pointer_cast<const RNSScreenStackHeaderConfigProps>(
+              headerConfigChild->getProps());
+
+      const auto headerHeight = headerProps.hidden
+          ? 0.f
+          : findHeaderHeight(
+                headerProps.titleFontSize, headerProps.title.empty())
+                .value_or(0.f);
+
+      screenShadowNode.setPadding({0, 0, 0, headerHeight});
+      screenShadowNode.setHeaderHeight(headerHeight);
+      screenShadowNode.getFrameCorrectionModes().set(FrameCorrectionModes::Mode(
+          FrameCorrectionModes::Mode::FrameHeightCorrection |
+          FrameCorrectionModes::Mode::FrameOriginCorrection));
+    }
+  }
+#endif // ANDROID
+}
+
 void RNSScreenShadowNode::layout(facebook::react::LayoutContext layoutContext) {
   YogaLayoutableShadowNode::layout(layoutContext);
 

package/common/cpp/react/renderer/components/rnscreens/RNSScreenShadowNode.h

@@ -28,6 +28,8 @@ class JSI_EXPORT RNSScreenShadowNode final : public ConcreteViewShadowNode<
 
   Point getContentOriginOffset(bool includeTransform) const override;
 
+  void appendChild(const ShadowNode::Shared &child) override;
+
   void layout(LayoutContext layoutContext) override;
 
 #pragma mark - Custom interface