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

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/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/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,64 @@ 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,
+                    )
+            }
+        }
+    }
+
+    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

@@ -5,14 +5,15 @@ 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
@@ -20,8 +21,13 @@ import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.events.EventDispatcher
 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(
@@ -31,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>
 
@@ -53,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
 
@@ -117,6 +131,7 @@ class Screen(
 
     fun registerLayoutCallbackForWrapper(wrapper: ScreenContentWrapper) {
         wrapper.delegate = this
+        this.contentWrapper = WeakReference(wrapper)
     }
 
     override fun dispatchSaveInstanceState(container: SparseArray<Parcelable>) {
@@ -140,17 +155,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)
         }
     }
 
@@ -226,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()
     }
@@ -367,7 +382,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 +399,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/pull/2383
+                    if (child.isInsideScrollViewWithRemoveClippedSubviews()) {
+                        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
@@ -438,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,
@@ -453,7 +475,8 @@ class Screen(
         SLIDE_FROM_RIGHT,
         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

@@ -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,7 +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_slide_in_from_right_ios, R.anim.rns_slide_out_to_left_ios)
+                        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 +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_slide_in_from_left_ios, R.anim.rns_slide_out_to_right_ios)
+                        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,
+                            )
                     }
                 }
             }
@@ -256,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)
                 }
             }
@@ -413,6 +433,7 @@ 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)
+        }
+    }
+}