💄 [KMM] Liquid glass tab bar in compose multiplatform

android/app/src/main/kotlin/kmp/android/MainActivity.kt

@@ -1,13 +1,19 @@
 package kmp.android
 
+import SampleTabBarScreen
 import android.os.Bundle
 import androidx.activity.compose.setContent
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
 import androidx.core.view.WindowCompat
-import kmp.android.di.initDependencyInjection
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import kmp.android.shared.core.system.BaseActivity
-import kmp.android.shared.style.AppTheme
-import kmp.android.ui.Root
-import org.koin.core.context.GlobalContext
+import kmp.shared.sampletabbar.presentation.ui.SampleTheme
+import kmp.shared.sampletabbar.presentation.vm.SampleTabBarIntent
+import kmp.shared.sampletabbar.presentation.vm.SampleTabBarViewModel
+import kotlinx.coroutines.flow.collectLatest
+import org.koin.androidx.compose.koinViewModel
 
 class MainActivity : BaseActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -19,9 +25,34 @@ class MainActivity : BaseActivity() {
     override fun onStart() {
         super.onStart()
         setContent {
-            AppTheme {
-                Root()
+            SampleTheme {
+//                Root()
+                SampleTabBarMainRoute()
             }
         }
     }
 }
+
+@Composable
+internal fun SampleTabBarMainRoute(
+    viewModel: SampleTabBarViewModel = koinViewModel(),
+) {
+    val state by viewModel.state.collectAsStateWithLifecycle()
+
+    LaunchedEffect(key1 = viewModel) {
+        viewModel.onIntent(SampleTabBarIntent.OnAppeared)
+    }
+
+    LaunchedEffect(key1 = viewModel) {
+        viewModel.events.collectLatest { event ->
+            when (event) {
+                else -> {}
+            }
+        }
+    }
+
+    SampleTabBarScreen(
+        state = state,
+        onIntent = viewModel::onIntent,
+    )
+}

build-logic/convention/src/main/kotlin/config/KmmConfig.kt

@@ -59,6 +59,7 @@ fun KotlinMultiplatformExtension.kmm(
                 export(project(":shared:samplesharedviewmodel"))
                 export(project(":shared:samplecomposemultiplatform"))
                 export(project(":shared:samplecomposenavigation"))
+                export(project(":shared:sampletabbar"))
             }
             it.binaries {
                 compilerOptions.freeCompilerArgs.add("-Xbinary=bundleId=kmp.shared.$nativeName")

gradle/libs.versions.toml

@@ -16,7 +16,7 @@ material-icons = "1.7.3"
 lifecycle = "2.9.3"
 paging = "3.3.6"
 composeBom = "2025.08.01"
-jetbrains-composePlugin = "1.8.2" # Downgrade to 1.6.11 if you want to use compose multiplatform with UIKit navigation (it fixes the swipe back)
+jetbrains-composePlugin = "1.9.0"
 activity = "1.10.1"
 navigation = "2.9.3"
 accompanist = "0.36.0"
@@ -40,6 +40,8 @@ uiautomator = "2.3.0"
 skie = "0.10.6"
 firebase = "22.5.0"
 googleServices = "4.4.3"
+coil = "3.3.0"
+haze = "1.6.10"
 
 [libraries]
 # Kotlin
@@ -93,8 +95,11 @@ activity-compose = { module = "androidx.activity:activity-compose", version.ref
 # Navigation
 navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "navigation" }
 # Accompanist
-accompanist-coil = { module = "com.google.accompanist:accompanist-coil", version.ref = "accompanist" }
 accompanist-navigationMaterial = { module = "com.google.accompanist:accompanist-navigation-material", version.ref = "accompanist" }
+# Coil
+coil = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil" }
+coil-okhttp = { module = "io.coil-kt.coil3:coil-network-okhttp", version.ref = "coil" }
+coil-ktor = { module = "io.coil-kt.coil3:coil-network-ktor3", version.ref = "coil" }
 # Ktor
 ktor-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
 ktor-android = { module = "io.ktor:ktor-client-android", version.ref = "ktor" }
@@ -127,6 +132,9 @@ androidx-uiautomator = { group = "androidx.test.uiautomator", name = "uiautomato
 skie-annotations = { module = "co.touchlab.skie:configuration-annotations", version.ref = "skie" }
 # Firebase
 firebase-analytics = { module = "com.google.firebase:firebase-analytics-ktx", version.ref = "firebase" }
+# Haze
+haze = { module = "dev.chrisbanes.haze:haze", version.ref = "haze" }
+haze-materials = { module = "dev.chrisbanes.haze:haze-materials", version.ref = "haze" }
 
 [bundles]
 settings = [

ios/Application/DependencyInjection/Sources/DependencyInjection/KMPViewModels.swift

@@ -14,4 +14,5 @@ public extension Container {
     // Sample
     var sampleSharedViewModel: Factory<SampleSharedViewModel> { self { self.kmp().get(SampleSharedViewModel.self) } }
     var sampleNextViewModel: Factory<SampleNextViewModel> { self { self.kmp().get(SampleNextViewModel.self) } }
+    var sampleTabBarViewModel: Factory<SampleTabBarViewModel> { self { self.kmp().get(SampleTabBarViewModel.self) } }
 }

ios/Application/MainFlowController.swift

@@ -3,6 +3,8 @@
 //  Copyright © 2019 Matee. All rights reserved.
 //
 
+import DependencyInjection
+import Factory
 import KMPShared
 import Sample
 import SampleComposeMultiplatform
@@ -23,9 +25,12 @@ enum MainTab: Int {
 final class MainFlowController: FlowController {
 
     override func setup() -> UIViewController {
-        let main = UITabBarController()
-        main.viewControllers = [setupSampleTab(), setupSampleSharedViewModelTab(), setupSampleComposeMultiplatformTab(), setupSampleComposeNavigationTab()]
-        return main
+        @Injected(\.sampleTabBarViewModel) var viewModel: KMPShared.SampleTabBarViewModel
+        return UIHostingController(rootView: SampleTabBarView(flowController: self))
+//        return UIHostingController(rootView: TestScreen())
+//        let main = UITabBarController()
+//        main.viewControllers = [setupSampleTab(), setupSampleSharedViewModelTab(), setupSampleComposeMultiplatformTab(), setupSampleComposeNavigationTab()]
+//        return main
     }
 
     private func setupSampleTab() -> UINavigationController {

ios/MateeStarter.xcodeproj/xcshareddata/xcschemes/MateeStarter_Alpha.xcscheme

@@ -26,7 +26,7 @@
             ActionType = "Xcode.IDEStandardExecutionActionsCore.ExecutionActionType.ShellScriptAction">
             <ActionContent
                title = "Run Embed and sign shared framework"
-               scriptText = "cd &quot;$SRCROOT/..&quot;&#10;ios/scripts/build-kmp.sh&#10;">
+               scriptText = "cd &quot;$SRCROOT/..&quot;&#10;./gradlew :shared:core:embedAndSignAppleFrameworkForXcode &lt; /dev/null&#10;">
                <EnvironmentBuildable>
                   <BuildableReference
                      BuildableIdentifier = "primary"

ios/PresentationLayer/SampleComposeMultiplatform/Sources/SampleComposeMultiplatform/PlatformSpecificView/NativeScaffoldObservable.swift

@@ -0,0 +1,48 @@
+//
+//  Created by Julia Jakubcova on 30/09/2025
+//  Copyright © 2025 Matee. All rights reserved.
+//
+
+import KMPShared
+import SwiftUI
+
+class NativeScaffoldObservable: ObservableObject, NativeScaffoldDelegate {
+
+    private let onSelectedTabChanged: (Int32) -> Void
+    let content: (Int32?) -> UIViewController
+
+    @Published var toolbar: Toolbar?
+    @Published var tabs: [TabItem]
+    @Published var selectedTab: Int32 {
+        didSet {
+            if oldValue != selectedTab {
+                onSelectedTabChanged(selectedTab)
+            }
+        }
+    }
+
+    init(
+        toolbar: Toolbar?,
+        tabs: [TabItem],
+        selectedTab: Int32,
+        onSelectedTabChanged: @escaping (Int32) -> Void,
+        content: @escaping (Int32?) -> UIViewController
+    ) {
+        self.tabs = tabs
+        self.selectedTab = selectedTab
+        self.onSelectedTabChanged = onSelectedTabChanged
+        self.content = content
+    }
+
+    func updateToolbar(toolbar: Toolbar?) {
+        self.toolbar = toolbar
+    }
+
+    func updateTabs(tabs: [TabItem]) {
+        self.tabs = tabs
+    }
+
+    func updateSelectedTab(selectedTabPosition: Int32) {
+        self.selectedTab = selectedTabPosition
+    }
+}

ios/PresentationLayer/SampleComposeMultiplatform/Sources/SampleComposeMultiplatform/PlatformSpecificView/NativeScaffoldView.swift

@@ -0,0 +1,100 @@
+//
+//  Created by Julia Jakubcova on 02/10/2025
+//  Copyright © 2025 Matee. All rights reserved.
+//
+
+import KMPShared
+import SwiftUI
+import UIToolkit
+
+struct NativeScaffoldView: View {
+    @ObservedObject var observable: NativeScaffoldObservable
+
+    init(observable: NativeScaffoldObservable) {
+        self.observable = observable
+    }
+
+    var body: some View {
+        if let toolbar = observable.toolbar {
+            if #available(iOS 16.0, *) {
+                Group {
+                    if !observable.tabs.isEmpty {
+                        TabView(selection: $observable.selectedTab) {
+                            ForEach(observable.tabs, id: \.position) { tab in
+                                Group {
+                                    if #available(iOS 26.0, *) {
+                                        ComposeViewController { observable.content(tab.position) }
+                                            .ignoresSafeArea()
+                                    } else {
+                                        ComposeViewController { observable.content(tab.position) }
+                                    }
+                                }
+                                .tabItem {
+                                    if let uiImage = tab.icon.toUIImage() {
+                                        Image(uiImage: uiImage)
+                                    }
+                                    Text(tab.title)
+                                }
+                                .tag(tab.position)
+                            }
+                        }
+                    } else {
+                        if #available(iOS 26.0, *) {
+                            ComposeViewController { observable.content(nil) }
+                                .ignoresSafeArea()
+                        } else {
+                            ComposeViewController { observable.content(nil) }
+                        }
+                    }
+                }.toolbar(toolbar)
+            } else {
+                // Fallback on earlier versions
+            }
+        }
+    }
+}
+
+extension View {
+    @available(iOS 16.0, *)
+    func toolbar(_ toolbar: Toolbar) -> some View {
+        NavigationStack {
+            self
+                .navigationTitle(toolbar.title ?? "")
+                .navigationBarTitleDisplayMode(.inline)
+                .toolbarBackground(.hidden, for: .navigationBar)
+                .toolbar {
+                    let leading = toolbar.buttons.filter { $0.position == .leading }
+                    let trailing = toolbar.buttons.filter { $0.position == .trailing }
+
+                    if !leading.isEmpty {
+                        ToolbarItemGroup(placement: .topBarLeading) {
+                            ForEach(Array(leading.enumerated()), id: \.offset) { _, button in
+                                toolbarButtonView(for: button)
+                            }
+                        }
+                    }
+
+                    if !trailing.isEmpty {
+                        ToolbarItemGroup(placement: .topBarTrailing) {
+                            ForEach(Array(trailing.enumerated()), id: \.offset) { _, button in
+                                toolbarButtonView(for: button)
+                            }
+                        }
+                    }
+                }
+        }
+    }
+
+    @ViewBuilder
+    private func toolbarButtonView(for button: ToolbarButtonData) -> some View {
+        Button {
+            button.onClick()
+        } label: {
+            if let uiImage = button.icon.toUIImage() {
+                Image(uiImage: uiImage)
+                    .renderingMode(.template)
+            }
+        }
+        .tint(button.tint.map { Color(kmpColor: $0) } ?? .primary)
+    }
+}

ios/PresentationLayer/SampleComposeMultiplatform/Sources/SampleComposeMultiplatform/PlatformSpecificView/ScreenWithBottomBarView.swift

@@ -0,0 +1,72 @@
+//
+//  Created by Julia Jakubcova on 02/10/2025
+//  Copyright © 2025 Matee. All rights reserved.
+//
+
+import KMPShared
+import SwiftUI
+import UIToolkit
+
+struct ScreenWithBottomBarView: View {
+    @ObservedObject var observable: ScreenWithPlatformSpecificBottomBarObservable
+
+    init(observable: ScreenWithPlatformSpecificBottomBarObservable) {
+        self.observable = observable
+    }
+
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            NavigationStack {
+                TabView(selection: $observable.selectedTab) {
+                    ForEach(observable.tabs, id: \.position) { tab in
+                        Group {
+                            if #available(iOS 26.0, *) {
+                                ComposeViewController { tab.content }
+                                    .ignoresSafeArea()
+                            } else {
+                                ComposeViewController { tab.content }
+                            }
+
+                            //                            ScrollView {
+                            //                                ForEach((0...20), id: \.self) { _ in
+                            //                                    Text("doiaw jmo dcposekoif eswop[ijj fe ss")
+                            //                                    Color.red
+                            //                                        .frame(height: 100)
+                            //                                }
+                            //                            }
+                        }
+                        .tabItem {
+                            if let uiImage = tab.icon.toUIImage() {
+                                Image(uiImage: uiImage)
+                            }
+                            Text(tab.title)
+                        }
+                        .tag(tab.position)
+
+                    }
+                }
+                .navigationTitle("Items")
+//                .toolbarTitleDisplayMode(.inline)
+                .navigationBarTitleDisplayMode(.inline)
+                .toolbarBackground(.hidden, for: .navigationBar)
+                .toolbar {
+                    ToolbarItem(placement: .topBarLeading) {
+                        Button("Cancel", systemImage: "xmark") {
+                            // cancel action
+                        }
+                        .tint(.red)
+                    }
+
+                    ToolbarItem(placement: .topBarTrailing) {
+                        Button("Done", systemImage: "checkmark") {
+                            // done action
+                        }
+                        .badge(3)
+                    }
+                }
+            }
+        } else {
+            // Fallback on earlier versions
+        }
+    }
+}