@momo-kits/native-kits 0.167.1-duo.14-debug → 0.167.1-duo.15-debug

package/CLAUDE.md

@@ -68,7 +68,7 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 
 - `layout/ScreenLayout.kt`: `getScreenLayout()` returns window size, raw top/bottom + side insets, `contentWidth`, header geometry, the iPhone Duo `sideBar` and `duoTopInset`. `NavigationContainer` computes it once and provides `LocalScreenLayout`; reactive to fold/unfold and rotation (window size + `WindowInsets`). Metrics (`DuoMetrics`, 72pt iPhone header floor, 20pt status-bar threshold) mirror RN `Layout/utils.ts` — change both together.
 - iPhone-only: everything gates on `isPhoneIdiom()` (`platform/`), never on "iOS", so iPad windows keep the regular layout. Two detectors, as in RN: `isIPhoneDuo` (window aspect < 1.6 or asymmetric side insets) drives layout; `isIPhoneDuoDevice` (short side of screen or window > 440, RN `device.ts`) drives popups, modal and bottom sheet.
-- Header height is `headerHeight` (not `AppStatusBar + HEADER_HEIGHT`); the bar row is `headerBarHeight` and starts `headerStatusBarHeight` below the window top. When the status bar is off the top edge (iPhone landscape, iPhone Duo) `headerStatusBarHeight` is 0 so the title stays centered — except on the Duo outer display in portrait, where the header is 76pt and the row starts at 14pt so the title centers on the camera punchout.
+- Header height is `headerHeight` (not `AppStatusBar + HEADER_HEIGHT`); the bar row is `headerBarHeight` and starts `headerStatusBarHeight` below the window top. When the status bar is off the top edge (iPhone landscape, iPhone Duo) `headerStatusBarHeight` is 0 so the title stays centered — except on the Duo outer display: in portrait the header is 76pt and the row starts at 14pt so the title centers on the camera punchout; in landscape the row centers on the camera when it sits at the top end of the strip (else on the back button) and the header reaches 8pt below the back button.
 - iPhone Duo with a side strip ≥ 60pt: back + toolkit leave the bar for `HeaderSideBar` (`navigation/component/SideBar.kt`, 48pt glass controls); custom header-right stays in the bar. `sideBar.top` is 170pt in portrait, 120pt on the inner display in landscape (height ≥ 600), 24pt on the outer display in landscape, or below the header when the status bar is on top; UIKit's `statusBarFrame` is useless on Duo. Unlike RN the column is clamped above footer (24pt gap) / rail (12pt gap).
 - Reserved regions (iOS 27.1 `reservedRegionsOfKind:`, reached through the ObjC runtime so older SDKs still build): a probe `UIView` (`platform/ReservedRegions.ios.kt` on the Compose root view; `ReservedRegionsProbe` inside SwiftUI `momoScreenLayout()`) re-reads them in `layoutSubviews`, which UIKit re-runs when they change. They push `sideBar.top` below the status cluster as it grows for calls / Live Activities, and `sideBar.bottom` (≥ 24pt) above a camera at the bottom end of the strip.
 - Tab bar on Duo is `bottomtab/DuoTabBar.kt`: a rail in the side strip (`sideBar.bottom` above the window bottom, QR below it) or, without a side bar, a floating bar spanning 6/8 grid columns. Both overlay the content; `duoFloatingTabBarInset` pads tab content, footer and FAB.

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.167.1-duo.14-debug"
+        version = "0.167.1-duo.15-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.167.1-beta.4-debug'
+    spec.version                  = '0.167.1-duo.15-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/ScreenLayout.kt

