Four useful tips for Compose Kotlin Multiplatform (KMP)

Introduction

As I commented in my previous article A complete migration of a multi-module app to Compose Kotlin Multiplatform (KMP), this last month I’ve been migrating my existing multi-module application to Compose Multiplatform, and besides that, I’ve been creating a new Compose Multiplatform multi-module project from scratch. In both I have encountered the same “problems” or “blockers”, so this article is aimed at both if you are migrating or starting a KMP project from scratch.

Tip 1: Previews

KMP does not support previews for the commonMain directory compose components, so I came up with the idea to create them in the androidMain directory and they work perfectly well.

e.g. commonMain/com/example/feature/component/FeatureScreen.kt
androidMain/com/example/feature/component/FeatureScreenPreview.kt

Tip 2: BackHandler

KMP does not support BackHandler action, so I created an expect function to the screen and added the BackHandler action on androidMain actual function, and leave the iosMain one empty (since I didn’t find a similar action in iOS).

e.g.

// commonMain/ com.example.feature.component.FeatureScreen.kt
@Composable
expect fun FeatureScreen(
    viewModel: FeatureScreenViewModel,
)

@Composable
internal fun Content(
    viewModel: FeatureScreenViewModel,
) {
    ...
}

// androidMain/ com.example.feature.component.FeatureScreenActual.kt (needs a name different from common)
@Composable
actual fun FeatureScreen(
    viewModel: WorkScreenViewModel,
) {
    BackHandler { viewModel.onIntent(WorkIntent.Back) }

    Content(
        viewModel = viewModel,
    )
}
// extra: I have joined the preview in this same class to have it better organized.

// iosMain/ com.example.feature.component.FeatureScreenActual.kt (needs a name different from common)
@Composable
actual fun FeatureScreen(
    viewModel: WorkScreenViewModel,
) {
    Content(
        viewModel = viewModel,
    )
}

2024/3/7 UPDATE:

Since 1.8.0-alpha03, there is a solution on Compose Multiplatform itself: https://github.com/JetBrains/compose-multiplatform/releases/tag/v1.8.0-alpha03.

For this alpha version, you need to add manually the following library org.jetbrains.compose.ui:ui-backhandler:1.8.0-alpha03 to get access to BackHandler and PredictiveBackHandler.

Tip 3: Test mocking

I like to use mockk library for mocking tests, and at the time of writing this article, it is not yet supported by KMP, so I decided to create the UnitTests in the androidUnitTest directory, adding the library dependencies to the androidUnitTest.dependencies {} block.

For the tests as such, I have used the kotlin-test jetbrains library, which supports KMP.

e.g.

mockk = { group = "io.mockk", name = "mockk", version.ref = "mockk-version" }
kotlin-test = { group = "org.jetbrains.kotlin", name = "kotlin-test", version.ref = "kotlin-version" }

// feature build.gradle.kts
kotlin {
    ...

    sourceSets {
        androidUnitTest.dependencies {
            implementation(libs.mockk)
        }

        commonTest.dependencies {
            implementation(libs.kotlin.test)
        }
    }
}

androidUnitTest/com/example/feature/usecase/UseCaseTest.kt

Tip 4: UI test

The official compose multiplatform UI test guide indicates that you have to use the commonTest directory for UI tests, but I prefer to use the androidInstrumentedTest directory, because with this approach, I separate the unit tests from the ui ones, and I can execute them directly from the same test class and run all the UI tests from the directory.

e.g.

mockk-android = { group = "io.mockk", name = "mockk-android", version.ref = "mockk-version" }
ui-test-junit4-android = { group = "androidx.compose.ui", name = "ui-test-junit4-android", version.ref = "uiTestJunit4AndroidVersion" }
ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "uiTestManifestVersion" }
kotlin-test = { group = "org.jetbrains.kotlin", name = "kotlin-test", version.ref = "kotlin-version" }

// feature build.gradle.kts
plugins {
    ...
    alias(libs.plugins.compose.multiplatform)
    alias(libs.plugins.compose)
}

kotlin {
    ...

    sourceSets {
        androidInstrumentedTest.dependencies {
            implementation(libs.mockk.android)
            implementation(libs.ui.test.junit4.android)
        }

        commonTest.dependencies {
            implementation(libs.kotlin.test)
            @OptIn(ExperimentalComposeLibrary::class)
            implementation(compose.uiTest)
        }
    }
}

...

dependencies {
    debugImplementation(libs.ui.test.manifest)
}

androidInstrumentedTest/com/example/feature/component/ScreenAndroidTest.kt

Conclusion

In this article we have seen some Kotlin Multiplatform tips, that I hope you find it useful. Thanks for reading it, and any feedback will be welcome.