What's new in Compose Multiplatform 1.8.0-beta02

Full migration of Compose Multiplatform to the K2 compiler

With this release, the Compose Multiplatform codebase has been fully migrated to the K2 compiler. Starting with 1.8.0, native and web klibs produced by projects that depend on Compose Multiplatform can be consumed only when using Kotlin 2.1.0 or newer.

What this means for your projects, in addition to the underlying changes in the Compose compiler Gradle plugin:

• For a library that depends on Compose Multiplatform: you need to update your project to Kotlin 2.1.x and Compose 1.8.0, then recompile the library and publish the new version.

• For an app using such libraries: it's recommended to update your project to Kotlin 2.1.20 and update the dependencies to versions compiled against Compose Multiplatform 1.8.0 and Kotlin 2.1.x.

If you encounter any compatibility issues when upgrading to Compose Multiplatform 1.8.0, please let us know by filing an issue in YouTrack.

Migration from Bundle to SavedState in Navigation

Navigation in Compose Multiplatform 1.8.0-beta02, along with the Android Navigation component, is transitioning to using the SavedState class to store UI states. This breaks the pattern of accessing state data when you declare destinations in a navigation graph. When upgrading to a 2.9.* version of the Navigation library, make sure to update such code to use accessors of SavedState.

note

For a more robust architecture, use the type-safe approach to navigation, avoiding string routes.

Before:

composable(Destinations.Followers.route) { navBackStackEntry ->
    val uId = navBackStackEntry.arguments?.getString("userid")
    val page = navBackStackEntry.arguments?.getString("page")
    if (uId != null && page != null) {
        FollowersMainComposable(navController, accountId = uId, page = page)
    }
}

Starting with Compose Multiplatform 1.8.0-beta02:

composable(Destinations.Followers.route) { navBackStackEntry ->
    val uId = navBackStackEntry.arguments?.read { getStringOrNull("userid") }
    val page = navBackStackEntry.arguments?.read { getStringOrNull("page") }
    if (uId != null && page != null) {
        FollowersMainComposable(navController, accountId = uId, page = page)
    }
}

Deprecated ComposeUIViewControllerDelegate on iOS

The ComposeUIViewControllerDelegate API has been deprecated in favor of the parent view controller. If you use the deprecated API with Compose Multiplatform 1.8.0-beta02, you will encounter a deprecation error indicating that you should override the UIViewController class methods via the parent view controller.

Read more about child-parent view controller relationships in Apple’s developer documentation.

Removed obsolete platformLayers option on iOS

The platformLayers experimental option was introduced in 1.6.0 to allow enabling alternative layering mode and drawing popups and dialogs outside the bounds of the parent container.

This mode is now the default behavior on iOS, and the option to enable it has been removed as obsolete.

Breaking changes in tests

@Test
fun loopInLaunchedEffectTest() = runComposeUiTest {
    setContent {
        LaunchedEffect(Unit) {
            while (true) {
                delay(1000)
                println("Tick")
            }
        }
    }
}

var updateText by mutableStateOf(false)
var text by mutableStateOf("0")
setContent {
    LaunchedEffect(updateText) {
        if (updateText) {
            delay(1000)
            text = "1"
        }
    }
}
updateText = true
waitForIdle()
// Since waitForIdle() no longer waits for the delayed LaunchedEffect() to complete,
// the test needs to advance time to make the following assertion correct:
mainClock.advanceTimeBy(1001)

assertEquals("1", text)

Variable fonts

Compose Multiplatform 1.8.0-beta02 supports variable fonts on all platforms. With variable fonts, you can keep one font file that contains all style preferences such as weight, width, slant, italic, custom axes, visual weight with typographic color, and adaptations to specific text sizes.

For details, see the Jetpack Compose documentation.

Skia updated to Milestone 132

The version of Skia used by Compose Multiplatform, via Skiko, has been updated to Milestone 132.

The previous version of Skia used was Milestone 126. You can see the changes made between these versions in the release notes.

Line-height alignment

The common API for line-height alignment, previously supported by Compose Multiplatform on Android only, is now supported on all platforms. Using LineHeightStyle.Alignment, you can configure how a text line aligns within the space provided by the line height. Text lines can be aligned to the bottom, center, or top of the reserved space, or adjusted proportionally based on their ascent and descent values.