@@ -97,8 +97,10 @@ fun getScreenLayout(): ScreenLayout =
 internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null): ScreenLayout {
     val isPhone = isPhoneIdiom()
     if (parent != null) {
+        // the parent's row center reproduces its own centered geometry
+        val titleCenterY = parent.headerStatusBarHeight + parent.headerBarHeight / 2
         val (headerHeight, headerStatusBarHeight) =
-            headerGeometry(topInset, isPhone, parent.width, parent.height, parent.sideBar != null)
+            headerGeometry(topInset, isPhone, parent.width, parent.height, parent.sideBar != null, titleCenterY)
         return parent.copy(headerHeight = headerHeight, headerStatusBarHeight = headerStatusBarHeight)
     }
 
@@ -139,32 +141,53 @@ internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null):
 internal fun ScreenLayout.consumeHorizontalInsets(): ScreenLayout =
     copy(width = contentWidth, insetLeft = 0.dp, insetRight = 0.dp, sideBar = null)
 
-private fun headerGeometry(topInset: Dp, isPhone: Boolean, width: Dp, height: Dp, hasSideBar: Boolean): Pair<Dp, Dp> {
+// titleCenterY: window y the title row centers on for the outer display in landscape.
+private fun headerGeometry(
+    topInset: Dp,
+    isPhone: Boolean,
+    width: Dp,
+    height: Dp,
+    hasSideBar: Boolean,
+    titleCenterY: Dp,
+): Pair<Dp, Dp> {
     val headerHeight = topInset + HEADER_HEIGHT.dp
     if (!isPhone) return headerHeight to topInset
-    if (hasSideBar && topInset < STATUS_BAR_MIN_INSET && height > width && width < DuoMetrics.innerMinHeight) {
-        // outer display: the row starts below the top so the title centers on the camera
-        return DuoMetrics.outerHeaderHeight to DuoMetrics.outerCameraCenterY * 2 - DuoMetrics.outerHeaderHeight
+    if (hasSideBar && topInset < STATUS_BAR_MIN_INSET) {
+        if (height > width && width < DuoMetrics.innerMinHeight) {
+            // outer display: the row starts below the top so the title centers on the camera
+            return DuoMetrics.outerHeaderHeight to DuoMetrics.outerCameraCenterY * 2 - DuoMetrics.outerHeaderHeight
+        }
+        if (width > height && height < DuoMetrics.innerMinHeight) {
+            // reaches 8pt below a side bar control centered on the row
+            val centered = maxOf(IPHONE_HEADER_MIN_HEIGHT, titleCenterY + DuoMetrics.controlSize / 2 + Spacing.S)
+            return centered to maxOf(0.dp, titleCenterY * 2 - centered)
+        }
     }
     return maxOf(headerHeight, IPHONE_HEADER_MIN_HEIGHT) to if (topInset < STATUS_BAR_MIN_INSET) 0.dp else topInset
 }
 
-private data class StripOcclusion(val top: Dp, val bottom: Dp)
+private data class StripOcclusion(val top: Dp, val topCenter: Dp, val bottom: Dp)
 
 // How far system regions reach into a side strip from its top and from its bottom end
-// (e.g. the camera, which sits at either end depending on the rotation).
+// (e.g. the camera, which sits at either end depending on the rotation), and the center y
+// of the region reaching furthest from the top.
 private fun stripOcclusion(regions: List<ReservedRegion>, stripLeft: Dp, stripRight: Dp, windowHeight: Dp): StripOcclusion {
     var top = 0.dp
+    var topCenter = 0.dp
     var bottom = 0.dp
     regions.forEach { region ->
         if (region.x >= stripRight || region.x + region.width <= stripLeft) return@forEach
-        if (region.y + region.height / 2 < windowHeight / 2) {
-            top = maxOf(top, region.y + region.height)
+        val centerY = region.y + region.height / 2
+        if (centerY < windowHeight / 2) {
+            if (region.y + region.height > top) {
+                top = region.y + region.height
+                topCenter = centerY
+            }
         } else {
             bottom = maxOf(bottom, windowHeight - region.y)
         }
     }
-    return StripOcclusion(top, bottom)
+    return StripOcclusion(top, topCenter, bottom)
 }
 
 // Slab iPhones report equal side insets in landscape; iPhone Duo moves the status bar to one side.
@@ -189,9 +212,15 @@ private fun screenLayoutOf(
     val isIPhoneDuo = isPhone && isIPhoneDuoWindow(width, height, asymmetricInsets)
 
     var sideBar: SideBarLayout? = null
+    var titleCenterY = 0.dp
     val sideInset = maxOf(insetLeft, insetRight)
     // narrower strips cannot host a control 12pt from the inner edge
     if (isIPhoneDuo && sideInset >= DuoMetrics.controlSize + Spacing.M) {
+        val edge = if (insetRight >= insetLeft) SideBarEdge.RIGHT else SideBarEdge.LEFT
+        val stripLeft = if (edge == SideBarEdge.RIGHT) width - sideInset else 0.dp
+        // clear of the camera and of the status bar cluster, which grows for calls and Live
+        // Activities; region frames already include the system's margin
+        val occlusion = stripOcclusion(reservedRegions, stripLeft, stripLeft + sideInset, height)
         // UIKit reports no usable status bar frame here (a 2pt top strip), so the spot is inferred like RN
         val top = when {
             topInset >= STATUS_BAR_MIN_INSET -> topInset + HEADER_HEIGHT.dp + Spacing.M
@@ -200,11 +229,9 @@ private fun screenLayoutOf(
             // outer display in landscape: no status bar in the strip
             else -> DuoMetrics.edgeInset
         }
-        val edge = if (insetRight >= insetLeft) SideBarEdge.RIGHT else SideBarEdge.LEFT
-        val stripLeft = if (edge == SideBarEdge.RIGHT) width - sideInset else 0.dp
-        // clear of the camera and of the status bar cluster, which grows for calls and Live
-        // Activities; region frames already include the system's margin
-        val occlusion = stripOcclusion(reservedRegions, stripLeft, stripLeft + sideInset, height)
+        // outer display in landscape: the title row centers on the camera when it sits at the
+        // top end, otherwise on the back button
+        titleCenterY = if (occlusion.top > top) occlusion.topCenter else top + DuoMetrics.controlSize / 2
         sideBar = SideBarLayout(
             edge = edge,
             width = sideInset,
@@ -212,7 +239,8 @@ private fun screenLayoutOf(
             bottom = maxOf(DuoMetrics.edgeInset, occlusion.bottom),
         )
     }
-    val (headerHeight, headerStatusBarHeight) = headerGeometry(topInset, isPhone, width, height, sideBar != null)
+    val (headerHeight, headerStatusBarHeight) =
+        headerGeometry(topInset, isPhone, width, height, sideBar != null, titleCenterY)
 
     return ScreenLayout(
         width = width,

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/StackScreen.kt

@@ -431,9 +431,10 @@ fun Footer(
 
     val backgroundColor = if (transparent) Color.Transparent else AppTheme.current.colors.background.surface
 
+    // inset as a whole, not padded inside, so the surface and its shadow stay off the iPhone Duo side bar
     Box(Modifier.onGloballyPositioned {
         if (footerHeightPx.intValue != it.size.height) footerHeightPx.intValue = it.size.height
-    }) {
+    }.horizontalSafeAreaPadding()) {
         Box(
             Modifier
                 .fillMaxWidth()
@@ -441,7 +442,6 @@ fun Footer(
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
                 }
-                .horizontalSafeAreaPadding()
                 .padding(
                     top = if (useMargin) Spacing.S else 0.dp,
                     start = if (useMargin) Spacing.M else 0.dp,

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderBackground.kt

@@ -22,6 +22,7 @@ import vn.momo.kits.layout.getScreenLayout
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
+import vn.momo.kits.navigation.getInputSearchType
 import vn.momo.kits.navigation.usesDuoGlassHeader
 
 enum class AnimatedHeaderRatio(val value: Float){
@@ -66,18 +67,28 @@ internal fun HeaderBackground() {
 
     // iPhone Duo glass header: the gradient leaves with the content, as the quick return header does
     val useDuoGlass = options.usesDuoGlassHeader(layout)
-    val duoModifier = if (useDuoGlass) {
-        val extra = if (options.headerType is HeaderType.Extended) DUO_GRADIENT_EXTRA else 0.dp
-        Modifier.height(minHeight + extra).graphicsLayer { translationY = -scrollState.value.toFloat() }
-    } else {
-        Modifier.height(height)
+    // RN HeaderExtendHeader with search on the side bar layout: the gradient fills the header box,
+    // which for extended shrinks from 52pt below the header over the first 100pt of scroll
+    val duoSearch = layout.sideBar != null && getInputSearchType(options) != InputSearchType.None
+    val fillsBox = useDuoGlass || duoSearch
+    val duoModifier = when {
+        useDuoGlass -> {
+            val extra = if (options.headerType is HeaderType.Extended) DUO_GRADIENT_EXTRA else 0.dp
+            Modifier.height(minHeight + extra).graphicsLayer { translationY = -scrollState.value.toFloat() }
+        }
+        duoSearch && options.headerType is HeaderType.Extended -> {
+            val progress = (with(density) { scrollState.value.toDp() } / 100.dp).coerceIn(0f, 1f)
+            Modifier.height(minHeight + DUO_GRADIENT_EXTRA * (1 - progress))
+        }
+        duoSearch -> Modifier.height(minHeight)
+        else -> Modifier.height(height)
     }
 
     Box(Modifier.fillMaxWidth().then(duoModifier).clipToBounds().background(backgroundColor)) {
         // on Duo the fade spans the gradient box; a banner image keeps its 375:154 shape, clipped
         Box(Modifier
             .fillMaxWidth()
-            .then(if (useDuoGlass && !theme.isHeaderImage()) Modifier.fillMaxHeight() else Modifier.height(maxHeight))
+            .then(if (fillsBox && !theme.isHeaderImage()) Modifier.fillMaxHeight() else Modifier.height(maxHeight))
             .conditional(!theme.isHeaderImage()) {
                 background(Brush.verticalGradient(colors = listOf(color, backgroundColor)))
             }

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/ReservedRegions.ios.kt

@@ -10,9 +10,12 @@ import androidx.compose.ui.uikit.LocalUIViewController
 import androidx.compose.ui.unit.dp
 import kotlinx.cinterop.BetaInteropApi
 import kotlinx.cinterop.ExperimentalForeignApi
+import kotlinx.cinterop.interpretObjCPointer
+import kotlinx.cinterop.objcPtr
 import kotlinx.cinterop.readValue
 import kotlinx.cinterop.useContents
 import platform.CoreGraphics.CGRectZero
+import platform.Foundation.NSArray
 import platform.Foundation.NSSelectorFromString
 import platform.Foundation.NSValue
 import platform.Foundation.valueForKey
@@ -21,7 +24,6 @@ import platform.UIKit.UIView
 import platform.UIKit.UIViewAutoresizingFlexibleHeight
 import platform.UIKit.UIViewAutoresizingFlexibleWidth
 import platform.darwin.NSObject
-import platform.darwin.NSObjectProtocol
 import platform.Foundation.NSClassFromString
 
 // The API is newer than the SDK Kotlin/Native binds, so it is reached through the runtime.
@@ -31,9 +33,15 @@ private val regionsOfKind = NSSelectorFromString("reservedRegionsOfKind:")
 @OptIn(ExperimentalForeignApi::class, BetaInteropApi::class)
 private fun UIView.occlusionRegions(target: UIView): List<ReservedRegion> {
     if (window == null || !respondsToSelector(regionsOfKind)) return emptyList()
-    val kindClass = NSClassFromString("UIViewReservedRegionKind") as? NSObjectProtocol ?: return emptyList()
+    // a class object fails `as? NSObjectProtocol` (K/N checks it as an instance), so it is reinterpreted
+    val kindClass = NSClassFromString("UIViewReservedRegionKind")
+        ?.let { interpretObjCPointer<NSObject>(it.objcPtr()) } ?: return emptyList()
     val kind = kindClass.performSelector(NSSelectorFromString("occlusionRegionKind")) ?: return emptyList()
-    val regions = performSelector(regionsOfKind, withObject = kind) as? List<*> ?: return emptyList()
+    val regions = when (val result = performSelector(regionsOfKind, withObject = kind)) {
+        is List<*> -> result
+        is NSArray -> List(result.count.toInt()) { result.objectAtIndex(it.toULong()) }
+        else -> return emptyList()
+    }
     return regions.mapNotNull { region ->
         val frame = ((region as? NSObject)?.valueForKey("frame") as? NSValue)?.CGRectValue ?: return@mapNotNull null
         convertRect(frame, toView = target).useContents {

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.167.1-beta.4
+version=0.167.1-duo.15
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Layout/ScreenLayout.swift

@@ -110,6 +110,12 @@ extension ScreenLayout {
         let sideInset = max(insets.leading, insets.trailing)
         // narrower strips cannot host a control 12pt from the inner edge
         if sideInset >= DuoMetrics.controlSize + Spacing.M {
+            let edge: SideBarEdge = insets.trailing >= insets.leading ? .right : .left
+            let stripLeft = edge == .right ? width - sideInset : 0
+            // clear of the camera and of the status bar cluster, which grows for calls and Live
+            // Activities; region frames already include the system's margin
+            let occlusion = stripOcclusion(reservedRegions, stripLeft: stripLeft, stripRight: stripLeft + sideInset, windowHeight: height)
+
             var top = insets.top + HeaderMetrics.barHeight + Spacing.M
             if insets.top < HeaderMetrics.statusBarMinInset {
                 // status bar lives in the strip: start under its cluster, as the native bar does
@@ -118,8 +124,11 @@ extension ScreenLayout {
                 } else if height >= DuoMetrics.innerMinHeight {
                     top = DuoMetrics.firstItemTopLandscape
                 } else {
-                    // outer display in landscape: no status bar in the strip
+                    // outer display in landscape: no status bar in the strip, the title row centers
+                    // on the camera when it sits at the top end, otherwise on the back button
                     top = DuoMetrics.edgeInset
+                    let titleCenterY = occlusion.top > top ? occlusion.topCenter : top + DuoMetrics.controlSize / 2
+                    (headerHeight, headerStatusBarHeight) = centeredHeaderGeometry(centerY: titleCenterY)
                 }
 
                 if height > width && width < DuoMetrics.innerMinHeight {
@@ -129,11 +138,6 @@ extension ScreenLayout {
                 }
             }
 
-            let edge: SideBarEdge = insets.trailing >= insets.leading ? .right : .left
-            let stripLeft = edge == .right ? width - sideInset : 0
-            // clear of the camera and of the status bar cluster, which grows for calls and Live
-            // Activities; region frames already include the system's margin
-            let occlusion = stripOcclusion(reservedRegions, stripLeft: stripLeft, stripRight: stripLeft + sideInset, windowHeight: height)
             sideBar = SideBarLayout(
                 edge: edge,
                 width: sideInset,
@@ -159,18 +163,29 @@ extension ScreenLayout {
         )
     }
 
+    /// Bar row centered on a window y, at least iPhoneMinHeight tall and reaching 8pt below
+    /// a side bar control centered there.
+    private static func centeredHeaderGeometry(centerY: CGFloat) -> (CGFloat, CGFloat) {
+        let height = max(HeaderMetrics.iPhoneMinHeight, centerY + DuoMetrics.controlSize / 2 + Spacing.S)
+        return (height, max(0, centerY * 2 - height))
+    }
+
     /// How far system regions reach into a side strip from its top and from its bottom end
-    /// (e.g. the camera, which sits at either end depending on the rotation).
+    /// (e.g. the camera, which sits at either end depending on the rotation), and the center y
+    /// of the region reaching furthest from the top.
     private static func stripOcclusion(
         _ regions: [CGRect],
         stripLeft: CGFloat,
         stripRight: CGFloat,
         windowHeight: CGFloat
-    ) -> (top: CGFloat, bottom: CGFloat) {
-        regions.reduce(into: (top: CGFloat(0), bottom: CGFloat(0))) { occlusion, region in
+    ) -> (top: CGFloat, topCenter: CGFloat, bottom: CGFloat) {
+        regions.reduce(into: (top: CGFloat(0), topCenter: CGFloat(0), bottom: CGFloat(0))) { occlusion, region in
             guard region.minX < stripRight && region.maxX > stripLeft else { return }
             if region.midY < windowHeight / 2 {
-                occlusion.top = max(occlusion.top, region.maxY)
+                if region.maxY > occlusion.top {
+                    occlusion.top = region.maxY
+                    occlusion.topCenter = region.midY
+                }
             } else {
                 occlusion.bottom = max(occlusion.bottom, windowHeight - region.minY)
             }
@@ -204,16 +219,20 @@ public func isIPhoneDuoDevice(windowSize: CGSize? = nil) -> Bool {
 /// System occlusion regions (iOS 27.1+) in window coordinates: the iPhone Duo camera, and the
 /// status bar cluster as it grows for a call or a Live Activity. Empty before iOS 27.1.
 enum ReservedRegions {
-    // last report of the probe, so `ScreenLayout.current` includes it
-    static var current: [CGRect] = []
+    // last report of a probe, so `ScreenLayout.current` includes it
+    private(set) static var current: [CGRect] = []
+    static let didChange = Notification.Name("MoMoUIKitsReservedRegionsDidChange")
+
+    fileprivate static func publish(_ regions: [CGRect]) {
+        guard regions != current else { return }
+        current = regions
+        NotificationCenter.default.post(name: didChange, object: nil)
+    }
 }
 
 /// Invisible probe: reading the regions in layoutSubviews makes UIKit run it again when they
 /// change, so nothing polls. Port of RN `@momo-kits/reserved-regions`.
 private final class ReservedRegionsProbe: UIView {
-    var onChange: (() -> Void)?
-    private var last: [CGRect]?
-
     override init(frame: CGRect) {
         super.init(frame: frame)
         isUserInteractionEnabled = false
@@ -223,12 +242,19 @@ private final class ReservedRegionsProbe: UIView {
 
     override func layoutSubviews() {
         super.layoutSubviews()
+        // read even when not publishing, so UIKit keeps re-running this when they change
         let regions = occlusionRegions()
-        guard regions != last else { return }
-        last = regions
-        ReservedRegions.current = regions
+        // every screen has a probe but the regions are window-wide: one sliding in on a push or
+        // a present, or off the window, would overwrite them with a partial read
+        guard spansWindow else { return }
         // layout pass: publish on the next turn instead of mutating SwiftUI state mid-update
-        DispatchQueue.main.async { [weak self] in self?.onChange?() }
+        DispatchQueue.main.async { ReservedRegions.publish(regions) }
+    }
+
+    private var spansWindow: Bool {
+        guard let window else { return false }
+        let frame = convert(bounds, to: nil)
+        return abs(frame.minX) < 1 && abs(frame.maxX - window.bounds.width) < 1 && abs(frame.minY) < 1
     }
 
     override func didMoveToWindow() {
@@ -250,17 +276,9 @@ private final class ReservedRegionsProbe: UIView {
 }
 
 private struct ReservedRegionsProbeView: UIViewRepresentable {
-    let onChange: () -> Void
+    func makeUIView(context: Context) -> ReservedRegionsProbe { ReservedRegionsProbe() }
 
-    func makeUIView(context: Context) -> ReservedRegionsProbe {
-        let probe = ReservedRegionsProbe()
-        probe.onChange = onChange
-        return probe
-    }
-
-    func updateUIView(_ probe: ReservedRegionsProbe, context: Context) {
-        probe.onChange = onChange
-    }
+    func updateUIView(_ probe: ReservedRegionsProbe, context: Context) {}
 }
 
 // MARK: - Environment
@@ -292,7 +310,11 @@ private struct ScreenLayoutReader: ViewModifier {
                         .onChange(of: proxy.safeAreaInsets) { _ in refresh() }
                 }
             )
-            .background(ReservedRegionsProbeView { refresh() }.ignoresSafeArea())
+            .background(ReservedRegionsProbeView().ignoresSafeArea())
+            // any screen's probe may report, so every reader follows the shared value
+            .onReceive(NotificationCenter.default.publisher(for: ReservedRegions.didChange)) { _ in
+                refresh()
+            }
             .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
                 refresh()
             }

package/ios/Navigation/StackScreen.swift

@@ -431,13 +431,23 @@ public struct StackScreen<Content: View>: View {
                 // top-aligned: an extended band runs past the bar, under the content
                 .background(alignment: .top) {
                     ZStack(alignment: .top) {
-                        NavigationHeaderBackground(
-                            headerType: headerType,
-                            scrollState: scrollOffset,
-                            headerTransparent: headerTransparent,
-                            fullScreenContent: fullScreenContent,
-                            backgroundColor: backgroundColor
-                        )
+                        if layout.sideBar != nil && inputSearchType != .none && !headerTransparent {
+                            // RN HeaderExtendHeader with search on the side bar layout: the
+                            // gradient fades out within the header box, as without the search
+                            DuoScrollGradient(
+                                scrollOffset: scrollOffset,
+                                headerHeight: layout.headerHeight,
+                                extended: headerType == .extended
+                            )
+                        } else {
+                            NavigationHeaderBackground(
+                                headerType: headerType,
+                                scrollState: scrollOffset,
+                                headerTransparent: headerTransparent,
+                                fullScreenContent: fullScreenContent,
+                                backgroundColor: backgroundColor
+                            )
+                        }
                         HeaderBarBackground(opacity: opacity, transparent: headerTransparent || headerType == .none)
                     }
                     .edgesIgnoringSafeArea([.top, .horizontal])
@@ -688,6 +698,7 @@ public struct NavigationFooter: View {
     }
 
     @Environment(\.appTheme) private var theme
+    @Environment(\.screenLayout) private var layout
 
     /// Read from the window, not from an enclosing `GeometryProxy`: the proxy's bottom
     /// inset grows to the keyboard height while the keyboard is up.
@@ -733,9 +744,10 @@ public struct NavigationFooter: View {
             .padding(.bottom, Self.bottomPadding - (Spacing.S - margin))
             // Compose paints the surface all the way to the bottom of the screen; the
             // footer's own frame stops at the safe area, so only the fill bleeds down.
+            // With side insets (iPhone Duo) it stays inside them, off the side bar.
             .background(
                 (transparent ? Color.clear : theme.colors.background.surface)
-                    .ignoresSafeArea(.container, edges: [.bottom, .horizontal])
+                    .ignoresSafeArea(.container, edges: hasSideInsets ? .bottom : [.bottom, .horizontal])
             )
             .overlay(alignment: .top) {
                 if !transparent { shadow }
@@ -744,6 +756,8 @@ public struct NavigationFooter: View {
         }
     }
 
+    private var hasSideInsets: Bool { layout.insetLeft > 0 || layout.insetRight > 0 }
+
     /// Compose offsets the shadow box by -6dp, so it lands on the content above the
     /// footer rather than on the footer surface itself.
     private var shadow: some View {

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.167.1-beta.4'
+  s.version          = '0.167.1-duo.15'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.167.1-beta.4'
+  s.version          = '0.167.1-duo.15'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.167.1-duo.14-debug",
+  "version": "0.167.1-duo.15-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},