react-native-screens 5.0.0-alpha.1 → 5.0.0-alpha.3

package/android/src/main/java/com/swmansion/rnscreens/stack/header/StackHeaderBackPressHandler.kt

@@ -0,0 +1,11 @@
+package com.swmansion.rnscreens.stack.header
+
+import com.swmansion.rnscreens.stack.screen.StackScreen
+
+/**
+ * Receives presses of the native header back button. Implemented by the object
+ * managing the navigation state of the stack the pressed header belongs to.
+ */
+internal fun interface StackHeaderBackPressHandler {
+    fun handleHeaderBackButtonPress(pressedScreen: StackScreen)
+}

package/android/src/main/java/com/swmansion/rnscreens/stack/header/StackHeaderCoordinatorLayout.kt

@@ -2,32 +2,40 @@ package com.swmansion.rnscreens.stack.header
 
 import android.annotation.SuppressLint
 import android.content.Context
-import android.util.Log
+import android.content.res.Configuration
+import android.os.Parcelable
+import android.util.SparseArray
 import android.view.ViewGroup.LayoutParams.MATCH_PARENT
 import android.widget.FrameLayout
-import androidx.activity.OnBackPressedDispatcherOwner
 import androidx.appcompat.view.ContextThemeWrapper
 import androidx.coordinatorlayout.widget.CoordinatorLayout
-import com.facebook.react.bridge.ReactContext
 import com.google.android.material.R
 import com.google.android.material.appbar.AppBarLayout
-import com.google.android.material.appbar.MaterialToolbar
+import com.swmansion.rnscreens.common.colorscheme.ColorSchemeCoordinator
+import com.swmansion.rnscreens.common.colorscheme.ColorSchemeListener
+import com.swmansion.rnscreens.common.colorscheme.ColorSchemeProviding
+import com.swmansion.rnscreens.stack.header.appbar.StackHeaderAppBarLayout
+import com.swmansion.rnscreens.stack.header.appbar.StackHeaderScrollingViewBehavior
 import com.swmansion.rnscreens.stack.header.config.OnHeaderConfigurationAttachListener
 import com.swmansion.rnscreens.stack.header.config.StackHeaderConfigurationObserver
 import com.swmansion.rnscreens.stack.header.config.StackHeaderConfigurationProviding
 import com.swmansion.rnscreens.stack.header.config.StackHeaderDelegate
 import com.swmansion.rnscreens.stack.header.config.StackHeaderInvalidationFlags
-import com.swmansion.rnscreens.stack.header.subview.StackHeaderSubviewProviding
-import com.swmansion.rnscreens.stack.header.toolbar.StackHeaderToolbarMenuElementUpdate
-import com.swmansion.rnscreens.stack.header.toolbar.StackHeaderToolbarMenuGroupMetadata
 import com.swmansion.rnscreens.stack.screen.StackScreen
 
