KMP shared module

Gradle

First we need to import the ksp plugin:

plugins {
    id("com.google.devtools.ksp") version "${Kotlin}-${KSP}"
}

Then configure iosMain target to import kmp-composeuiviewcontroller-annotations:

kotlin {
    sourceSets {
        iosMain.dependencies {
            implementation("com.github.guilhe.kmp:kmp-composeuiviewcontroller-annotations:${LASTEST_VERSION}")
        }
    }
}

and also the kmp-composeuiviewcontroller-ksp:

listOf(iosArm64(), iosSimulatorArm64(), iosX64()).forEach { target ->
    val targetName = target.name.replaceFirstChar { it.uppercaseChar() }
    dependencies.add("ksp$targetName", "com.github.guilhe.kmp:kmp-composeuiviewcontroller-ksp:${LASTEST_VERSION}")
}

Finish it by adding this task configuration in the end of the file:

• If using XCFramework:

tasks.matching { it.name == "embedAndSignAppleFrameworkForXcode" }.configureEach { finalizedBy(":addFilesToXcodeproj") }

• If using Cocoapods:

tasks.matching { it.name == "syncFramework" }.configureEach { finalizedBy(":addFilesToXcodeproj") }

You can find a full setup example here.

Code generation

Now we can take advantage of two annotations:

• @ComposeUIViewController: it will mark the @Composable as a desired ComposeUIViewController to be used by the iosApp;
• @ComposeUIViewControllerState: it will specify the composable state variable.

Rules and considerations

1. @ComposeUIViewController will always require a unique @ComposeUIViewControllerState;
2. @ComposeUIViewController has a frameworkName parameter that must be used to specify the shared library framework's base name;
3. @ComposeUIViewControllerState can only be applied once per @Composable;
4. The state variable of your choosing must have default values in it's initialization;
5. Only 1 @ComposeUIViewControllerState and * function parameters (excluding @Composable) are allowed in @ComposeUIViewController functions.

For more information consult the ProcessorTest.kt file from kmp-composeuiviewcontroller-ksp.

Example

data class ViewState(val status: String = "default")

@ComposeUIViewController("SharedUI")
@Composable
fun ComposeView(@ComposeUIViewControllerState viewState: ViewState, callback: () -> Unit) { }

will produce a ComposeViewUIViewController:

object ComposeViewUIViewController {
    private val viewState = mutableStateOf(ViewState())

    fun make(callback: () -> Unit): UIViewController {
        return ComposeUIViewController {
            ComposeView(viewState.value, callback)
        }
    }

    fun update(viewState: ViewState) {
        this.viewState.value = uiState
    }
}

and also a ComposeViewRepresentable:

import SwiftUI
import SharedUI

public struct ComposeViewRepresentable: UIViewControllerRepresentable {
    @Binding var viewState: ScreenState
    let callback: () -> Void
    
    func makeUIViewController(context: Context) -> UIViewController {
        ComposeViewUIViewController().make(callback: callback)
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
        ComposeViewUIViewController().update(viewState: viewState)
    }
}

Project root

Having all the files created by KSP, the next step is to make sure all the UIViewControllerRepresentable files are referenced in xcodeproj for the desire target:

1. Make sure you have Xcodeproj installed;
2. Copy the exportToXcode.sh file to the project's root and run chmod +x ./exportToXcode.sh
3. Copy the following gradle task to the project's root build.gradle.kts:

tasks.register<Exec>("addFilesToXcodeproj") {
    workingDir(layout.projectDirectory)
    commandLine("bash", "-c", "./exportToXcode.sh")
}

note: if you change the default names of shared module, iosApp folder, iosApp.xcodeproj file and iosApp target, you'll have to adjust the exportToXcode.sh accordingly (in # DEFAULT VALUES section).

iOSApp

Now that the UIViewControllerRepresentable files are included and referenced in the xcodeproj, they are ready to be used:

import SwiftUI
import SharedUI

struct SomeView: View {
    @State private var state: ViewState = ViewState(status: "default")        
    var body: some View {
        ComposeViewRepresentable(viewState: $state, callback: {})
    }
}

Pretty simple right? 😊

For a working sample run iosApp by opening iosApp/iosApp.xcodeproj in Xcode and run standard configuration or use KMM plugin for Android Studio and choose iosApp in run configurations.