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

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

@@ -0,0 +1,61 @@
+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
+import kotlin.math.abs
+
+abstract class FabricEnabledHeaderConfigViewGroup(
+    context: Context?,
+) : ViewGroup(context) {
+    private var mStateWrapper: StateWrapper? = null
+
+    private var lastPaddingStart = 0f
+    private var lastPaddingEnd = 0f
+
+    fun setStateWrapper(wrapper: StateWrapper?) {
+        mStateWrapper = wrapper
+    }
+
+    fun updatePaddingsFabric(
+        paddingStart: Int,
+        paddingEnd: Int,
+    ) {
+        updateState(paddingStart, paddingEnd)
+    }
+
+    @UiThread
+    fun updateState(
+        paddingStart: Int,
+        paddingEnd: Int,
+    ) {
+        val paddingStartDip: Float = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
+        val paddingEndDip: 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
+        ) {
+            return
+        }
+
+        lastPaddingStart = paddingStartDip
+        lastPaddingEnd = paddingEndDip
+
+        val map: WritableMap =
+            WritableNativeMap().apply {
+                putDouble("paddingStart", paddingStartDip.toDouble())
+                putDouble("paddingEnd", paddingEndDip.toDouble())
+            }
+        mStateWrapper?.updateState(map)
+    }
+
+    companion object {
+        private const val DELTA = 0.9f
+    }
+}

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

@@ -48,4 +48,18 @@ open class CustomToolbar(
             }
         }
     }
+
+    override fun onLayout(
+        changed: Boolean,
+        l: Int,
+        t: Int,
+        r: Int,
+        b: Int,
+    ) {
+        super.onLayout(changed, l, t, r, b)
+
+        // our children are already laid out
+        val contentInsetStart = if (navigationIcon != null) contentInsetStartWithNavigation else contentInsetStart
+        config.updatePaddingsFabric(contentInsetStart, contentInsetEnd)
+    }
 }

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

@@ -57,10 +57,8 @@ object InsetsObserverProxy : OnApplyWindowInsetsListener {
         }
     }
 
