react-native-screens 4.4.0 → 4.6.0-beta.0

package/README.md

@@ -106,18 +106,17 @@ Screens are already integrated with the React Native's most popular navigation l
 
 ## Supported react-native version
 
+Below we present tables with mapping of the library version to the last supported react-native version. These tables are for the `4.x` line of the library. For compat tables 
+of `3.x` line please see consult [readme on the `3.x` branch](https://github.com/software-mansion/react-native-screens/tree/3.x?tab=readme-ov-file#supported-react-native-version).
+
 ### Support for Paper
 
 Paper is the default rendering system for React Native versions prior to 0.76.
 
 | library version | react-native version |
 | --------------- | -------------------- |
-| 3.33.0+         | 0.72.0+              |
-| 3.32.0+         | 0.71.0+              |
-| 3.30.0+         | 0.68.0+              |
-| 3.14.0+         | 0.64.0+              |
-| 3.0.0+          | 0.62.0+              |
-| 2.0.0+          | 0.60.0+              |
+| 4.5.0+          | 0.74.0+              |
+| 4.0.0+          | 0.72.0+              |
 
 ### Support for Fabric
 
@@ -127,14 +126,8 @@ Here's a table with summary of supported `react-native` versions when Fabric is
 
 | library version | react-native version |
 | --------------- | -------------------- |
-| 3.35.0+         | 0.76.0+              |
-| 3.33.0+         | 0.75.0+              |
-| 3.32.0+         | 0.74.0+              |
-| 3.28.0+         | 0.73.0+              |
-| 3.21.0+         | 0.72.0+              |
-| 3.19.0+         | 0.71.0+              |
-| 3.18.0+         | 0.70.0+              |
-| 3.14.0+         | 0.69.0+              |
+| 4.5.0+          | 0.77.0+              |
+| 4.0.0+          | 0.76.0+              |
 
 ## Usage with [react-navigation](https://github.com/react-navigation/react-navigation)
 

package/android/build.gradle

@@ -99,13 +99,7 @@ def IS_NEW_ARCHITECTURE_ENABLED = isNewArchitectureEnabled()
 
 android {
     compileSdkVersion safeExtGet('compileSdkVersion', rnsDefaultCompileSdkVersion)
-    def agpVersion = Version.ANDROID_GRADLE_PLUGIN_VERSION
-    if (agpVersion.tokenize('.')[0].toInteger() >= 7) {
-        namespace "com.swmansion.rnscreens"
-        buildFeatures {
-            buildConfig true
-        }
-    }
+    namespace "com.swmansion.rnscreens"
 
     // Used to override the NDK path/version on internal CI or by allowing
     // users to customize the NDK path/version from their root project (e.g. for M1 support)
@@ -134,6 +128,7 @@ android {
     }
     buildFeatures {
         prefab true
+        buildConfig true
     }
     externalNativeBuild {
         cmake {
@@ -159,7 +154,13 @@ android {
                 "**/libc++_shared.so",
                 "**/libreact_render*.so",
                 "**/libreactnativejni.so",
-                "**/libreact_performance_timeline.so"
+                "**/libreact_performance_timeline.so",
+                // In 0.76 multiple react-native's libraries were merged and these are the main new artifacts we're using.
+                // Some of above lib* names could be removed after we remove support for 0.76.
+                // https://github.com/facebook/react-native/pull/43909
+                // https://github.com/facebook/react-native/pull/46059
+                "**/libfbjni.so", 
+                "**/libreactnative.so"
         ]
     }
     sourceSets.main {

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

@@ -14,6 +14,8 @@ abstract class FabricEnabledHeaderConfigViewGroup(
 ) : ViewGroup(context) {
     private var mStateWrapper: StateWrapper? = null
 
+    private var lastWidth = 0f
+    private var lastHeight = 0f
     private var lastPaddingStart = 0f
     private var lastPaddingEnd = 0f
 
@@ -21,36 +23,55 @@ abstract class FabricEnabledHeaderConfigViewGroup(
         mStateWrapper = wrapper
     }
 
-    fun updatePaddingsFabric(
+    fun updatePaddings(
         paddingStart: Int,
         paddingEnd: Int,
     ) {
-        updateState(paddingStart, paddingEnd)
+        // Do nothing on Fabric. This method is used only on Paper.
+    }
+
+    fun updateHeaderConfigState(
+        width: Int,
+        height: Int,
+        paddingStart: Int,
+        paddingEnd: Int,
+    ) {
+        updateState(width, height, paddingStart, paddingEnd)
     }
 
     @UiThread
     fun updateState(
+        width: Int,
+        height: Int,
         paddingStart: Int,
         paddingEnd: Int,
     ) {
-        val paddingStartDip: Float = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
-        val paddingEndDip: Float = PixelUtil.toDIPFromPixel(paddingEnd.toFloat())
+        val realWidth: Float = PixelUtil.toDIPFromPixel(width.toFloat())
+        val realHeight: Float = PixelUtil.toDIPFromPixel(height.toFloat())
+        val realPaddingStart: Float = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
+        val realPaddingEnd: Float = PixelUtil.toDIPFromPixel(paddingEnd.toFloat())
 
         // Check incoming state values. If they're already the correct value, return early to prevent
         // infinite UpdateState/SetState loop.
-        if (abs(lastPaddingStart - paddingStart) < DELTA &&
-            abs(lastPaddingEnd - paddingEnd) < DELTA
+        if (abs(lastWidth - realWidth) < DELTA &&
+            abs(lastHeight - realHeight) < DELTA &&
+            abs(lastPaddingStart - realPaddingStart) < DELTA &&
+            abs(lastPaddingEnd - realPaddingEnd) < DELTA
         ) {
             return
         }
 
-        lastPaddingStart = paddingStartDip
-        lastPaddingEnd = paddingEndDip
+        lastWidth = realWidth
+        lastHeight = realHeight
+        lastPaddingStart = realPaddingStart
+        lastPaddingEnd = realPaddingEnd
 
         val map: WritableMap =
             WritableNativeMap().apply {
-                putDouble("paddingStart", paddingStartDip.toDouble())
-                putDouble("paddingEnd", paddingEndDip.toDouble())
+                putDouble("frameWidth", realWidth.toDouble())
+                putDouble("frameHeight", realHeight.toDouble())
+                putDouble("paddingStart", realPaddingStart.toDouble())
+                putDouble("paddingEnd", realPaddingEnd.toDouble())
             }
         mStateWrapper?.updateState(map)
     }

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

@@ -0,0 +1,51 @@
+package com.swmansion.rnscreens
+
+import android.content.Context
+import android.view.ViewGroup
+import androidx.annotation.UiThread
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.StateWrapper
+
+abstract class FabricEnabledHeaderSubviewViewGroup(
+    context: Context?,
+) : ViewGroup(context) {
+    private var mStateWrapper: StateWrapper? = null
+
+    fun setStateWrapper(wrapper: StateWrapper?) {
+        mStateWrapper = wrapper
+    }
+
+    protected fun updateSubviewFrameState(
+        width: Int,
+        height: Int,
+        offsetX: Int,
+        offsetY: Int,
+    ) {
+        updateState(width, height, offsetX, offsetY)
+    }
+
+    @UiThread
+    fun updateState(
+        width: Int,
+        height: Int,
+        offsetX: Int,
+        offsetY: Int,
+    ) {
+        val realWidth: Float = PixelUtil.toDIPFromPixel(width.toFloat())
+        val realHeight: Float = PixelUtil.toDIPFromPixel(height.toFloat())
+        val offsetXDip: Float = PixelUtil.toDIPFromPixel(offsetX.toFloat())
+        val offsetYDip: Float = PixelUtil.toDIPFromPixel(offsetY.toFloat())
+
+        val map: WritableMap =
+            WritableNativeMap().apply {
+                putDouble("frameWidth", realWidth.toDouble())
+                putDouble("frameHeight", realHeight.toDouble())
+                putDouble("contentOffsetX", offsetXDip.toDouble())
+                putDouble("contentOffsetY", offsetYDip.toDouble())
+            }
+
+        mStateWrapper?.updateState(map)
+    }
+}

package/android/src/main/AndroidManifest.xml

@@ -1,5 +1,4 @@
 
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          package="com.swmansion.rnscreens">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
 </manifest>

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

@@ -68,8 +68,18 @@ open class CustomToolbar(
     ) {
         super.onLayout(changed, l, t, r, b)
 
-        // our children are already laid out
+        if (!changed) {
+            return
+        }
+
         val contentInsetStart = if (navigationIcon != null) contentInsetStartWithNavigation else contentInsetStart
-        config.updatePaddingsFabric(contentInsetStart, contentInsetEnd)
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            val width = r - l;
+            val height = b - t;
+            config.updateHeaderConfigState(width, height, contentInsetStart, contentInsetEnd)
+        } else {
+            // our children are already laid out
+            config.updatePaddings(contentInsetStart, contentInsetEnd)
+        }
     }
 }

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

@@ -1,6 +1,6 @@
 package com.swmansion.rnscreens
 
-import com.facebook.react.TurboReactPackage
+import com.facebook.react.BaseReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.module.annotations.ReactModuleList
@@ -9,12 +9,14 @@ import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
 import com.swmansion.rnscreens.utils.ScreenDummyLayoutHelper
 
+// Fool autolinking for older versions that do not support BaseReactPackage.
+// public class RNScreensPackage implements TurboReactPackage {
 @ReactModuleList(
     nativeModules = [
         ScreensModule::class,
     ],
 )
-class RNScreensPackage : TurboReactPackage() {
+class RNScreensPackage : BaseReactPackage() {
     // We just retain it here. This object helps us tackle jumping content when using native header.
     // See: https://github.com/software-mansion/react-native-screens/pull/2169
     private var screenDummyLayoutHelper: ScreenDummyLayoutHelper? = null

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

@@ -17,12 +17,9 @@ 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.ReactClippingViewGroup
 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.ReactHorizontalScrollView
-import com.facebook.react.views.scroll.ReactScrollView
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.shape.CornerFamily
 import com.google.android.material.shape.MaterialShapeDrawable
@@ -404,29 +401,6 @@ class Screen(
                 }
 
                 if (child is ViewGroup) {
-                    // The children are miscounted when there's removeClippedSubviews prop
-                    // set to true (which is the default for FlatLists).
-                    // Unless the child is a ScrollView it's safe to assume that it's true
-                    // and add a simple view for each possibly clipped item to make it work as expected.
-                    // See https://github.com/software-mansion/react-native-screens/pull/2495
-
-                    if (child is ReactClippingViewGroup &&
-                        child.removeClippedSubviews &&
-                        child !is ReactScrollView &&
-                        child !is ReactHorizontalScrollView
-                    ) {
-                        // We need to workaround the issue until our changes land in core.
-                        // Some views do not accept any children or have set amount and they throw
-                        // when we want to brute-forcefully manipulate that.
-                        // Is this ugly? Very. Do we have better option before changes land in core?
-                        // I'm not aware of any.
-                        try {
-                            for (j in 0 until child.childCount) {
-                                child.addView(View(context))
-                            }
-                        } catch (_: Exception) {
-                        }
-                    }
                     startTransitionRecursive(child)
                 }
             }

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

@@ -3,12 +3,11 @@ package com.swmansion.rnscreens
 import android.annotation.SuppressLint
 import android.view.View
 import com.facebook.react.bridge.ReactContext
-import com.facebook.react.views.view.ReactViewGroup
 
 @SuppressLint("ViewConstructor")
 class ScreenStackHeaderSubview(
     context: ReactContext?,
-) : ReactViewGroup(context) {
+) : FabricEnabledHeaderSubviewViewGroup(context) {
     private var reactWidth = 0
     private var reactHeight = 0
     var type = Type.RIGHT
@@ -37,11 +36,17 @@ class ScreenStackHeaderSubview(
 
     override fun onLayout(
         changed: Boolean,
-        left: Int,
-        top: Int,
-        right: Int,
-        bottom: Int,
-    ) = Unit
+        l: Int,
+        t: Int,
+        r: Int,
+        b: Int,
+    ) {
+        if (changed && BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            val width = r - l
+            val height = b - t
+            updateSubviewFrameState(width, height, l, t)
+        }
+    }
 
     enum class Type {
         LEFT,

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

@@ -2,6 +2,8 @@ package com.swmansion.rnscreens
 
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException
 import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
@@ -39,6 +41,17 @@ class ScreenStackHeaderSubviewManager :
             }
     }
 
+    override fun updateState(
+        view: ScreenStackHeaderSubview,
+        props: ReactStylesDiffMap?,
+        stateWrapper: StateWrapper?
+    ): Any? {
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            view.setStateWrapper(stateWrapper)
+        }
+        return super.updateState(view, props, stateWrapper)
+    }
+
     protected override fun getDelegate(): ViewManagerDelegate<ScreenStackHeaderSubview> = delegate
 
     companion object {

package/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenContainerManagerDelegate.java

@@ -11,10 +11,11 @@ package com.facebook.react.viewmanagers;
 
 import android.view.View;
 import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.BaseViewManager;
 import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.BaseViewManagerInterface;
+import com.facebook.react.uimanager.LayoutShadowNode;
 
-public class RNSScreenContainerManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & RNSScreenContainerManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+public class RNSScreenContainerManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & RNSScreenContainerManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
   public RNSScreenContainerManagerDelegate(U viewManager) {
     super(viewManager);
   }

package/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenContentWrapperManagerDelegate.java

@@ -11,10 +11,11 @@ package com.facebook.react.viewmanagers;
 
 import android.view.View;
 import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.BaseViewManager;
 import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.BaseViewManagerInterface;
+import com.facebook.react.uimanager.LayoutShadowNode;
 
-public class RNSScreenContentWrapperManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & RNSScreenContentWrapperManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+public class RNSScreenContentWrapperManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & RNSScreenContentWrapperManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
   public RNSScreenContentWrapperManagerDelegate(U viewManager) {
     super(viewManager);
   }

package/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenFooterManagerDelegate.java

@@ -11,10 +11,11 @@ package com.facebook.react.viewmanagers;
 
 import android.view.View;
 import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.BaseViewManager;
 import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.BaseViewManagerInterface;
+import com.facebook.react.uimanager.LayoutShadowNode;
 
-public class RNSScreenFooterManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & RNSScreenFooterManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+public class RNSScreenFooterManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & RNSScreenFooterManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
   public RNSScreenFooterManagerDelegate(U viewManager) {
     super(viewManager);
   }

package/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenManagerDelegate.java

@@ -14,10 +14,11 @@ import androidx.annotation.Nullable;
 import com.facebook.react.bridge.ColorPropConverter;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.BaseViewManager;
 import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.BaseViewManagerInterface;
+import com.facebook.react.uimanager.LayoutShadowNode;
 
-public class RNSScreenManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & RNSScreenManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+public class RNSScreenManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & RNSScreenManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
   public RNSScreenManagerDelegate(U viewManager) {
     super(viewManager);
   }

package/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderConfigManagerDelegate.java

@@ -12,10 +12,11 @@ package com.facebook.react.viewmanagers;
 import android.view.View;
 import androidx.annotation.Nullable;
 import com.facebook.react.bridge.ColorPropConverter;
+import com.facebook.react.uimanager.BaseViewManager;
 import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.BaseViewManagerInterface;
+import com.facebook.react.uimanager.LayoutShadowNode;
 
-public class RNSScreenStackHeaderConfigManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & RNSScreenStackHeaderConfigManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+public class RNSScreenStackHeaderConfigManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & RNSScreenStackHeaderConfigManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
   public RNSScreenStackHeaderConfigManagerDelegate(U viewManager) {
     super(viewManager);
   }

package/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderSubviewManagerDelegate.java

@@ -11,10 +11,11 @@ package com.facebook.react.viewmanagers;
 
 import android.view.View;
 import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.BaseViewManager;
 import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.BaseViewManagerInterface;
+import com.facebook.react.uimanager.LayoutShadowNode;
 
-public class RNSScreenStackHeaderSubviewManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & RNSScreenStackHeaderSubviewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+public class RNSScreenStackHeaderSubviewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & RNSScreenStackHeaderSubviewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
   public RNSScreenStackHeaderSubviewManagerDelegate(U viewManager) {
     super(viewManager);
   }

package/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackManagerDelegate.java

@@ -11,10 +11,11 @@ package com.facebook.react.viewmanagers;
 
 import android.view.View;
 import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.BaseViewManager;
 import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.BaseViewManagerInterface;
+import com.facebook.react.uimanager.LayoutShadowNode;
 
-public class RNSScreenStackManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & RNSScreenStackManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+public class RNSScreenStackManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & RNSScreenStackManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
   public RNSScreenStackManagerDelegate(U viewManager) {
     super(viewManager);
   }

package/android/src/paper/java/com/facebook/react/viewmanagers/RNSSearchBarManagerDelegate.java

@@ -13,10 +13,11 @@ import android.view.View;
 import androidx.annotation.Nullable;
 import com.facebook.react.bridge.ColorPropConverter;
 import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.uimanager.BaseViewManager;
 import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.BaseViewManagerInterface;
+import com.facebook.react.uimanager.LayoutShadowNode;
 
-public class RNSSearchBarManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & RNSSearchBarManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+public class RNSSearchBarManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & RNSSearchBarManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
   public RNSSearchBarManagerDelegate(U viewManager) {
     super(viewManager);
   }

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

@@ -16,7 +16,15 @@ abstract class FabricEnabledHeaderConfigViewGroup(
 
     fun setStateWrapper(wrapper: StateWrapper?) = Unit
 
-    fun updatePaddingsFabric(
+    // Do nothing on Paper. This method is used only on Fabric.
+    fun updateHeaderConfigState(
+        width: Int,
+        height: Int,
+        paddingStart: Int,
+        paddingEnd: Int,
+    ) = Unit
+
+    fun updatePaddings(
         paddingStart: Int,
         paddingEnd: Int,
     ) {

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

@@ -0,0 +1,18 @@
+package com.swmansion.rnscreens
+
+import android.content.Context
+import android.view.ViewGroup
+import com.facebook.react.uimanager.StateWrapper
+
+abstract class FabricEnabledHeaderSubviewViewGroup(context: Context?): ViewGroup(context) {
+
+    fun setStateWrapper(wrapper: StateWrapper?) = Unit
+
+    // Fabric only
+    protected fun updateSubviewFrameState(
+        width: Int,
+        height: Int,
+        offsetX: Int,
+        offsetY: Int
+    ) = Unit
+}

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

@@ -34,8 +34,18 @@ class RNSScreenStackHeaderConfigComponentDescriptor final
         shadowNode.getState());
     auto stateData = state->getData();
 
-    layoutableShadowNode.setPadding(
-        {stateData.getPaddingStart(), 0, stateData.getPaddingEnd(), 0});
+    if (stateData.frameSize.width != 0 && stateData.frameSize.height != 0) {
+      layoutableShadowNode.setSize(
+          {stateData.frameSize.width, stateData.frameSize.height});
+#ifdef ANDROID
+      layoutableShadowNode.setPadding({
+          stateData.paddingStart,
+          0,
+          stateData.paddingEnd,
+          0,
+      });
+#endif // ANDROID
+    }
 
     ConcreteComponentDescriptor::adopt(shadowNode);
 #if !defined(ANDROID) && !defined(NDEBUG)

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

@@ -5,6 +5,18 @@ namespace facebook::react {
 extern const char RNSScreenStackHeaderConfigComponentName[] =
     "RNSScreenStackHeaderConfig";
 
+void RNSScreenStackHeaderConfigShadowNode::layout(LayoutContext layoutContext) {
+  YogaLayoutableShadowNode::layout(layoutContext);
+  applyFrameCorrections();
+}
+
+void RNSScreenStackHeaderConfigShadowNode::applyFrameCorrections() {
+  ensureUnsealed();
+
+  const auto &stateData = getStateData();
+  layoutMetrics_.frame.origin.y = -stateData.frameSize.height;
+}
+
 #if !defined(ANDROID) && !defined(NDEBUG)
 void RNSScreenStackHeaderConfigShadowNode::setImageLoader(
     std::weak_ptr<void> imageLoader) {

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

@@ -25,13 +25,17 @@ class JSI_EXPORT RNSScreenStackHeaderConfigShadowNode final
   using StateData = ConcreteViewShadowNode::ConcreteStateData;
 
 #pragma mark - ShadowNode overrides
+  void layout(LayoutContext layoutContext) override;
 
 #pragma mark - Custom interface
+
 #if !defined(ANDROID) && !defined(NDEBUG)
   void setImageLoader(std::weak_ptr<void> imageLoader);
 #endif // !ANDROID && !NDEBUG
 
  private:
+  void applyFrameCorrections();
+
 #if !defined(ANDROID) && !defined(NDEBUG)
   StateData &getStateDataMutable();
 #endif // !ANDROID && !NDEBUG

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

@@ -1,3 +1,4 @@
+
 #include "RNSScreenStackHeaderConfigState.h"
 
 namespace facebook {
@@ -5,8 +6,9 @@ namespace react {
 
 #ifdef ANDROID
 folly::dynamic RNSScreenStackHeaderConfigState::getDynamic() const {
-  return folly::dynamic::object("paddingStart", paddingStart_)(
-      "paddingEnd_", paddingEnd_);
+  return folly::dynamic::object("frameWidth", frameSize.width)(
+      "frameHeight", frameSize.height)("paddingStart", paddingStart)(
+      "paddingEnd", paddingEnd);
 }
 #else // ANDROID
 #ifndef NDEBUG
@@ -22,13 +24,5 @@ std::weak_ptr<void> RNSScreenStackHeaderConfigState::getImageLoader()
 #endif // !NDEBUG
 #endif // ANDROID
 
-Float RNSScreenStackHeaderConfigState::getPaddingStart() const noexcept {
-  return paddingStart_;
-}
-
-Float RNSScreenStackHeaderConfigState::getPaddingEnd() const noexcept {
-  return paddingEnd_;
-}
-
 } // namespace react
 } // namespace facebook