@momo-kits/native-kits 0.164.1-beta.9-debug → 0.164.1-headerconfig.1-debug

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

@@ -18,9 +18,7 @@ import androidx.compose.runtime.Stable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateMapOf
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
@@ -44,21 +42,14 @@ private const val SCRIM_MAX_ALPHA = 0.6f
 private const val EDGE_SHADOW_MAX_ALPHA = 0.3f
 private val EDGE_SHADOW_WIDTH = 8.dp
 
-/**
- * Kill switch for the swipe-back gesture. Set to `false` to make kit back handling always win,
- * which disables the predictive-back drag on both platforms — the gesture then pops without
- * following the finger, and fires no haptic. Screen transitions stay on the parallax curve either
- * way.
- */
+/** Kill switch: `false` restores pre-DS-760 back handling without a kit release. Transitions
+ *  stay on the new curve either way. */
 object SwipeBackConfig {
-    // Snapshot-backed so a host toggle takes effect on the next frame instead of waiting for an
-    // unrelated recomposition of StackScreen.
-    var enabled: Boolean by mutableStateOf(true)
+    var enabled: Boolean = true
 }
 
-// LinearEasing is mandatory, not a style choice: SeekableTransitionState.seekTo() maps the drag
-// fraction straight onto the animation timeline, so any curve would decouple the card from the
-// finger mid-gesture.
+// LinearEasing is mandatory: seekTo() maps drag fraction onto the timeline, so a curve would
+// decouple the card from the finger.
 private val stackSpec = tween<IntOffset>(STACK_TRANSITION_DURATION, easing = LinearEasing)
 
 internal fun AnimatedContentTransitionScope<NavBackStackEntry>.stackEnter(): EnterTransition =