+/**
+ * Root CoordinatorLayout for a screen's header: hosts the app bar and the
+ * content wrapper, wires header-config attach/observe, routes config
+ * invalidations to the applicators, and owns header lifecycle/teardown.
+ */
 @SuppressLint("ViewConstructor")
 internal class StackHeaderCoordinatorLayout(
     context: Context,
     internal val stackScreen: StackScreen,
     private val canNavigateBack: Boolean,
-) : CoordinatorLayout(context) {
+    private val backPressHandler: StackHeaderBackPressHandler,
+) : CoordinatorLayout(context),
+    ColorSchemeProviding {
     // region Config attach / detach
 
     private var currentProvider: StackHeaderConfigurationProviding? = null
@@ -45,7 +53,10 @@ internal class StackHeaderCoordinatorLayout(
         delegate: StackHeaderDelegate?,
     ) {
         // Disconnect old config to prevent spurious updates from a detached config.
-        currentProvider?.setConfigurationObserver(null)
+        currentProvider?.let {
+            it.setConfigurationObserver(null)
+            it.toolbarMenuController.detach()
+        }
 
         currentProvider = provider
         currentDelegate = delegate
@@ -65,34 +76,6 @@ internal class StackHeaderCoordinatorLayout(
     private val configObserver =
         object : StackHeaderConfigurationObserver {
             override fun onConfigChanged(config: StackHeaderConfigurationProviding) = processUpdate(config)
-
-            override fun onMenuElementsUpdated(updates: List<StackHeaderToolbarMenuElementUpdate>) {
-                val toolbar = appBarLayout?.toolbar
-                if (toolbar == null) {
-                    Log.w(
-                        TAG,
-                        "[RNScreens] Dropping ${updates.size} resolved toolbar menu update(s): " +
-                            "the header toolbar is not currently attached (header hidden or detached).",
-                    )
-                    return
-                }
-                // Apply every element first, collecting the groups whose selection changed,
-                // then emit a single coalesced event per affected group.
-                val affectedGroups = LinkedHashSet<String>()
-                for (update in updates) {
-                    applicator.updateToolbarMenuElement(
-                        toolbar,
-                        toolbarMenuForwardIdMap,
-                        update.id,
-                        update.options,
-                    )
-                    val checked = update.options.checked
-                    if (checked != null) {
-                        applyGroupItemStateChange(toolbar, update.id, checked)?.let(affectedGroups::add)
-                    }
-                }
-                affectedGroups.forEach { groupId -> emitGroupSelection(toolbar, groupId) }
-            }
         }
 
     // endregion
@@ -100,7 +83,8 @@ internal class StackHeaderCoordinatorLayout(
     // region Layout callbacks
 
     private val appBarOffsetListener =
-        AppBarLayout.OnOffsetChangedListener { _, _ ->
+        AppBarLayout.OnOffsetChangedListener { appBar, verticalOffset ->
+            evaluateCollapseState(appBar, verticalOffset)
             onMaybeHeaderLayoutChanged()
         }
 
@@ -123,49 +107,21 @@ internal class StackHeaderCoordinatorLayout(
         val delegate = currentDelegate ?: return
         val provider = currentProvider ?: return
         val appBar = appBarLayout ?: return
-
-        // When config is transparent, the StackScreen is static so we need to offset the header
-        // config by the offset of the AppBarLayout (which is 0 or is negative). When config is
-        // opaque, the Screen always moves with the config, that's why we need to offset the
-        // header config by the negative value of AppBarLayout's height.
-        val configOffset = if (provider.transparent) appBar.top else appBar.top - appBar.bottom
-
-        delegate.onHeaderFrameChanged(
-            appBar.width,
-            appBar.height,
-            configOffset,
-        )
-
-        updateSubviewOffsets(appBar, provider)
+        StackHeaderFrameSynchronizer.sync(appBar, provider, delegate)
     }
 
-    private fun updateSubviewOffsets(
-        appBar: StackHeaderAppBarLayout,
-        config: StackHeaderConfigurationProviding,
-    ) {
-        config.leadingSubview?.let { updateSubviewOffset(it, appBar) }
-        config.centerSubview?.let { updateSubviewOffset(it, appBar) }
-        config.trailingSubview?.let { updateSubviewOffset(it, appBar) }
-        config.backgroundSubview?.let { updateSubviewOffset(it, appBar) }
-    }
+    // Tracks whether the app bar is currently scrolled to its fully collapsed offset. Used to work
+    // around a Material offset bug when the title/subtitle changes at runtime — see
+    // StackHeaderApplicator.applyTitleAndSubtitle. This should be equivalent to Material's
+    // `collapsingTitleHelper.getExpansionFraction() == 1f` condition.
+    private var isAppBarFullyCollapsed = false
 
-    private fun updateSubviewOffset(
-        subview: StackHeaderSubviewProviding,
-        appBar: StackHeaderAppBarLayout,
+    private fun evaluateCollapseState(
+        appBar: AppBarLayout,
+        verticalOffset: Int,
     ) {
-        val view = subview.view
-        if (view.width == 0 && view.height == 0) return
-
-        val appBarPos = IntArray(2)
-        val subviewPos = IntArray(2)
-        appBar.getLocationInWindow(appBarPos)
-        view.getLocationInWindow(subviewPos)
-
-        currentDelegate?.onSubviewOriginChanged(
-            subview.type,
-            x = subviewPos[0] - appBarPos[0],
-            y = subviewPos[1] - appBarPos[1],
-        )
+        val totalScrollRange = appBar.totalScrollRange
+        isAppBarFullyCollapsed = totalScrollRange > 0 && -verticalOffset >= totalScrollRange
     }
 
     // endregion
@@ -182,18 +138,16 @@ internal class StackHeaderCoordinatorLayout(
 
     private var appBarLayout: StackHeaderAppBarLayout? = null
 
-    private var toolbarMenuForwardIdMap = emptyMap<String, Int>()
-    private var toolbarMenuGroupMetadata = StackHeaderToolbarMenuGroupMetadata.EMPTY
-
     private val onNavigationIconClick: () -> Unit = {
-        val activity =
-            (stackScreen.context as? ReactContext)?.currentActivity
-                as? OnBackPressedDispatcherOwner
-        activity?.onBackPressedDispatcher?.onBackPressed()
+        backPressHandler.handleHeaderBackButtonPress(stackScreen)
     }
 
-    private fun processUpdate(provider: StackHeaderConfigurationProviding) {
-        val needsRebuild = provider.invalidationFlags.needsRebuild
+    private fun processUpdate(
+        provider: StackHeaderConfigurationProviding,
+        forcedFlags: StackHeaderInvalidationFlags = StackHeaderInvalidationFlags.NONE,
+    ) {
+        val effectiveFlags = provider.invalidationFlags or forcedFlags
+        val needsRebuild = effectiveFlags.needsRebuild
         if (needsRebuild) {
             resetHeader()
             if (provider.hidden) {
@@ -215,60 +169,61 @@ internal class StackHeaderCoordinatorLayout(
 
         val appBar = appBarLayout
         if (appBar != null) {
-            if (needsRebuild || provider.invalidationFlags.containsAny(StackHeaderInvalidationFlags.TITLE)) {
-                applicator.applyTitle(appBar, provider)
+            if (needsRebuild || effectiveFlags.containsAny(StackHeaderInvalidationFlags.TITLE)) {
+                applicator.applyTitleAndSubtitle(appBar, provider, isAppBarFullyCollapsed)
                 provider.clearInvalidationFlags(StackHeaderInvalidationFlags.TITLE)
             }
 
-            if (needsRebuild || provider.invalidationFlags.containsAny(StackHeaderInvalidationFlags.BACK_BUTTON)) {
+            if (needsRebuild || effectiveFlags.containsAny(StackHeaderInvalidationFlags.TITLE_APPEARANCE)) {
+                applicator.applyTitleAndSubtitleAppearance(appBar, provider)
+                provider.clearInvalidationFlags(StackHeaderInvalidationFlags.TITLE_APPEARANCE)
+            }
+
+            if (needsRebuild || effectiveFlags.containsAny(StackHeaderInvalidationFlags.TITLE_POSITIONING)) {
+                applicator.applyTitlePositioning(appBar, provider)
+                provider.clearInvalidationFlags(StackHeaderInvalidationFlags.TITLE_POSITIONING)
+            }
+
+            if (needsRebuild || effectiveFlags.containsAny(StackHeaderInvalidationFlags.CONTENT_INSETS)) {
+                applicator.applyContentInsets(appBar, provider)
+                provider.clearInvalidationFlags(StackHeaderInvalidationFlags.CONTENT_INSETS)
+            }
+
+            if (needsRebuild || effectiveFlags.containsAny(StackHeaderInvalidationFlags.BACK_BUTTON)) {
                 applicator.applyBackButton(appBar.toolbar, provider, canNavigateBack, onNavigationIconClick)
                 provider.clearInvalidationFlags(StackHeaderInvalidationFlags.BACK_BUTTON)
             }
 
-            if (needsRebuild || provider.invalidationFlags.containsAny(StackHeaderInvalidationFlags.SCROLL_FLAGS)) {
+            if (needsRebuild || effectiveFlags.containsAny(StackHeaderInvalidationFlags.SCROLL_FLAGS)) {
                 applicator.applyScrollFlags(appBar, provider)
                 provider.clearInvalidationFlags(StackHeaderInvalidationFlags.SCROLL_FLAGS)
             }
 
-            if (provider.invalidationFlags.containsAny(StackHeaderInvalidationFlags.TOOLBAR_MENU)) {
-                val (forwardIdMap, reverseIdMap) =
-                    applicator.generateToolbarMenuItemMappings(
-                        provider.toolbarMenu,
-                    )
-                val forwardGroupIdMap =
-                    applicator.generateToolbarMenuGroupMappings(
-                        provider.toolbarMenu,
-                    )
-                val groupMetadata =
-                    applicator.computeGroupMetadata(
-                        provider.toolbarMenu,
-                    )
-
-                applicator.validateRadioInitialSelection(provider.toolbarMenu)
-
-                toolbarMenuForwardIdMap = forwardIdMap
-                toolbarMenuGroupMetadata = groupMetadata
-
-                applicator.rebuildToolbarMenu(
-                    appBar.toolbar,
-                    provider.toolbarMenu,
-                    forwardIdMap,
-                    reverseIdMap,
-                    forwardGroupIdMap,
-                    groupDividerEnabled = provider.toolbarMenuGroupDividerEnabled,
-                    onItemClicked = { id, menuItem ->
-                        if (menuItem.isCheckable) {
-                            applyGroupItemStateChange(appBar.toolbar, id)?.let { groupId ->
-                                emitGroupSelection(appBar.toolbar, groupId)
-                            }
-                        } else {
-                            currentDelegate?.onMenuItemClicked(id)
-                        }
-                    },
+            if (needsRebuild || effectiveFlags.containsAny(StackHeaderInvalidationFlags.BACKGROUND_COLORS)) {
+                applicator.applyBackgroundColors(appBar, provider)
+                provider.clearInvalidationFlags(StackHeaderInvalidationFlags.BACKGROUND_COLORS)
+            }
+
+            if (needsRebuild || effectiveFlags.containsAny(StackHeaderInvalidationFlags.LIFT_ON_SCROLL)) {
+                // Lift-on-scroll is disabled in transparent mode: there is no content
+                // scrolling behavior installed and the app bar overlays the content.
+                applicator.applyLiftOnScroll(
+                    appBar,
+                    enabled = provider.liftOnScroll && !provider.transparent,
+                    targetScrollView = stackScreen.findContentScrollView(),
                 )
+                provider.clearInvalidationFlags(StackHeaderInvalidationFlags.LIFT_ON_SCROLL)
+            }
 
+            if (needsRebuild || effectiveFlags.containsAny(StackHeaderInvalidationFlags.TOOLBAR_MENU)) {
+                provider.toolbarMenuController.attach(appBar.toolbar)
                 provider.clearInvalidationFlags(StackHeaderInvalidationFlags.TOOLBAR_MENU)
             }
+
+            if (needsRebuild || effectiveFlags.containsAny(StackHeaderInvalidationFlags.OVERFLOW_ICON)) {
+                applicator.applyOverflowIcon(appBar.toolbar, provider)
+                provider.clearInvalidationFlags(StackHeaderInvalidationFlags.OVERFLOW_ICON)
+            }
         }
 
         onMaybeHeaderLayoutChanged()
@@ -276,64 +231,62 @@ internal class StackHeaderCoordinatorLayout(
 
     // endregion
 
-    // region Group selection
-
-    /**
-     * Mutates the checked state of [itemId] within its group and returns the id of the group
-     * whose selection changed, or `null` when nothing changed (the item is not in a group, an
-     * invalid attempt to uncheck a single-selection item, or the item was already in the
-     * target state). Does not emit — callers decide when to emit so that batched updates can
-     * coalesce into one event per group.
-     */
-    private fun applyGroupItemStateChange(
-        toolbar: MaterialToolbar,
-        itemId: String,
-        explicitCheckedValue: Boolean? = null,
-    ): String? {
-        val groupId = toolbarMenuGroupMetadata.itemGroupMap[itemId] ?: return null
-        val singleSelection = toolbarMenuGroupMetadata.groupSingleSelection[groupId] ?: return null
-        val intId = toolbarMenuForwardIdMap[itemId] ?: return null
-        val menuItem = toolbar.menu.findItem(intId) ?: return null
-
-        if (singleSelection && explicitCheckedValue == false) {
-            Log.w(
-                TAG,
-                "[RNScreens] Cannot uncheck item '$itemId' in single-selection group '$groupId'. " +
-                    "Check a different item instead.",
-            )
-            return null
-        }
+    // region Color scheme
 
-        val newChecked =
-            if (singleSelection) {
-                true
-            } else {
-                explicitCheckedValue ?: !menuItem.isChecked
-            }
-        if (menuItem.isChecked == newChecked) return null
-        menuItem.isChecked = newChecked
+    private val colorSchemeCoordinator = ColorSchemeCoordinator()
+
+    // Night mode the header visuals were last applied against. Unlike the coordinator's
+    // internal dedupe (reset on every setup()), this survives detach/reattach, skipping
+    // redundant full re-applies e.g. on tab switches.
+    private var appliedUiNightMode: Int =
+        context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+
+    override fun getResolvedUiNightMode() = colorSchemeCoordinator.getResolvedUiNightMode()
+
+    override fun addColorSchemeListener(listener: ColorSchemeListener) = colorSchemeCoordinator.addColorSchemeListener(listener)
+
+    override fun removeColorSchemeListener(listener: ColorSchemeListener) = colorSchemeCoordinator.removeColorSchemeListener(listener)
 
-        return groupId
+    // No onConfigurationChanged override is needed: this view never sets its own colorScheme,
+    // so resolution always delegates to the parent provider, which does handle system changes.
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        colorSchemeCoordinator.setup(this) { applyUiNightMode(it) }
     }
 
-    private fun emitGroupSelection(
-        toolbar: MaterialToolbar,
-        groupId: String,
-    ) {
-        currentDelegate?.onGroupSelectionChanged(groupId, collectSelectedIds(toolbar, groupId))
+    override fun onDetachedFromWindow() {
+        colorSchemeCoordinator.teardown()
+        super.onDetachedFromWindow()
     }
 
-    private fun collectSelectedIds(
-        toolbar: MaterialToolbar,
-        groupId: String,
-    ): List<String> =
-        toolbarMenuGroupMetadata
-            .groupMemberItems[groupId]
-            .orEmpty()
-            .filter { memberId ->
-                val intId = toolbarMenuForwardIdMap[memberId] ?: return@filter false
-                toolbar.menu.findItem(intId)?.isChecked == true
+    private fun applyUiNightMode(uiNightMode: Int) {
+        wrappedContext.setTheme(
+            when (uiNightMode) {
+                Configuration.UI_MODE_NIGHT_YES -> R.style.Theme_Material3Expressive_Dark_NoActionBar
+                Configuration.UI_MODE_NIGHT_NO -> R.style.Theme_Material3Expressive_Light_NoActionBar
+                else -> R.style.Theme_Material3Expressive_DayNight_NoActionBar
+            },
+        )
+
+        if (uiNightMode == appliedUiNightMode) {
+            return
+        }
+
+        appliedUiNightMode = uiNightMode
+        currentProvider?.let {
+            // A rebuild is forced because MaterialToolbar snapshots its theme at construction:
+            // ripples, the overflow popup and menu item views resolve from that frozen copy, so
+            // only view recreation refreshes them.
+            val wasFullyCollapsed = isAppBarFullyCollapsed
+            processUpdate(it, forcedFlags = StackHeaderInvalidationFlags.STRUCTURE)
+            // The rebuilt app bar starts expanded; restore the fully-collapsed resting state
+            // so a scrolled-down screen doesn't jump. Fractional offsets reset.
+            if (wasFullyCollapsed) {
+                appBarLayout?.setExpanded(false, false)
             }
+        }
+    }
 
     // endregion
 
@@ -345,8 +298,9 @@ internal class StackHeaderCoordinatorLayout(
             removeView(it)
         }
         appBarLayout = null
-        toolbarMenuForwardIdMap = emptyMap()
-        toolbarMenuGroupMetadata = StackHeaderToolbarMenuGroupMetadata.EMPTY
+        // A rebuilt header starts fully expanded; drop any stale collapsed state from the old one.
+        isAppBarFullyCollapsed = false
+        currentProvider?.toolbarMenuController?.detach()
     }
 
     private fun removeHeader() {
@@ -383,6 +337,22 @@ internal class StackHeaderCoordinatorLayout(
 
     // endregion
 
+    // region Instance state
+
+    override fun dispatchSaveInstanceState(container: SparseArray<Parcelable>) {
+        // Do nothing. This view is the root of a fragment-managed, react-owned hierarchy that
+        // React Native keeps alive, so there is no need to serialize/deserialize native view
+        // state. View ids in this subtree are react tags, which are not stable identities -
+        // restoring state by id can apply state saved by one view type to a different one,
+        // crashing e.g. in CompoundButton (see #4523).
+    }
+
+    override fun dispatchRestoreInstanceState(container: SparseArray<Parcelable>) {
+        // Ignore restoring instance state too, as we are not saving anything anyways.
+    }
+
+    // endregion
+
     // region Init
 
     internal var stackScreenWrapper: FrameLayout
@@ -411,6 +381,8 @@ internal class StackHeaderCoordinatorLayout(
     // region Teardown
 
     internal fun tearDown() {
+        colorSchemeCoordinator.teardown()
+
         removeHeader()
 
         stackScreenWrapper.removeView(stackScreen)
@@ -423,8 +395,4 @@ internal class StackHeaderCoordinatorLayout(
     }
 
     // endregion
-
-    companion object {
-        private const val TAG = "StackHeaderCoordinatorLayout"
-    }
 }

package/android/src/main/java/com/swmansion/rnscreens/stack/header/StackHeaderFrameSynchronizer.kt

@@ -0,0 +1,63 @@
+package com.swmansion.rnscreens.stack.header
+
+import com.swmansion.rnscreens.stack.header.appbar.StackHeaderAppBarLayout
+import com.swmansion.rnscreens.stack.header.config.StackHeaderConfigurationProviding
+import com.swmansion.rnscreens.stack.header.config.StackHeaderDelegate
+import com.swmansion.rnscreens.stack.header.subview.StackHeaderSubviewProviding
+
+/**
+ * Reports the header's frame and subview origins to the delegate as the app bar
+ * lays out or scrolls.
+ */
+internal object StackHeaderFrameSynchronizer {
+    internal fun sync(
+        appBar: StackHeaderAppBarLayout,
+        provider: StackHeaderConfigurationProviding,
+        delegate: StackHeaderDelegate,
+    ) {
+        // When config is transparent, the StackScreen is static so we need to offset the header
+        // config by the offset of the AppBarLayout (which is 0 or is negative). When config is
+        // opaque, the Screen always moves with the config, that's why we need to offset the
+        // header config by the negative value of AppBarLayout's height.
+        val configOffset = if (provider.transparent) appBar.top else appBar.top - appBar.bottom
+
+        delegate.onHeaderFrameChanged(
+            appBar.width,
+            appBar.height,
+            configOffset,
+        )
+
+        updateSubviewOffsets(appBar, provider, delegate)
+    }
+
+    private fun updateSubviewOffsets(
+        appBar: StackHeaderAppBarLayout,
+        config: StackHeaderConfigurationProviding,
+        delegate: StackHeaderDelegate,
+    ) {
+        config.leadingSubview?.let { updateSubviewOffset(it, appBar, delegate) }
+        config.centerSubview?.let { updateSubviewOffset(it, appBar, delegate) }
+        config.trailingSubview?.let { updateSubviewOffset(it, appBar, delegate) }
+        config.backgroundSubview?.let { updateSubviewOffset(it, appBar, delegate) }
+    }
+
+    private fun updateSubviewOffset(
+        subview: StackHeaderSubviewProviding,
+        appBar: StackHeaderAppBarLayout,
+        delegate: StackHeaderDelegate,
+    ) {
+        val view = subview.view
+        if (view.width == 0 && view.height == 0) return
+
+        val appBarPos = IntArray(2)
+        val subviewPos = IntArray(2)
+        appBar.getLocationInWindow(appBarPos)
+        view.getLocationInWindow(subviewPos)
+
+        delegate.onSubviewOriginChanged(
+            subview.type,
+            x = subviewPos[0] - appBarPos[0],
+            y = subviewPos[1] - appBarPos[1],
+        )
+    }
+}