-    fun unregister() {
-        eventSourceView.get()?.takeIf { hasBeenRegistered }?.let {
-            ViewCompat.setOnApplyWindowInsetsListener(it, null)
-        }
+    fun unregisterOnView(view: View) {
+        ViewCompat.setOnApplyWindowInsetsListener(view, null)
     }
 
     private fun getObservedView(): View? = eventSourceView.get()

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

@@ -16,13 +16,18 @@ 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.google.android.material.shape.CornerFamily
+import com.google.android.material.shape.MaterialShapeDrawable
+import com.google.android.material.shape.ShapeAppearanceModel
 import com.swmansion.rnscreens.events.HeaderHeightChangeEvent
 import com.swmansion.rnscreens.events.SheetDetentChangedEvent
+import com.swmansion.rnscreens.ext.isInsideScrollViewWithRemoveClippedSubviews
+import java.lang.ref.WeakReference
 
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
 class Screen(
@@ -32,6 +37,8 @@ class Screen(
     val fragment: Fragment?
         get() = fragmentWrapper?.fragment
 
+    var contentWrapper = WeakReference<ScreenContentWrapper>(null)
+
     val sheetBehavior: BottomSheetBehavior<Screen>?
         get() = (layoutParams as? CoordinatorLayout.LayoutParams)?.behavior as? BottomSheetBehavior<Screen>
 
@@ -54,10 +61,16 @@ class Screen(
 
     // Props for controlling modal presentation
     var isSheetGrabberVisible: Boolean = false
+
+    // corner radius must be updated after all props prop updates from a single transaction
+    // have been applied, because it depends on the presentation type.
+    private var shouldUpdateSheetCornerRadius = false
     var sheetCornerRadius: Float = 0F
         set(value) {
-            field = value
-            (fragment as? ScreenStackFragment)?.onSheetCornerRadiusChange()
+            if (field != value) {
+                field = value
+                shouldUpdateSheetCornerRadius = true
+            }
         }
     var sheetExpandsWhenScrolledToEdge: Boolean = true
 
@@ -118,6 +131,7 @@ class Screen(
 
     fun registerLayoutCallbackForWrapper(wrapper: ScreenContentWrapper) {
         wrapper.delegate = this
+        this.contentWrapper = WeakReference(wrapper)
     }
 
     override fun dispatchSaveInstanceState(container: SparseArray<Parcelable>) {
@@ -224,6 +238,9 @@ class Screen(
         if (activityState == this.activityState) {
             return
         }
+        if (container is ScreenStack && this.activityState != null && activityState < this.activityState!!) {
+            throw IllegalStateException("[RNScreens] activityState can only progress in NativeStack")
+        }
         this.activityState = activityState
         container?.notifyChildUpdate()
     }
@@ -383,10 +400,10 @@ class Screen(
                 }
                 if (child is ViewGroup) {
                     // The children are miscounted when there's a FlatList with
-                    // removeCLippedSubviews set to true (default).
+                    // 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) {
+                    // See https://github.com/software-mansion/react-native-screens/pull/2383
+                    if (child.isInsideScrollViewWithRemoveClippedSubviews()) {
                         for (j in 0 until child.childCount) {
                             child.addView(View(context))
                         }
@@ -420,6 +437,29 @@ class Screen(
         )
     }
 
+    internal fun onFinalizePropsUpdate() {
+        if (shouldUpdateSheetCornerRadius) {
+            shouldUpdateSheetCornerRadius = false
+            onSheetCornerRadiusChange()
+        }
+    }
+
+    internal fun onSheetCornerRadiusChange() {
+        if (stackPresentation !== StackPresentation.FORM_SHEET || background == null) {
+            return
+        }
+        (background as? MaterialShapeDrawable?)?.let {
+            val resolvedCornerRadius = PixelUtil.toDIPFromPixel(sheetCornerRadius)
+            it.shapeAppearanceModel =
+                ShapeAppearanceModel
+                    .Builder()
+                    .apply {
+                        setTopLeftCorner(CornerFamily.ROUNDED, resolvedCornerRadius)
+                        setTopRightCorner(CornerFamily.ROUNDED, resolvedCornerRadius)
+                    }.build()
+        }
+    }
+
     enum class StackPresentation {
         PUSH,
         MODAL,
@@ -435,7 +475,6 @@ class Screen(
         SLIDE_FROM_RIGHT,
         SLIDE_FROM_LEFT,
         FADE_FROM_BOTTOM,
-        IOS,
         IOS_FROM_RIGHT,
         IOS_FROM_LEFT,
     }

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

@@ -104,7 +104,7 @@ class ScreenStack(
 
         for (i in screenWrappers.indices.reversed()) {
             val screenWrapper = getScreenFragmentWrapperAt(i)
-            if (!dismissedWrappers.contains(screenWrapper)) {
+            if (!dismissedWrappers.contains(screenWrapper) && screenWrapper.screen.activityState !== Screen.ActivityState.INACTIVE) {
                 if (newTop == null) {
                     newTop = screenWrapper
                 } else {
@@ -182,9 +182,16 @@ 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_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)
+                        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) {
@@ -222,9 +229,16 @@ 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_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)
+                        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,
+                            )
                     }
                 }
             }
@@ -260,7 +274,9 @@ class ScreenStack(
                     break
                 }
                 // detach all screens that should not be visible
-                if (fragmentWrapper !== newTop && !dismissedWrappers.contains(fragmentWrapper)) {
+                if ((fragmentWrapper !== newTop && !dismissedWrappers.contains(fragmentWrapper)) ||
+                    fragmentWrapper.screen.activityState === Screen.ActivityState.INACTIVE
+                ) {
                     it.remove(fragmentWrapper.fragment)
                 }
             }
@@ -417,7 +433,6 @@ 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_FROM_RIGHT ||
                 fragmentWrapper.screen.stackAnimation === StackAnimation.IOS_FROM_LEFT
     }

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

@@ -142,7 +142,11 @@ class ScreenStackFragment :
     // once it is hidden by user gesture.
     private val bottomSheetStateCallback =
         object : BottomSheetCallback() {
-            private var lastStableState: Int = SheetUtils.sheetStateFromDetentIndex(screen.sheetInitialDetentIndex, screen.sheetDetents.count())
+            private var lastStableState: Int =
+                SheetUtils.sheetStateFromDetentIndex(
+                    screen.sheetInitialDetentIndex,
+                    screen.sheetDetents.count(),
+                )
 
             override fun onStateChanged(
                 bottomSheet: View,
@@ -150,9 +154,20 @@ class ScreenStackFragment :
             ) {
                 if (SheetUtils.isStateStable(newState)) {
                     lastStableState = newState
-                    screen.notifySheetDetentChange(SheetUtils.detentIndexFromSheetState(lastStableState, screen.sheetDetents.count()), true)
+                    screen.notifySheetDetentChange(
+                        SheetUtils.detentIndexFromSheetState(
+                            lastStableState,
+                            screen.sheetDetents.count()
+                        ), true
+                    )
                 } else if (newState == BottomSheetBehavior.STATE_DRAGGING) {
-                    screen.notifySheetDetentChange(SheetUtils.detentIndexFromSheetState(lastStableState, screen.sheetDetents.count()), false)
+                    screen.notifySheetDetentChange(
+                        SheetUtils.detentIndexFromSheetState(
+                            lastStableState,
+                            screen.sheetDetents.count()
+                        ),
+                        false,
+                    )
                 }
 
                 if (newState == BottomSheetBehavior.STATE_HIDDEN) {
@@ -191,13 +206,7 @@ class ScreenStackFragment :
     }
 
     internal fun onSheetCornerRadiusChange() {
-        (screen.background as MaterialShapeDrawable).shapeAppearanceModel =
-            ShapeAppearanceModel
-                .Builder()
-                .apply {
-                    setTopLeftCorner(CornerFamily.ROUNDED, screen.sheetCornerRadius)
-                    setTopRightCorner(CornerFamily.ROUNDED, screen.sheetCornerRadius)
-                }.build()
+        screen.onSheetCornerRadiusChange()
     }
 
     override fun onCreateView(
@@ -232,9 +241,7 @@ class ScreenStackFragment :
 
         coordinatorLayout.addView(screen.recycle())
 
-        if (screen.stackPresentation != Screen.StackPresentation.MODAL &&
-            screen.stackPresentation != Screen.StackPresentation.FORM_SHEET
-        ) {
+        if (screen.stackPresentation != Screen.StackPresentation.FORM_SHEET) {
             appBarLayout =
                 context?.let { AppBarLayout(it) }?.apply {
                     // By default AppBarLayout will have a background color set but since we cover the whole layout
@@ -341,13 +348,23 @@ class ScreenStackFragment :
         return when (keyboardState) {
             is KeyboardNotVisible -> {
                 when (screen.sheetDetents.count()) {
-                    1 ->
+                    1 -> if (screen.sheetDetents.first() == Screen.SHEET_FIT_TO_CONTENTS) {
+                        behavior.apply {
+                            state = BottomSheetBehavior.STATE_EXPANDED
+                            screen.contentWrapper.get()?.let {
+                                maxHeight = it.height
+                            }
+                            skipCollapsed = true
+                            isFitToContents = true
+                        }
+                    } else {
                         behavior.apply {
                             state = BottomSheetBehavior.STATE_EXPANDED
                             skipCollapsed = true
                             isFitToContents = true
                             maxHeight = (screen.sheetDetents.first() * containerHeight).toInt()
                         }
+                    }
 
                     2 ->
                         behavior.apply {
@@ -372,7 +389,8 @@ class ScreenStackFragment :
                             skipCollapsed = false
                             isFitToContents = false
                             peekHeight = (screen.sheetDetents[0] * containerHeight).toInt()
-                            expandedOffset = ((1 - screen.sheetDetents[2]) * containerHeight).toInt()
+                            expandedOffset =
+                                ((1 - screen.sheetDetents[2]) * containerHeight).toInt()
                             halfExpandedRatio =
                                 (screen.sheetDetents[1] / screen.sheetDetents[2]).toFloat()
                         }
@@ -451,7 +469,8 @@ class ScreenStackFragment :
                             skipCollapsed = false
                             isFitToContents = false
                             peekHeight = (screen.sheetDetents[0] * containerHeight).toInt()
-                            expandedOffset = ((1 - screen.sheetDetents[2]) * containerHeight).toInt()
+                            expandedOffset =
+                                ((1 - screen.sheetDetents[2]) * containerHeight).toInt()
                             halfExpandedRatio =
                                 (screen.sheetDetents[1] / screen.sheetDetents[2]).toFloat()
                         }
@@ -576,7 +595,8 @@ class ScreenStackFragment :
 //    ) : CoordinatorLayout(context), ReactCompoundViewGroup, ReactHitSlopView {
     ) : CoordinatorLayout(context),
         ReactPointerEventsView {
-        override fun onApplyWindowInsets(insets: WindowInsets?): WindowInsets = super.onApplyWindowInsets(insets)
+        override fun onApplyWindowInsets(insets: WindowInsets?): WindowInsets =
+            super.onApplyWindowInsets(insets)
 
         private val animationListener: Animation.AnimationListener =
             object : Animation.AnimationListener {

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

@@ -8,7 +8,6 @@ import android.text.TextUtils
 import android.util.TypedValue
 import android.view.Gravity
 import android.view.View.OnClickListener
-import android.view.ViewGroup
 import android.view.WindowInsets
 import android.widget.ImageView
 import android.widget.TextView
@@ -25,7 +24,7 @@ import com.swmansion.rnscreens.events.HeaderDetachedEvent
 
 class ScreenStackHeaderConfig(
     context: Context,
-) : ViewGroup(context) {
+) : FabricEnabledHeaderConfigViewGroup(context) {
     private val configSubviews = ArrayList<ScreenStackHeaderSubview>(3)
     val toolbar: CustomToolbar
     var isHeaderHidden = false // named this way to avoid conflict with platform's isHidden

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

@@ -0,0 +1,25 @@
+package com.swmansion.rnscreens
+
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.LayoutShadowNode
+import com.facebook.react.uimanager.Spacing
+import com.swmansion.rnscreens.utils.PaddingBundle
+
+internal class ScreenStackHeaderConfigShadowNode(
+    private var context: ReactContext,
+) : LayoutShadowNode() {
+    var paddingStart: Float = 0f
+    var paddingEnd: Float = 0f
+
+    override fun setLocalData(data: Any?) {
+        if (data is PaddingBundle) {
+            paddingStart = data.paddingStart
+            paddingEnd = data.paddingEnd
+
+            setPadding(Spacing.START, paddingStart)
+            setPadding(Spacing.END, paddingEnd)
+        } else {
+            super.setLocalData(data)
+        }
+    }
+}

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

@@ -3,8 +3,12 @@ package com.swmansion.rnscreens
 import android.util.Log
 import android.view.View
 import com.facebook.react.bridge.JSApplicationCausedNativeException
+import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.LayoutShadowNode
+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
@@ -29,6 +33,9 @@ class ScreenStackHeaderConfigViewManager :
 
     override fun createViewInstance(reactContext: ThemedReactContext) = ScreenStackHeaderConfig(reactContext)
 
+    // This works only on Paper. On Fabric the shadow node is implemented in C++ layer.
+    override fun createShadowNodeInstance(context: ReactApplicationContext): LayoutShadowNode = ScreenStackHeaderConfigShadowNode(context)
+
     override fun addView(
         parent: ScreenStackHeaderConfig,
         child: View,
@@ -42,6 +49,17 @@ class ScreenStackHeaderConfigViewManager :
         parent.addConfigSubview(child, index)
     }
 
+    override fun updateState(
+        view: ScreenStackHeaderConfig,
+        props: ReactStylesDiffMap?,
+        stateWrapper: StateWrapper?,
+    ): Any? {
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            view.setStateWrapper(stateWrapper)
+        }
+        return super.updateState(view, props, stateWrapper)
+    }
+
     override fun onDropViewInstance(
         @Nonnull view: ScreenStackHeaderConfig,
     ) {

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

@@ -92,6 +92,12 @@ open class ScreenViewManager :
         return super.updateState(view, props, stateWrapper)
     }
 
+    // Called after all props are updated for given view
+    override fun onAfterUpdateTransaction(view: Screen) {
+        super.onAfterUpdateTransaction(view)
+        view.onFinalizePropsUpdate()
+    }
+
     @ReactProp(name = "activityState")
     fun setActivityState(
         view: Screen,
@@ -142,7 +148,6 @@ open class ScreenViewManager :
                 "slide_from_left" -> Screen.StackAnimation.SLIDE_FROM_LEFT
                 "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

@@ -163,6 +163,7 @@ object ScreenWindowTraits {
                         InsetsObserverProxy.registerOnView(decorView)
                         InsetsObserverProxy.addOnApplyWindowInsetsListener(windowInsetsListener)
                     } else {
+                        InsetsObserverProxy.unregisterOnView(decorView)
                         InsetsObserverProxy.removeOnApplyWindowInsetsListener(windowInsetsListener)
                     }
                     ViewCompat.requestApplyInsets(decorView)

package/android/src/main/java/com/swmansion/rnscreens/ext/ViewExt.kt

@@ -3,6 +3,9 @@ package com.swmansion.rnscreens.ext
 import android.graphics.drawable.ColorDrawable
 import android.view.View
 import android.view.ViewGroup
+import com.facebook.react.views.scroll.ReactHorizontalScrollView
+import com.facebook.react.views.scroll.ReactScrollView
+import com.swmansion.rnscreens.ScreenStack
 
 internal fun View.parentAsView() = this.parent as? View
 
@@ -30,3 +33,17 @@ internal fun View.maybeBgColor(): Int? {
     }
     return null
 }
+
+internal fun View.isInsideScrollViewWithRemoveClippedSubviews(): Boolean {
+    if (this is ReactHorizontalScrollView || this is ReactScrollView) {
+        return false
+    }
+    var parentView = this.parent
+    while (parentView is ViewGroup && parentView !is ScreenStack) {
+        if (parentView is ReactScrollView) {
+            return parentView.removeClippedSubviews
+        }
+        parentView = parentView.parent
+    }
+    return false
+}

package/android/src/main/java/com/swmansion/rnscreens/utils/PaddingBundle.kt

@@ -0,0 +1,8 @@
+package com.swmansion.rnscreens.utils
+
+// Used only on Paper together with `setLocalData` mechanism to pass
+// the information on header paddings to shadow node.
+data class PaddingBundle(
+    val paddingStart: Float,
+    val paddingEnd: Float,
+)

package/android/src/main/jni/rnscreens.h

@@ -18,6 +18,8 @@
  */
 #include <react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h>
 #include <react/renderer/components/rnscreens/RNSModalScreenComponentDescriptor.h>
+#include <react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewComponentDescriptor.h>
+#include <react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h>
 
 namespace facebook {
 namespace react {

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

@@ -0,0 +1,39 @@
+package com.swmansion.rnscreens
+
+import android.content.Context
+import android.view.ViewGroup
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.UIManagerModule
+import com.swmansion.rnscreens.utils.PaddingBundle
+import kotlin.math.abs
+
+abstract class FabricEnabledHeaderConfigViewGroup(
+    context: Context,
+) : ViewGroup(context) {
+    private var lastPaddingStart = 0
+    private var lastPaddingEnd = 0
+
+    fun setStateWrapper(wrapper: StateWrapper?) = Unit
+
+    fun updatePaddingsFabric(
+        paddingStart: Int,
+        paddingEnd: Int,
+    ) {
+        // Note that on Paper we do not convert these props from px to dip. This is done internally by RN.
+        if (abs(lastPaddingStart - paddingStart) < DELTA && abs(lastPaddingEnd - paddingEnd) < DELTA) {
+            return
+        }
+
+        lastPaddingStart = paddingStart
+        lastPaddingEnd = paddingEnd
+
+        val reactContext = context as? ReactContext
+        val uiManagerModule = reactContext?.getNativeModule(UIManagerModule::class.java)
+        uiManagerModule?.setViewLocalData(this.id, PaddingBundle(paddingStart.toFloat(), paddingEnd.toFloat()))
+    }
+
+    companion object {
+        private const val DELTA = 0.9
+    }
+}

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

@@ -0,0 +1,44 @@
+#pragma once
+
+#ifdef ANDROID
+#include <fbjni/fbjni.h>
+#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 "RNSScreenStackHeaderConfigShadowNode.h"
+
+namespace facebook::react {
+
+using namespace rnscreens;
+
+class RNSScreenStackHeaderConfigComponentDescriptor final
+    : public ConcreteComponentDescriptor<RNSScreenStackHeaderConfigShadowNode> {
+ public:
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode &shadowNode) const override {
+    react_native_assert(
+        dynamic_cast<RNSScreenStackHeaderConfigShadowNode *>(&shadowNode));
+    auto &configShadowNode =
+        static_cast<RNSScreenStackHeaderConfigShadowNode &>(shadowNode);
+
+    react_native_assert(
+        dynamic_cast<YogaLayoutableShadowNode *>(&configShadowNode));
+    auto &layoutableShadowNode =
+        dynamic_cast<YogaLayoutableShadowNode &>(configShadowNode);
+
+    auto state = std::static_pointer_cast<
+        const RNSScreenStackHeaderConfigShadowNode::ConcreteState>(
+        shadowNode.getState());
+    auto stateData = state->getData();
+
+    layoutableShadowNode.setPadding(
+        {stateData.getPaddingStart(), 0, stateData.getPaddingEnd(), 0});
+
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react

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

@@ -0,0 +1,8 @@
+#include "RNSScreenStackHeaderConfigShadowNode.h"
+
+namespace facebook::react {
+
+extern const char RNSScreenStackHeaderConfigComponentName[] =
+    "RNSScreenStackHeaderConfig";
+
+}