@@ -76,13 +67,9 @@ internal fun AnimatedContentTransitionScope<NavBackStackEntry>.stackPopExit(): E
     slideOutHorizontally(stackSpec) { it }
 
 /**
- * Tracks which screen ids are currently composed so a screen can tell whether it is the top card
- * or the one underneath.
- *
- * Screen ids come from a single monotonic process-wide counter and NavHost keeps both entries
- * composed for the whole transition segment, so "highest composed stack id" is stable in both
- * directions. `currentBackStackEntry` is not usable here: it flips at frame 0 of a pop, which
- * would make the scrim vanish instantly instead of fading.
+ * Which composed screen is the top card. Ids are monotonic and NavHost keeps both entries composed
+ * for the whole segment, so "highest id" is stable both ways. `currentBackStackEntry` is not: it
+ * flips at frame 0 of a pop and the scrim would vanish instead of fading.
  */
 @Stable
 internal class StackTransitionCoordinator {
@@ -111,10 +98,8 @@ internal fun AnimatedVisibilityScope.StackTransitionDecor(
     content: @Composable () -> Unit,
 ) {
     val coordinator = LocalStackTransition.current
-    // attach() writes state that derivedStateOf { topStackId } reads in the same pass, so it has to
-    // stay out of the composable body.
-    DisposableEffect(coordinator, id, isStackRoute) {
-        coordinator.attach(id, isStackRoute)
+    coordinator.attach(id, isStackRoute)
+    DisposableEffect(coordinator, id) {
         onDispose { coordinator.detach(id) }
     }
 
@@ -147,8 +132,7 @@ internal fun AnimatedVisibilityScope.StackTransitionDecor(
             Box(
                 Modifier
                     .matchParentSize()
-                    // Both alphas are read inside drawBehind so a drag only re-draws; reading them
-                    // in the composable body would recompose the whole screen every gesture frame.
+                    // read inside drawBehind: in the body this would recompose every gesture frame
                     .drawBehind {
                         drawRect(
                             brush = shadowBrush,

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

@@ -7,19 +7,13 @@ import vn.momo.kits.platform.getScreenDimensions
 import vn.momo.kits.platform.rememberBackGestureProgress
 import vn.momo.maxapi.IMaxApi
 
-// RN fires the tick at a flat 100 px of thumb travel; keep it unscaled so the physical distance is
-// the same on every device.
-private const val SWIPE_BACK_HAPTIC_THRESHOLD_DP = 100f
+// Unscaled, so the tick lands at the same physical distance on every device.
+private const val SWIPE_BACK_HAPTIC_THRESHOLD_DP = 50f
 
-/**
- * Fires one light tick once the back gesture has travelled ~100dp, re-arming when the finger drops
- * back below the threshold. iOS only — [rememberBackGestureProgress] is always `null` on Android.
- */
+/** One light tick per crossing, re-armed below the threshold. iOS only. */
 @Composable
 internal fun SwipeBackHaptic(maxApi: IMaxApi?) {
-    // With the kill switch off the kit's own BackHandler swallows the gesture, so the card never
-    // moves — a tick there would be a phantom.
-    if (maxApi == null || !SwipeBackConfig.enabled) return
+    if (maxApi == null) return
 
     val progress = rememberBackGestureProgress()
     val screenWidth = getScreenDimensions().width.toFloat()

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

@@ -8,12 +8,14 @@ import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
+import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppTheme
@@ -24,6 +26,7 @@ import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.NavigationOptions
 import vn.momo.kits.navigation.StackScreen
 import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.platform.reportFloatingArrowBack
 
 private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
 internal fun setBottomTabOption(index: Int, options: NavigationOptions){
@@ -59,6 +62,22 @@ fun BottomTab(
         )
     }
 
+    // Tab 0 keeps the seeked transition; other tabs go to the host's floating arrow. Matches RN.
+    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
+    val isFirstTab = currentRoute == null || currentRoute == "option0"
+
+    DisposableEffect(isFirstTab) {
+        reportFloatingArrowBack(!isFirstTab)
+        navigator.tabBackHandler = if (isFirstTab) null else ({
+            navController.popBackStack(navController.graph.startDestinationRoute!!, false)
+        })
+        // both live outside this composition
+        onDispose {
+            reportFloatingArrowBack(false)
+            navigator.tabBackHandler = null
+        }
+    }
+
     Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
         Box(modifier = Modifier
             .fillMaxSize()

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

@@ -15,11 +15,14 @@ import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
@@ -28,6 +31,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Image
 import vn.momo.kits.components.InputSearchProps
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
@@ -88,15 +92,38 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
     // Centered title needs a full-width overlay to stay screen-centered, not boxed between back button and header right.
     val centerTitle = titlePosition == TitlePosition.CENTER && options.headerTitle is HeaderTitle.Default
 
+    val headerImage = AppTheme.current.assets.headerBackground
+        .takeUnless { options.headerType is HeaderType.Transparent }
+
     Box(
         Modifier.height(AppStatusBar.current + HEADER_HEIGHT.dp)
             .fillMaxWidth()
-            .background(background.copy(alpha = animatedAlpha))
+            .conditional(headerImage.isNullOrEmpty()) {
+                background(background.copy(alpha = animatedAlpha))
+            }
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             },
         contentAlignment = Alignment.BottomCenter
     ) {
+        if (!headerImage.isNullOrEmpty()) {
+            Box(
+                Modifier
+                    .matchParentSize()
+                    .clipToBounds()
+                    .graphicsLayer { alpha = animatedAlpha }
+                    .background(background)
+            ) {
+                Image(
+                    source = headerImage,
+                    loading = false,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .wrapContentHeight(Alignment.Top, unbounded = true)
+                        .height(HEADER_BACKGROUND_HEIGHT),
+                )
+            }
+        }
         Row(
             modifier = Modifier.height(HEADER_HEIGHT.dp)
                 .fillMaxWidth()
@@ -191,8 +218,18 @@ internal fun HeaderContent(
                     textAlign = if (titlePosition == TitlePosition.CENTER) TextAlign.Center else TextAlign.Start
                 )
             }
-            is HeaderTitle.Journey -> {}
-            is HeaderTitle.Location -> {}
+            is HeaderTitle.Journey -> {
+                HeaderJourney(
+                    data = headerTitle,
+                    tintIconColor = tintIconColor
+                )
+            }
+            is HeaderTitle.Location -> {
+                HeaderLocation(
+                    data = headerTitle,
+                    tintIconColor = tintIconColor
+                )
+            }
             is HeaderTitle.User -> {
                 HeaderUser(
                     data = headerTitle
@@ -274,6 +311,7 @@ sealed class HeaderType {
         val aspectRatio: AnimatedHeaderRatio = AnimatedHeaderRatio.RATIO_16_9,
         val isSurface: Boolean = true,
         val layoutOffSet: Dp = 56.dp,
+        val height: Dp? = null,
         val composable: @Composable (scrollState: Int) -> Unit = {}
     ) : HeaderType()
 

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

@@ -27,6 +27,8 @@ enum class AnimatedHeaderRatio(val value: Float){
     RATIO_3_2(3f / 2f)
 }
 
+internal val HEADER_BACKGROUND_HEIGHT = 154.dp
+
 @Suppress("FrequentlyChangingValue")
 @Composable
 internal fun HeaderBackground() {
@@ -37,7 +39,7 @@ internal fun HeaderBackground() {
     val backgroundColor = options.backgroundColor ?: AppTheme.current.colors.background.default
 
     val minHeight = AppStatusBar.current + HEADER_HEIGHT.dp
-    val maxHeight = 154.dp
+    val maxHeight = HEADER_BACKGROUND_HEIGHT
     val opacity by animateFloatAsState(
         targetValue = (1 - (scrollState.value * 1f / HEADER_HEIGHT * 1f)).coerceIn(0f, 1f),
     )

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

@@ -0,0 +1,106 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Skeleton
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.platform.getScreenDimensions
+
+@Composable
+internal fun HeaderJourney(
+    data: HeaderTitle,
+    tintIconColor: Color,
+) {
+    if (data !is HeaderTitle.Journey) return
+    if (data.isLoading) return TitleJourneyShimmer()
+
+    val maxWidth = getScreenDimensions().width.dp - 172.dp
+    val tint = parseHeaderTint(data.tintColor) ?: tintIconColor
+    val iconTint = parseHeaderTint(data.iconColor) ?: tint
+
+    Column(
+        modifier = Modifier
+            .widthIn(max = maxWidth)
+            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(
+                text = data.start,
+                color = tint,
+                style = Typography.actionXsBold,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f, fill = false),
+            )
+            Spacer(Modifier.width(Spacing.S))
+            if (data.icon.isNotBlank()) {
+                Icon(source = data.icon, size = 16.dp, color = iconTint)
+            } else {
+                Spacer(Modifier.width(16.dp))
+            }
+            Spacer(Modifier.width(Spacing.S))
+            if (!data.end.isNullOrEmpty()) {
+                Text(
+                    text = data.end,
+                    color = tint,
+                    style = Typography.actionXsBold,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.weight(1f, fill = false),
+                )
+            }
+            Spacer(Modifier.width(Spacing.XS))
+            Icon(source = "16_arrow_chevron_down_small", size = 16.dp, color = tint)
+        }
+        if (!data.description.isNullOrEmpty()) {
+            Text(
+                text = data.description,
+                color = tint,
+                style = Typography.descriptionXsRegular,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+
+@Composable
+private fun TitleJourneyShimmer() {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Box(modifier = Modifier.height(18.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+        Spacer(Modifier.height(Spacing.XXS))
+        Box(modifier = Modifier.height(12.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+    }
+}
+
+internal fun parseHeaderTint(value: String?): Color? {
+    val raw = value?.trim()?.removePrefix("#") ?: return null
+    val hex = when (raw.length) {
+        3 -> "FF" + raw.map { "$it$it" }.joinToString("")
+        6 -> "FF$raw"
+        8 -> raw
+        else -> return null
+    }
+    val v = hex.toLongOrNull(16) ?: return null
+    return Color(v)
+}

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

@@ -0,0 +1,75 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Skeleton
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.platform.getScreenDimensions
+
+@Composable
+internal fun HeaderLocation(
+    data: HeaderTitle,
+    tintIconColor: Color,
+) {
+    if (data !is HeaderTitle.Location) return
+    if (data.isLoading) return TitleLocationShimmer()
+
+    val maxWidth = getScreenDimensions().width.dp - 172.dp
+    val tint = parseHeaderTint(data.tintColor) ?: tintIconColor
+
+    Column(
+        modifier = Modifier
+            .widthIn(max = maxWidth)
+            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
+        horizontalAlignment = Alignment.Start,
+    ) {
+        if (!data.description.isNullOrEmpty()) {
+            Text(
+                text = data.description,
+                color = tint,
+                style = Typography.descriptionXsRegular,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(
+                text = data.location,
+                color = tint,
+                style = Typography.actionXsBold,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f, fill = false),
+            )
+            Spacer(Modifier.width(Spacing.XS))
+            Icon(source = "16_arrow_chevron_down_small", size = 16.dp, color = tint)
+        }
+    }
+}
+
+@Composable
+private fun TitleLocationShimmer() {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Box(modifier = Modifier.height(12.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+        Spacer(Modifier.height(Spacing.XXS))
+        Box(modifier = Modifier.height(18.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+    }
+}

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

@@ -12,6 +12,8 @@ import vn.momo.kits.components.Text
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.setAutomationId
 
+internal const val HEADER_FONT_FAMILY = "MoMoTrustDisplay"
+
 @Composable
 internal fun HeaderTitle(
     title: String = "",
@@ -27,6 +29,7 @@ internal fun HeaderTitle(
             fontSize = 15.sp,
             lineHeight = 22.sp,
         ),
+        fontFamily = HEADER_FONT_FAMILY,
         color = color,
         maxLines = 1,
         overflow = TextOverflow.Ellipsis

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

@@ -16,6 +16,7 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -28,6 +29,7 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.navigation.component.HeaderTitle.User
 import vn.momo.kits.platform.getScreenDimensions
@@ -77,6 +79,7 @@ internal fun HeaderUser(
                         text = data.title,
                         color = data.tintColor,
                         style = Typography.actionXsBold,
+                        fontFamily = HEADER_FONT_FAMILY,
                         maxLines = 1,
                         overflow = TextOverflow.Ellipsis
                     )
@@ -303,7 +306,8 @@ private fun ManyAvatar(options: Options, modifier: Modifier = Modifier, urls: Av
             BasicText(
                 text = "+$more",
                 style = TextStyle(
-                    color = Colors.pink_03
+                    color = Colors.pink_03,
+                    fontFamily = getFontFamily(AppTheme.current.font, FontWeight.Normal)
                 ),
                 maxLines = 1,
                 autoSize = TextAutoSize.StepBased(

package/compose/src/commonMain/kotlin/vn/momo/kits/platform/BackGesture.kt

@@ -3,13 +3,10 @@ package vn.momo.kits.platform
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 
-/**
- * Progress of an in-flight back gesture as a fraction of the container width, or `null` while no
- * gesture is running. Observing only — it must never consume the gesture, otherwise it would steal
- * it from NavHost.
- *
- * Android always returns `null`: its NavHost runs on `androidx.activity`'s OnBackPressedDispatcher,
- * which exposes progress only to the top-most enabled callback, and that has to stay NavHost's.
- */
+/** Fraction of container width, `null` when idle. Observe only — consuming would steal the
+ *  gesture from NavHost. Always `null` on Android. */
 @Composable
 expect fun rememberBackGestureProgress(): State<Float?>
+
+/** Android is a no-op: no host-owned recogniser to hand the gesture to. */
+expect fun reportFloatingArrowBack(shouldUse: Boolean)

package/compose/src/commonMain/kotlin/vn/momo/kits/platform/Platform.kt

@@ -5,6 +5,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
 import androidx.compose.ui.unit.Dp
+import vn.momo.kits.navigation.Navigator
 
 data class ScreenDimension(
     val width: Int,
@@ -24,8 +25,9 @@ expect fun getStatusBarHeight(): Dp
 @Composable
 expect fun BackHandler(enabled: Boolean, onBack: () -> Unit)
 
+@Suppress("ParamsComparedByRef")
 @Composable
-expect fun ProvideNavigationEventDispatcherOwner(content: @Composable () -> Unit)
+expect fun ProvideNavigationEventDispatcherOwner(navigator: Navigator, content: @Composable () -> Unit)
 
 @Composable
 expect fun getScreenHeight(): Dp

package/compose/src/iosMain/kotlin/vn/momo/kits/navigation/HostBackGesture.ios.kt

@@ -0,0 +1,45 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.remember
+import androidx.navigationevent.NavigationEvent
+import androidx.navigationevent.NavigationEventDispatcher
+import androidx.navigationevent.NavigationEventInput
+
+@Suppress("ParamsComparedByRef")
+@Composable
+internal fun AttachHostBackGesture(dispatcher: NavigationEventDispatcher, navigator: Navigator) {
+    val input = remember(dispatcher) { HostNavigationEventInput() }
+    val target = remember(input, navigator) {
+        object : HostBackTarget {
+            override fun canPop() = navigator.canPop()
+            override fun onBack() = navigator.onBackSafe()
+            override fun backStarted() = input.backStarted()
+            override fun backProgressed(progress: Float) = input.backProgressed(progress)
+            override fun backCompleted() = input.backCompleted()
+            override fun backCancelled() = input.backCancelled()
+        }
+    }
+
+    DisposableEffect(dispatcher, target) {
+        dispatcher.addInput(input)
+        HostBackGestureBridge.attach(target)
+        onDispose {
+            HostBackGestureBridge.detach(target)
+            dispatcher.removeInput(input)
+        }
+    }
+}
+
+internal class HostNavigationEventInput : NavigationEventInput() {
+    fun backStarted() = dispatchOnBackStarted(NavigationEvent(swipeEdge = NavigationEvent.EDGE_LEFT))
+
+    fun backProgressed(progress: Float) = dispatchOnBackProgressed(
+        NavigationEvent(swipeEdge = NavigationEvent.EDGE_LEFT, progress = progress)
+    )
+
+    fun backCancelled() = dispatchOnBackCancelled()
+
+    fun backCompleted() = dispatchOnBackCompleted()
+}

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

@@ -8,10 +8,9 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.InternalComposeUiApi
 import androidx.compose.ui.backhandler.LocalCompatNavigationEventDispatcherOwner
 import androidx.navigationevent.NavigationEventTransitionState
+import vn.momo.kits.navigation.HostBackGestureBridge
 
-// NavigationEventDispatcher.transitionState is a passive observer: UIKitNavigationEventInput
-// publishes every edge-pan event to it without any handler consuming the gesture. Its `progress`
-// is touch.x / view width, i.e. a plain fraction of the screen width.
+// transitionState is a passive observer; its progress is touch.x / view width.
 @OptIn(InternalComposeUiApi::class)
 @Composable
 actual fun rememberBackGestureProgress(): State<Float?> {
@@ -33,3 +32,7 @@ actual fun rememberBackGestureProgress(): State<Float?> {
 
     return progress
 }
+
+actual fun reportFloatingArrowBack(shouldUse: Boolean) {
+    HostBackGestureBridge.shouldUseFloatingArrowBack = shouldUse
+}

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

@@ -39,7 +39,8 @@ import platform.Foundation.NSBundle
 import platform.UIKit.UIColor
 import platform.UIKit.UIDevice
 import platform.UIKit.UIScreen
-import vn.momo.kits.navigation.ObserveBackGestureOwnership
+import vn.momo.kits.navigation.AttachHostBackGesture
+import vn.momo.kits.navigation.Navigator
 
 actual fun getPlatformName(): String = "iOS"
 
@@ -62,9 +63,6 @@ actual fun getStatusBarHeight(): Dp {
     return WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
 }
 
-// An enabled kit BackHandler is registered inside the NavHost destination, so it out-ranks
-// NavHost's own predictive-back handler and swallows the gesture — that is how a screen opts out
-// of swipe-back (the port of RN's `hasCustomBackHandling`).
 @Suppress("DEPRECATION")
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
@@ -74,30 +72,17 @@ actual fun BackHandler(enabled: Boolean, onBack: () -> Unit) {
 
 @OptIn(InternalComposeUiApi::class)
 @Composable
-actual fun ProvideNavigationEventDispatcherOwner(content: @Composable () -> Unit) {
-    val platformOwner = LocalCompatNavigationEventDispatcherOwner.current
-    if (platformOwner != null) {
-        // UIKitNavigationEventInput is registered on the scene's dispatcher, and that dispatcher
-        // having enabled handlers is what arms Compose's UIKitBackGestureRecognizer. Providing a
-        // fresh NavigationEventDispatcher() here would shadow it with an input-less one that never
-        // sees a single edge-pan event — no recogniser, and no finger-following seek.
-        ObserveBackGestureOwnership(platformOwner.navigationEventDispatcher)
-        content()
-        return
-    }
-
-    // Bare UIView hosts have no scene dispatcher, and BackHandler/PredictiveBackHandler error() on
-    // a null owner. Disabled: nothing can feed it, so it exists only to keep those from throwing.
-    val fallbackOwner = remember {
+actual fun ProvideNavigationEventDispatcherOwner(navigator: Navigator, content: @Composable () -> Unit) {
+    val navigationEventDispatcherOwner = remember {
         object : NavigationEventDispatcherOwner {
-            override val navigationEventDispatcher = NavigationEventDispatcher().apply {
-                isEnabled = false
-            }
+            override val navigationEventDispatcher = NavigationEventDispatcher()
         }
     }
 
+    AttachHostBackGesture(navigationEventDispatcherOwner.navigationEventDispatcher, navigator)
+
     CompositionLocalProvider(
-        LocalCompatNavigationEventDispatcherOwner provides fallbackOwner,
+        LocalCompatNavigationEventDispatcherOwner provides navigationEventDispatcherOwner,
         content = content
     )
 }

package/gradle/libs.versions.toml

@@ -1,5 +1,5 @@
 [versions]
-android-compileSdk = "36"
+android-compileSdk = "37"
 android-minSdk = "24"
 android-targetSdk = "36"
 ktor-version = "3.0.0-rc-1"