react-native-screens 4.10.0-beta.2 → 4.10.0-beta.3

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

@@ -23,24 +23,19 @@ abstract class FabricEnabledHeaderConfigViewGroup(
         mStateWrapper = wrapper
     }
 
-    fun updatePaddings(
-        paddingStart: Int,
-        paddingEnd: Int,
-    ) {
-        // Do nothing on Fabric. This method is used only on Paper.
-    }
-
     fun updateHeaderConfigState(
         width: Int,
         height: Int,
         paddingStart: Int,
         paddingEnd: Int,
     ) {
+        // Implementation of this method differs between Fabric & Paper!
         updateState(width, height, paddingStart, paddingEnd)
     }
 
+    // Implementation of this method differs between Fabric & Paper!
     @UiThread
-    fun updateState(
+    private fun updateState(
         width: Int,
         height: Int,
         paddingStart: Int,

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

@@ -3,18 +3,40 @@ package com.swmansion.rnscreens
 import android.annotation.SuppressLint
 import android.content.Context
 import android.os.Build
+import android.view.WindowInsets
 import android.view.WindowManager
 import androidx.appcompat.widget.Toolbar
+import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.modules.core.ChoreographerCompat
 import com.facebook.react.modules.core.ReactChoreographer
 import com.facebook.react.uimanager.ThemedReactContext
+import com.swmansion.rnscreens.utils.InsetsCompat
+import com.swmansion.rnscreens.utils.resolveInsetsOrZero
+import kotlin.math.max
 
-// This class is used to store config closer to search bar
+/**
+ * Main toolbar class representing the native header.
+ *
+ * This class is used to store config closer to search bar.
+ * It also handles inset/padding related logic in coordination with header config.
+ */
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
 open class CustomToolbar(
     context: Context,
     val config: ScreenStackHeaderConfig,
 ) : Toolbar(context) {
+    // Switch this flag to enable/disable display cutout avoidance.
+    // Currently this is controlled by isTopInsetEnabled prop.
+    private val shouldAvoidDisplayCutout
+        get() = config.isTopInsetEnabled
+
+    private val shouldApplyTopInset
+        get() = config.isTopInsetEnabled
+
+    private var lastInsets = InsetsCompat.NONE
+
+    private var isForceShadowStateUpdateOnLayoutRequested = false
+
     private var isLayoutEnqueued = false
     private val layoutCallback: ChoreographerCompat.FrameCallback =
         object : ChoreographerCompat.FrameCallback() {
@@ -59,27 +81,101 @@ open class CustomToolbar(
         }
     }
 
+    override fun onApplyWindowInsets(insets: WindowInsets?): WindowInsets? {
+        val unhandledInsets = super.onApplyWindowInsets(insets)
+
+        // There are few UI modes we could be running in
+        //
+        // 1. legacy non edge-to-edge mode,
+        // 2. edge-to-edge with gesture navigation,
+        // 3. edge-to-edge with translucent navigation buttons bar.
+        //
+        // Additionally we need to gracefully handle possible display cutouts.
+
+        // We use rootWindowInsets in lieu of insets or unhandledInsets here,
+        // because cutout sometimes (only in certain scenarios, e.g. with headerLeft view present)
+        // happen to be Insets.ZERO and is not reliable.
+        val rootWindowInsets = rootWindowInsets
+        val cutoutInsets =
+            resolveInsetsOrZero(WindowInsetsCompat.Type.displayCutout(), rootWindowInsets)
+        val systemBarInsets =
+            resolveInsetsOrZero(WindowInsetsCompat.Type.systemBars(), rootWindowInsets)
+        val statusBarInsetsStable =
+            resolveInsetsOrZero(
+                WindowInsetsCompat.Type.systemBars(),
+                rootWindowInsets,
+                ignoreVisibility = true,
+            )
+
+        // This seems to work fine in all tested configurations, because cutout & system bars overlap
+        // only in portrait mode & top inset is controlled separately, therefore we don't count
+        // any insets twice.
+        val horizontalInsets =
+            InsetsCompat.of(
+                cutoutInsets.left + systemBarInsets.left,
+                0,
+                cutoutInsets.right + systemBarInsets.right,
+                0,
+            )
+
+        // We want to handle display cutout always, no matter the HeaderConfig prop values.
+        // If there are no cutout displays, we want to apply the additional padding to
+        // respect the status bar.
+        val verticalInsets =
+            InsetsCompat.of(
+                0,
+                max(cutoutInsets.top, if (shouldApplyTopInset) statusBarInsetsStable.top else 0),
+                0,
+                max(cutoutInsets.bottom, 0),
+            )
+
+        val newInsets = InsetsCompat.add(horizontalInsets, verticalInsets)
+
+        if (lastInsets != newInsets) {
+            lastInsets = newInsets
+            applyExactPadding(
+                lastInsets.left,
+                lastInsets.top,
+                lastInsets.right,
+                lastInsets.bottom,
+            )
+        }
+
+        return unhandledInsets
+    }
+
     override fun onLayout(
-        changed: Boolean,
+        hasSizeChanged: Boolean,
         l: Int,
         t: Int,
         r: Int,
         b: Int,
     ) {
-        super.onLayout(changed, l, t, r, b)
+        super.onLayout(hasSizeChanged, l, t, r, b)
 
-        if (!changed) {
-            return
-        }
+        config.onNativeToolbarLayout(
+            this,
+            hasSizeChanged || isForceShadowStateUpdateOnLayoutRequested,
+        )
+        isForceShadowStateUpdateOnLayoutRequested = false
+    }
 
-        val contentInsetStart = if (navigationIcon != null) contentInsetStartWithNavigation else contentInsetStart
-        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)
-        }
+    fun updateContentInsets() {
+        contentInsetStartWithNavigation = config.preferredContentInsetStartWithNavigation
+        setContentInsetsRelative(config.preferredContentInsetStart, config.preferredContentInsetEnd)
+    }
+
+    private fun applyExactPadding(
+        left: Int,
+        top: Int,
+        right: Int,
+        bottom: Int,
+    ) {
+        requestForceShadowStateUpdateOnLayout()
+        setPadding(left, top, right, bottom)
+    }
+
+    private fun requestForceShadowStateUpdateOnLayout() {
+        isForceShadowStateUpdateOnLayoutRequested = shouldAvoidDisplayCutout
     }
 }

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