Note that in Material3, the default value for line-height alignment is Center, meaning central alignment will be applied to text with lineHeight in Material3 components across all platforms unless otherwise specified.

Drag-and-drop

Compose Multiplatform for iOS introduces support for drag-and-drop functionality, allowing you to drag content into or out of a Compose application (see pull request 1690 for a demo video). To define draggable content and drop targets, use the dragAndDropSource and dragAndDropTarget modifiers.

On iOS, drag-and-drop session data is represented by UIDragItem. This object contains information about cross-process data transfer and an optional local object for in-app usage. For example, you can use DragAndDropTransferData(listOf(UIDragItem.fromString(text))) to drag text, where UIDragItem.fromString(text) encodes the text into a format suitable for drag-and-drop operations. Currently, only the String and NSObject types are supported.

For common use cases, see the dedicated article in the Jetpack Compose documentation.

Accessibility support improvements

@Composable
fun FloatingBox() {
    Box(
        modifier =
        Modifier.semantics {
            isTraversalGroup = true
            // Sets a negative index to prioritize over elements with the default index
            traversalIndex = -1f
        }
    ) {
        FloatingActionButton(onClick = {}) {
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "Icon of floating action button"
            )
        }
    }
}

Stable API for iOS logging

The API that enables operating system logging on iOS is now stable. The enableTraceOSLog() function no longer requires experimental opt-in and now aligns with Android-style logging. This logging provides trace information that can be analyzed using Xcode Instruments for debugging and performance analysis.

Opt-in concurrent rendering

Compose Multiplatform for iOS now supports offloading rendering tasks to a dedicated render thread. Concurrent rendering may improve performance in scenarios without UIKit interop.

Opt in to encode the rendering commands on a separate render thread by enabling the useSeparateRenderThreadWhenPossible flag of the ComposeUIViewControllerConfiguration class, or the parallelRendering property directly within the ComposeUIViewController configuration block:

@OptIn(ExperimentalComposeUiApi::class)
fun main(vararg args: String) {
    UIKitMain {
        ComposeUIViewController(configure = { parallelRendering = true }) {
            // ...
        }
    }
}

Preloading of resources

Compose Multiplatform 1.8.0-beta02 introduces a new experimental API for preloading fonts and images for web targets. Preloading helps prevent visual issues such as flashes of unstyled text (FOUT) or the flickering of images and icons.

The following functions are now available for loading and caching resources:

• preloadFont(), which preloads fonts.

• preloadImageBitmap(), which preloads bitmap images.

• preloadImageVector(), which preloads vector images.

See the documentation for details.

Browser controls supported in the Navigation library

In Kotlin/Wasm and Kotlin/JS applications built with Compose Multiplatform, navigation now correctly works with basic browser controls. To enable this, link the browser window to the main navigation graph with the window.bindToNavigation() method. Once you do, the web app will correctly react to using the Back and Forward buttons to move through the history in the browser (see pull request 1621 for a demo video).

The web app will also manipulate the browser address bar to reflect the current destination route and navigate to a destination directly when the user pastes a URL with the correct route encoded (see pull request 1640 for a demo video). The window.bindToNavigation() method has the optional getBackStackEntryPath parameter, which allows you to customize the translation of route strings into URL fragments.

Setting the browser cursor

We introduced an experimental PointerIcon.Companion.fromKeyword() function to manage icons that can be used as mouse pointers on a browser page. By passing a keyword as a parameter, you can specify the type of cursor to display based on the context. For example, you can assign different pointer icons to select text, open a context menu, or indicate a loading process.

Check out the full list of available keywords.

Support for Windows for ARM64

Compose Multiplatform 1.8.0-beta02 introduces support for Windows for ARM64 on the JVM, improving the overall experience of building and running applications on ARM-based Windows devices.

Support for multiplatform resources in the androidLibrary target

Starting with the Android Gradle plugin version 8.8.0, you can use generated assets in the new androidLibrary target. To align Compose Multiplatform with these changes, we’ve introduced support for a new target configuration to work with multiplatform resources packed into Android assets.

If you are using the androidLibrary target, enable resources in your configuration:

kotlin {
  androidLibrary {
    experimentalProperties["android.experimental.kmp.enableAndroidResources"] = true
  }
}

Otherwise, you’ll encounter the following exception: org.jetbrains.compose.resources.MissingResourceException: Missing resource with path: ….