@momo-kits/native-kits 0.167.1-beta.19-debug → 0.167.1-beta.20-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.167.1-beta.19-debug"
+        version = "0.167.1-beta.20-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"
@@ -189,15 +189,10 @@ compose {
 //     }
 // }
 
-// KGP's synthetic Podfile only raises pods to iOS 12 (KT-57741); Xcode 27 rejects anything below 15, which breaks lottie-ios (13.0).
-tasks.matching { it.name.startsWith("podGen") }.configureEach {
+// Xcode 27 rejects iOS < 15; KGP's synthetic Podfile only raises pods to 12 (KT-57741), leaving lottie-ios at 13.
+tasks.named("podGenIos") {
     doLast {
-        outputs.files.asFileTree.matching { include("**/Podfile") }.forEach { podfile ->
-            val signingLine = "config.build_settings['CODE_SIGNING_ALLOWED'] = \"NO\""
-            val text = podfile.readText()
-            if ("IPHONEOS_DEPLOYMENT_TARGET'] = '15.0'" !in text) {
-                podfile.writeText(text.replace(signingLine, "$signingLine\n      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '15.0'"))
-            }
-        }
+        val podfile = layout.buildDirectory.file("cocoapods/synthetic/ios/Podfile").get().asFile
+        podfile.writeText(podfile.readText().replace("major < 12 ||", "major < 15 ||").replace("#{12}", "#{15}"))
     }
 }

package/compose/build.gradle.kts.backup

@@ -189,15 +189,10 @@ mavenPublishing {
     }
 }
 
-// KGP's synthetic Podfile only raises pods to iOS 12 (KT-57741); Xcode 27 rejects anything below 15, which breaks lottie-ios (13.0).
-tasks.matching { it.name.startsWith("podGen") }.configureEach {
+// Xcode 27 rejects iOS < 15; KGP's synthetic Podfile only raises pods to 12 (KT-57741), leaving lottie-ios at 13.
+tasks.named("podGenIos") {
     doLast {
-        outputs.files.asFileTree.matching { include("**/Podfile") }.forEach { podfile ->
-            val signingLine = "config.build_settings['CODE_SIGNING_ALLOWED'] = \"NO\""
-            val text = podfile.readText()
-            if ("IPHONEOS_DEPLOYMENT_TARGET'] = '15.0'" !in text) {
-                podfile.writeText(text.replace(signingLine, "$signingLine\n      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '15.0'"))
-            }
-        }
+        val podfile = layout.buildDirectory.file("cocoapods/synthetic/ios/Podfile").get().asFile
+        podfile.writeText(podfile.readText().replace("major < 12 ||", "major < 15 ||").replace("#{12}", "#{15}"))
     }
 }

package/compose/compose.podspec

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

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

@@ -67,6 +67,7 @@ import vn.momo.kits.navigation.component.HeaderBackground
 import vn.momo.kits.navigation.component.HeaderRight
 import vn.momo.kits.navigation.component.HeaderType
 import vn.momo.kits.navigation.component.InputSearchType
+import vn.momo.kits.navigation.bottomtab.LocalBottomTabFocused
 import vn.momo.kits.platform.BackHandler
 import vn.momo.kits.platform.supportsImePadding
 import vn.momo.kits.navigation.tracking.ScreenTracker
@@ -109,20 +110,24 @@ internal fun StackScreen(
     val isBottomTabChild = bottomTabIndex != -1
     val isBottomTabRoot = navigation.isBottomTabRoot
 
+    // A mounted-but-hidden bottom tab tracks again each time it is focused (RN useFocusEffect).
+    val tabFocused = LocalBottomTabFocused.current
+
     // Auto tracking state
-    val trackingState = remember {
+    val trackingState = remember(tabFocused) {
         ScreenTrackingState().apply {
             time = Clock.System.now().toEpochMilliseconds()
         }
     }
 
     // Determine action: push or back
-    val action = remember {
+    val action = remember(tabFocused) {
         if (ScreenTracker.getLastScreenName() != null) "push" else "back"
     }
 
     // Auto tracking effects
-    LaunchedEffect(name) {
+    LaunchedEffect(name, tabFocused) {
+        if (!tabFocused) return@LaunchedEffect
         // Track screen navigated immediately
         ScreenTracker.trackScreenNavigated(
             maxApi = maxApi,
@@ -169,7 +174,7 @@ internal fun StackScreen(
     val footerHeightPx = remember { mutableIntStateOf(0) }
     val headerRightWidthPx = remember { mutableIntStateOf(0) }
 
-    if (navigation.options.scrollData.scrollToTopCallback != null) {
+    if (tabFocused && navigation.options.scrollData.scrollToTopCallback != null) {
         RegisterScrollToTop(navigation.options.scrollData.scrollToTopCallback)
     }
 

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

@@ -1,27 +1,34 @@
 package vn.momo.kits.navigation.bottomtab
 
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.AnimationVector1D
+import androidx.compose.animation.core.Easing
 import androidx.compose.animation.core.tween
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.scaleIn
-import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.key
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.saveable.rememberSaveableStateHolder
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.staticCompositionLocalOf
 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 androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.zIndex
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.navigation.KeyboardOptions
+import vn.momo.kits.navigation.LocalMaxApi
 import vn.momo.kits.navigation.LocalNavigation
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.NavigationOptions
@@ -29,6 +36,17 @@ import vn.momo.kits.navigation.StackScreen
 import vn.momo.kits.navigation.component.HeaderType
 import vn.momo.kits.platform.BackHandler
 import vn.momo.kits.platform.reportFloatingArrowBack
+import kotlinx.coroutines.launch
+
+private val inOutQuad = Easing { t -> if (t < 0.5f) 2 * t * t else 1 - 2 * (1 - t) * (1 - t) }
+internal val tabTimingSpec = tween<Float>(durationMillis = 200, easing = inOutQuad)
+
+internal val LocalBottomTabFocused = staticCompositionLocalOf { true }
+
+private val Hidden = Modifier.layout { measurable, constraints ->
+    val placeable = measurable.measure(constraints)
+    layout(placeable.width, placeable.height) {}
+}
 
 private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
 internal fun setBottomTabOption(index: Int, options: NavigationOptions){
@@ -52,10 +70,8 @@ fun BottomTab(
 ) {
     val navigation = LocalNavigation.current
     val navigator = LocalNavigator.current
-    val navController = rememberNavController()
-    val startRoute = remember {
-        "option${items.indexOfFirst { it.name == initialRouteName }.coerceAtLeast(0)}"
-    }
+    val maxApi = LocalMaxApi.current
+    val startIndex = remember { items.indexOfFirst { it.name == initialRouteName }.coerceAtLeast(0) }
 
     bottomTabOptionItems = items.mapIndexed { index, item ->
         item.options ?: NavigationOptions()
@@ -70,14 +86,34 @@ fun BottomTab(
         )
     }
 
-    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    val onStartTab = currentRoute == null || currentRoute == startRoute
-    val isFirstTab = onStartTab || !backToInitialTab
-    val backToStartTab = { navController.popBackStack(startRoute, inclusive = false) }
+    var selectedIndex by rememberSaveable { mutableIntStateOf(startIndex) }
+    var loadedTabs by rememberSaveable { mutableStateOf(listOf(startIndex)) }
+    val tabStateHolder = rememberSaveableStateHolder()
+    val selectTab: (Int) -> Unit = { index ->
+        if (index !in loadedTabs) loadedTabs = loadedTabs + index
+        selectedIndex = index
+    }
+
+    val onFirstTab = selectedIndex == 0
+    val isFirstTab = onFirstTab || !backToInitialTab
+    val backToFirstTab = { selectTab(0) }
+
+    var lastFocusedIndex by rememberSaveable { mutableStateOf<Int?>(null) }
+    val tabProgress = remember { mutableMapOf<Int, Animatable<Float, AnimationVector1D>>() }
+    fun progressOf(index: Int) = tabProgress.getOrPut(index) {
+        Animatable(if (index == lastFocusedIndex) 1f else 0f)
+    }
+    LaunchedEffect(selectedIndex) {
+        lastFocusedIndex = selectedIndex
+        tabProgress.forEach { (index, progress) ->
+            if (index != selectedIndex) launch { progress.animateTo(0f, tabTimingSpec) }
+        }
+        progressOf(selectedIndex).animateTo(1f, tabTimingSpec)
+    }
 
     DisposableEffect(isFirstTab) {
         reportFloatingArrowBack(!isFirstTab)
-        navigator.tabBackHandler = if (isFirstTab) null else ({ backToStartTab() })
+        navigator.tabBackHandler = if (isFirstTab) null else ({ backToFirstTab() })
         // both live outside this composition
         onDispose {
             reportFloatingArrowBack(false)
@@ -88,75 +124,56 @@ fun BottomTab(
     Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
         Box(modifier = Modifier
             .fillMaxSize()
+            .background(AppTheme.current.colors.background.default)
         ) {
-            NavHost(
-                navController = navController,
-                startDestination = startRoute
-            ) {
-                items.forEachIndexed { index, item ->
-                    composable(
-                        route = "option$index",
-                        enterTransition = {
-                            fadeIn(animationSpec = tween(200)) +
-                                    scaleIn(
-                                        initialScale = 0.97f,
-                                        animationSpec = tween(200)
-                                    )
-                        },
-                        exitTransition = {
-                            fadeOut(animationSpec = tween(200)) +
-                                    scaleOut(
-                                        targetScale = 0.97f,
-                                        animationSpec = tween(200)
-                                    )
-                        },
-                        popEnterTransition = {
-                            fadeIn(animationSpec = tween(200)) +
-                                    scaleIn(
-                                        initialScale = 0.97f,
-                                        animationSpec = tween(200)
-                                    )
-                        },
-                        popExitTransition = {
-                            fadeOut(animationSpec = tween(200)) +
-                                    scaleOut(
-                                        targetScale = 0.97f,
-                                        animationSpec = tween(200)
-                                    )
-                        }
+            loadedTabs.forEach { index ->
+                val item = items.getOrNull(index) ?: return@forEach
+                val focused = index == selectedIndex
+                val progress = progressOf(index)
+                key(index) {
+                    Box(
+                        Modifier
+                            .fillMaxSize()
+                            .zIndex(if (focused) 0f else -1f)
+                            .then(if (focused) Modifier.graphicsLayer {
+                                alpha = 0.3f + 0.7f * progress.value
+                                scaleX = 0.97f + 0.03f * progress.value
+                                scaleY = scaleX
+                            } else Hidden)
                     ) {
-                        val option = getBottomTabOption(index)
-
-                        StackScreen(
-                            content = item.screen,
-                            navigationOptions = option,
-                            bottomTabIndex = index,
-                            onBackHandler = {
-                                if (backToInitialTab && "option$index" != startRoute) {
-                                    backToStartTab()
-                                } else {
-                                    navigator.pop()
-                                }
+                        CompositionLocalProvider(LocalBottomTabFocused provides focused) {
+                            tabStateHolder.SaveableStateProvider(index) {
+                                StackScreen(
+                                    content = item.screen,
+                                    navigationOptions = getBottomTabOption(index),
+                                    bottomTabIndex = index,
+                                    onBackHandler = {
+                                        if (backToInitialTab && index != 0) {
+                                            backToFirstTab()
+                                        } else {
+                                            navigator.pop()
+                                        }
+                                    }
+                                )
                             }
-                        )
+                        }
                     }
                 }
             }
         }
-        BackHandler(enabled = !onStartTab) {
-            if (backToInitialTab) backToStartTab() else navigator.pop()
+        BackHandler(enabled = !onFirstTab) {
+            if (backToInitialTab) backToFirstTab() else navigator.pop()
         }
         Column {
             BottomTabBar(
                 items = items,
                 floatingButton = floatingButton,
-                navController = navController,
+                selectedIndex = selectedIndex,
                 onTabSelected = { index ->
+                    // RN parity: every tab press (focused one included) ticks a light haptic.
+                    runCatching { maxApi?.triggerEventVibration("light", callback = null) }
                     val switchTab = {
-                        val targetRoute = "option$index"
-                        if (navController.currentBackStackEntry?.destination?.route != targetRoute) {
-                            navController.navigate(targetRoute)
-                        }
+                        if (index != selectedIndex) selectTab(index)
                     }
                     onTabPress?.invoke(index, switchTab) ?: switchTab()
                 }

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

@@ -1,15 +1,18 @@
 package vn.momo.kits.navigation.bottomtab
 
-import androidx.compose.animation.core.FastOutSlowInEasing
-import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.Animatable
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -17,18 +20,17 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
-import androidx.navigation.NavController
-import androidx.navigation.compose.currentBackStackEntryAsState
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.components.*
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.InternalApi
 import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.noFeedbackClickable
+import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.platform.getScreenDimensions
 
-internal val floatingButtonWidth = 75.dp
 @InternalApi
 const val BOTTOM_TAB_BAR_HEIGHT = 64
 
@@ -36,28 +38,24 @@ const val BOTTOM_TAB_BAR_HEIGHT = 64
 internal fun BottomTabBar(
     items: List<BottomTabItem>,
     floatingButton: BottomTabFloatingButton? = null,
-    navController: NavController,
+    selectedIndex: Int,
     onTabSelected: (Int) -> Unit,
 ) {
-    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    val selectedIndex = items.indexOfFirst { "option${items.indexOf(it)}" == currentRoute }
 
     val screenWidth = getScreenDimensions().width.dp
     val mid = items.size / 2
 
-    val tabWidth = if (floatingButton != null) {
-        (screenWidth - floatingButtonWidth) / items.size
-    } else {
-        screenWidth / items.size
-    }
-    val adjustSize = if(floatingButton != null && selectedIndex >= mid) floatingButtonWidth else 0.dp
-    val targetOffset = tabWidth * selectedIndex + tabWidth / 2 - screenWidth / 2 + adjustSize
+    val floating = floatingButton?.takeIf { items.size % 2 == 0 }
+    val slotWidth = screenWidth / (items.size + if (floating != null) 1 else 0)
+    fun slotOf(index: Int) = if (floating != null && index >= mid) index + 1 else index
 
-    val indicatorOffsetX by animateDpAsState(
-        targetValue = targetOffset,
-        animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing),
-        label = "IndicatorX"
-    )
+    var indicatorSlot by rememberSaveable { mutableIntStateOf(0) }
+    val indicatorX = remember { Animatable(indicatorSlot.toFloat()) }
+    LaunchedEffect(selectedIndex) {
+        val target = slotOf(selectedIndex)
+        indicatorSlot = target
+        indicatorX.animateTo(target.toFloat(), tabTimingSpec)
+    }
 
     Box(
         contentAlignment = Alignment.BottomCenter
@@ -72,17 +70,17 @@ internal fun BottomTabBar(
                 },
             horizontalArrangement = Arrangement.SpaceAround,
         ) {
-            if (floatingButton == null) {
+            if (floating == null) {
                 RenderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected)
             } else {
                 RenderTabBarItem(items, 0, mid, selectedIndex, onTabSelected)
-                Spacer(modifier = Modifier.width(floatingButtonWidth).padding(horizontal = Spacing.XXS))
+                Spacer(modifier = Modifier.width(slotWidth))
                 RenderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected)
             }
         }
 
         Box(modifier = Modifier
-            .offset(x = indicatorOffsetX, y = (-BOTTOM_TAB_BAR_HEIGHT + 2).dp)
+            .offset { IntOffset(((slotWidth * (indicatorX.value + 0.5f)) - screenWidth / 2).roundToPx(), (-BOTTOM_TAB_BAR_HEIGHT + 2).dp.roundToPx()) }
             .height(2.dp)
             .width(44.dp)
             .background(
@@ -101,7 +99,7 @@ internal fun BottomTabBar(
                 )
             )
         )
-        floatingButton?.let { FloatingButton(it) }
+        floating?.let { FloatingButton(it, slotWidth) }
     }
 }
 
@@ -137,7 +135,7 @@ internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> U
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
         }
-        .noFeedbackClickable {
+        .activeOpacityClickable {
             onClick()
         },
         contentAlignment = Alignment.BottomStart
@@ -145,10 +143,7 @@ internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> U
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(horizontal = Spacing.S, vertical = Spacing.S)
-                .noFeedbackClickable {
-                    onClick()
-                },
+                .padding(horizontal = Spacing.S, vertical = Spacing.S),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
         ) {
@@ -177,15 +172,15 @@ internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> U
 }
 
 @Composable
-internal fun FloatingButton(data: BottomTabFloatingButton) {
+internal fun FloatingButton(data: BottomTabFloatingButton, width: Dp) {
     Column(
         modifier = Modifier
-            .width(floatingButtonWidth)
+            .width(width)
             .padding(horizontal = Spacing.XXS, vertical = Spacing.S)
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }
-            .noFeedbackClickable {
+            .activeOpacityClickable {
                 data.onPress()
             },
         verticalArrangement = Arrangement.Bottom,

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.19
+version=0.167.1-beta.20
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.167.1-beta.19'
+  s.version          = '0.167.1-beta.20'
   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.19'
+  s.version          = '0.167.1-beta.20'
   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-beta.19-debug",
+  "version": "0.167.1-beta.20-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},