@@ -275,7 +275,7 @@ class Screen(
             throw IllegalStateException("[RNScreens] activityState can only progress in NativeStack")
         }
         this.activityState = activityState
-        container?.notifyChildUpdate()
+        container?.onChildUpdate()
     }
 
     fun setScreenOrientation(screenOrientation: String?) {
@@ -482,7 +482,14 @@ class Screen(
             ?.dispatchEvent(HeaderHeightChangeEvent(surfaceId, id, headerHeight))
     }
 
-    internal fun notifySheetDetentChange(
+    internal fun onSheetDetentChanged(
+        detentIndex: Int,
+        isStable: Boolean,
+    ) {
+        dispatchSheetDetentChanged(detentIndex, isStable)
+    }
+
+    private fun dispatchSheetDetentChanged(
         detentIndex: Int,
         isStable: Boolean,
     ) {
@@ -571,3 +578,5 @@ class Screen(
         const val SHEET_FIT_TO_CONTENTS = -1.0
     }
 }
+
+internal fun View.asScreen() = this as Screen

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

@@ -91,7 +91,7 @@ open class ScreenContainer(
     val isNested: Boolean
         get() = parentScreenWrapper != null
 
-    fun notifyChildUpdate() {
+    fun onChildUpdate() {
         performUpdatesNow()
     }
 

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

@@ -12,6 +12,72 @@ import com.swmansion.rnscreens.events.StackFinishTransitioningEvent
 import com.swmansion.rnscreens.utils.setTweenAnimations
 import java.util.Collections
 import kotlin.collections.ArrayList
+import kotlin.math.max
+
+internal interface ChildDrawingOrderStrategy {
+    /**
+     * Mutates the list of draw operations **in-place**.
+     */
+    fun apply(drawingOperations: MutableList<ScreenStack.DrawingOp>)
+
+    /**
+     * Enables the given strategy. When enabled - the strategy **might** mutate the operations
+     * list passed to `apply` method.
+     */
+    fun enable()
+
+    /**
+     * Disables the given strategy - even when `apply` is called it **must not** produce
+     * any side effect (it must not manipulate the drawing operations list passed to `apply` method).
+     */
+    fun disable()
+
+    fun isEnabled(): Boolean
+}
+
+internal abstract class ChildDrawingOrderStrategyBase(
+    var enabled: Boolean = false,
+) : ChildDrawingOrderStrategy {
+    override fun enable() {
+        enabled = true
+    }
+
+    override fun disable() {
+        enabled = false
+    }
+
+    override fun isEnabled() = enabled
+}
+
+internal class SwapLastTwo : ChildDrawingOrderStrategyBase() {
+    override fun apply(drawingOperations: MutableList<ScreenStack.DrawingOp>) {
+        if (!isEnabled()) {
+            return
+        }
+        if (drawingOperations.size >= 2) {
+            Collections.swap(drawingOperations, drawingOperations.lastIndex, drawingOperations.lastIndex - 1)
+        }
+    }
+}
+
+internal class ReverseOrderInRange(
+    val range: IntRange,
+) : ChildDrawingOrderStrategyBase() {
+    override fun apply(drawingOperations: MutableList<ScreenStack.DrawingOp>) {
+        if (!isEnabled()) {
+            return
+        }
+
+        var startRange = range.start
+        var endRange = range.endInclusive
+
+        while (startRange < endRange) {
+            Collections.swap(drawingOperations, startRange, endRange)
+            startRange += 1
+            endRange -= 1
+        }
+    }
+}
 
 class ScreenStack(
     context: Context?,
@@ -22,9 +88,10 @@ class ScreenStack(
     private var drawingOps: MutableList<DrawingOp> = ArrayList()
     private var topScreenWrapper: ScreenStackFragmentWrapper? = null
     private var removalTransitionStarted = false
-    private var isDetachingCurrentScreen = false
-    private var reverseLastTwoChildren = false
     private var previousChildrenCount = 0
+
+    private var childDrawingOrderStrategy: ChildDrawingOrderStrategy? = null
+
     var goingForward = false
 
     /**
@@ -56,11 +123,13 @@ class ScreenStack(
 
     override fun startViewTransition(view: View) {
         super.startViewTransition(view)
+        childDrawingOrderStrategy?.enable()
         removalTransitionStarted = true
     }
 
     override fun endViewTransition(view: View) {
         super.endViewTransition(view)
+        childDrawingOrderStrategy?.disable()
         if (removalTransitionStarted) {
             removalTransitionStarted = false
             dispatchOnFinishTransitioning()
@@ -98,9 +167,12 @@ class ScreenStack(
         // when all screens are dismissed and no screen is to be displayed on top. We need to gracefully
         // handle the case of newTop being NULL, which happens in several places below
         var newTop: ScreenFragmentWrapper? = null // newTop is nullable, see the above comment ^
-        var visibleBottom: ScreenFragmentWrapper? =
-            null // this is only set if newTop has one of transparent presentation modes
-        isDetachingCurrentScreen = false // we reset it so the previous value is not used by mistake
+
+        // this is only set if newTop has one of transparent presentation modes
+        var visibleBottom: ScreenFragmentWrapper? = null
+
+        // reset, to not use previously set strategy by mistake
+        childDrawingOrderStrategy = null
 
         // Determine new first & last visible screens.
         // Scope function to limit the scope of locals.
@@ -121,7 +193,11 @@ class ScreenStack(
 
         var shouldUseOpenAnimation = true
         var stackAnimation: StackAnimation? = null
-        if (newTop != null && !stack.contains(newTop)) {
+
+        val newTopAlreadyInStack = stack.contains(newTop)
+        val topScreenWillChange = newTop !== topScreenWrapper
+
+        if (newTop != null && !newTopAlreadyInStack) {
             // if new top screen wasn't on stack we do "open animation" so long it is not the very first
             // screen on stack
             if (topScreenWrapper != null) {
@@ -129,9 +205,9 @@ class ScreenStack(
                 // if the previous top screen does not exist anymore and the new top was not on the stack
                 // before, probably replace or reset was called, so we play the "close animation".
                 // Otherwise it's open animation
-                val containsTopScreen = topScreenWrapper?.let { screenWrappers.contains(it) } == true
+                val previousTopScreenRemainsInStack = topScreenWrapper?.let { screenWrappers.contains(it) } == true
                 val isPushReplace = newTop.screen.replaceAnimation === Screen.ReplaceAnimation.PUSH
-                shouldUseOpenAnimation = containsTopScreen || isPushReplace
+                shouldUseOpenAnimation = previousTopScreenRemainsInStack || isPushReplace
                 // if the replace animation is `push`, the new top screen provides the animation, otherwise the previous one
                 stackAnimation = if (shouldUseOpenAnimation) newTop.screen.stackAnimation else topScreenWrapper?.screen?.stackAnimation
             } else {
@@ -140,7 +216,7 @@ class ScreenStack(
                 stackAnimation = StackAnimation.NONE
                 goingForward = true
             }
-        } else if (newTop != null && topScreenWrapper != null && topScreenWrapper !== newTop) {
+        } else if (newTop != null && topScreenWrapper != null && topScreenWillChange) {
             // otherwise if we are performing top screen change we do "close animation"
             shouldUseOpenAnimation = false
             stackAnimation = topScreenWrapper?.screen?.stackAnimation
@@ -160,8 +236,29 @@ class ScreenStack(
             // appears on top of the previous one. You can read more about in the comment
             // for the code we use to change that behavior:
             // https://github.com/airbnb/native-navigation/blob/9cf50bf9b751b40778f473f3b19fcfe2c4d40599/lib/android/src/main/java/com/airbnb/android/react/navigation/ScreenCoordinatorLayout.java#L18
-            // Note: This should not be set in case there is only a single screen in stack or animation `none` is used. Atm needsDrawReordering implementation guards that assuming that first screen on stack uses `NONE` animation.
-            isDetachingCurrentScreen = true
+            // Note: This should not be set in case there is only a single screen in stack or animation `none` is used.
+            // Atm needsDrawReordering implementation guards that assuming that first screen on stack uses `NONE` animation.
+            childDrawingOrderStrategy = SwapLastTwo()
+        } else if (newTop != null &&
+            newTopAlreadyInStack &&
+            topScreenWrapper?.screen?.isTransparent() == true &&
+            newTop.screen.isTransparent() == false
+        ) {
+            // In case where we dismiss multiple transparent views we want to ensure
+            // that they are drawn in correct order - Android swaps them by default,
+            // so we need to swap the swap to unswap :D
+            val dismissedTransparentScreenApproxCount =
+                stack
+                    .asReversed()
+                    .asSequence()
+                    .takeWhile {
+                        it !== newTop &&
+                            it.screen.isTransparent()
+                    }.count()
+            if (dismissedTransparentScreenApproxCount > 1) {
+                childDrawingOrderStrategy =
+                    ReverseOrderInRange(max(stack.lastIndex - dismissedTransparentScreenApproxCount + 1, 0)..stack.lastIndex)
+            }
         }
 
         createTransaction().let { transaction ->
@@ -241,23 +338,6 @@ class ScreenStack(
         stack.forEach { it.onContainerUpdate() }
     }
 
-    // below methods are taken from
-    // https://github.com/airbnb/native-navigation/blob/9cf50bf9b751b40778f473f3b19fcfe2c4d40599/lib/android/src/main/java/com/airbnb/android/react/navigation/ScreenCoordinatorLayout.java#L43
-    // and are used to swap the order of drawing views when navigating forward with the transitions
-    // that are making transitioning fragments appear one on another. See more info in the comment to
-    // the linked class.
-    override fun removeView(view: View) {
-        // we set this property to reverse the order of drawing views
-        // when we want to push new fragment on top of the previous one and their animations collide.
-        // More information in:
-        // https://github.com/airbnb/native-navigation/blob/9cf50bf9b751b40778f473f3b19fcfe2c4d40599/lib/android/src/main/java/com/airbnb/android/react/navigation/ScreenCoordinatorLayout.java#L17
-        if (isDetachingCurrentScreen) {
-            isDetachingCurrentScreen = false
-            reverseLastTwoChildren = true
-        }
-        super.removeView(view)
-    }
-
     private fun drawAndRelease() {
         // We make a copy of the drawingOps and use it to dispatch draws in order to be sure
         // that we do not modify the original list. There are cases when `op.draw` can call
@@ -276,12 +356,12 @@ class ScreenStack(
 
         // check the view removal is completed (by comparing the previous children count)
         if (drawingOps.size < previousChildrenCount) {
-            reverseLastTwoChildren = false
+            childDrawingOrderStrategy = null
         }
         previousChildrenCount = drawingOps.size
-        if (reverseLastTwoChildren && drawingOps.size >= 2) {
-            Collections.swap(drawingOps, drawingOps.size - 1, drawingOps.size - 2)
-        }
+
+        childDrawingOrderStrategy?.apply(drawingOps)
+
         drawAndRelease()
     }
 
@@ -310,7 +390,7 @@ class ScreenStack(
     // See: https://developer.android.com/about/versions/15/behavior-changes-15?hl=en#openjdk-api-changes
     private fun obtainDrawingOp(): DrawingOp = if (drawingOpPool.isEmpty()) DrawingOp() else drawingOpPool.removeAt(drawingOpPool.lastIndex)
 
-    private inner class DrawingOp {
+    internal inner class DrawingOp {
         var canvas: Canvas? = null
         var child: View? = null
         var drawingTime: Long = 0