· 2 min read Posted by Gabriel Souza

Mix Compose Multiplatform with native iOS UI using Compose Swift Bridge

Compose Multiplatform has a critical unique feature. On iOS, you can mix Compose UI with native iOS UI. This is all enabled by the direct interop of Kotlin Multiplatform. That capability is amazing for mobile development. However, the actual process of wiring these two requires a fair bit of boilerplate. We've launch Compose Swift Bridge to automate that.
https://www.flickr.com/photos/katysilbs/4467618891
Credit: https://www.flickr.com/photos/katysilbs/4467618891

Mixing Native UI

The ability to mix native UI offers significant advantages in mobile development. Compose Multiplatform allows developers to mix Compose UI with native iOS UI through Kotlin Multiplatform’s direct interoperability. While this feature is powerful, the process of integrating these two UI components often involves a substantial amount of boilerplate code when we are talking about SwiftUI.

To simplify this integration, we have introduced Compose Swift Bridge, an experimental tool designed to automate the process. Compose Swift Bridge enables developers to define expected composable functions that can later be implemented in the iOS project using SwiftUI. By annotating these functions with @ExpectSwiftView, the tool generates the necessary Kotlin and Swift code with a ObservableObject that allows for easy state management and keeps the state parameters updated in the SwiftUI view without additional effort.

Compose Swift Bridge uses the SKIE Sub Plugin API to automate code generation. The key advantage of using SKIE is that it understands how Kotlin declarations like types, functions names are translated into Swift. This knowledge allows the tool to generate precise Swift code and be compiled directly at the iOS Framework.

We have recorded a video explaining in more detail and wrote a step-by-step tutorial of how to set up and create your first Expect view with the tool.