Share more logic between iOS and Android

kotlinx.coroutines

To add kotlinx.coroutines to your project, specify a dependency in the common source set. To do so, add the following line to the shared/build.gradle.kts file:

The Kotlin Multiplatform Gradle plugin automatically adds a dependency to the platform-specific (iOS and Android) parts of kotlinx.coroutines.

kotlinx.serialization

To use the kotlinx.serialization library, set up a corresponding Gradle plugin. To do that, add the following line to the existing plugins {} block at the very beginning of the shared/build.gradle.kts file:

Ktor

You need to add the core dependency (ktor-client-core) to the common source set of the shared module. You also need to add supporting dependencies:

• Add the ContentNegotiation functionality (ktor-client-content-negotiation), which allows serializing and deserializing the content in a specific format.

• Add the ktor-serialization-kotlinx-json dependency to instruct Ktor to use the JSON format and kotlinx.serialization as a serialization library. Ktor will expect JSON data and deserialize it into a data class when receiving responses.

• Provide the platform engines by adding dependencies on the corresponding artifacts in the platform source sets (ktor-client-android, ktor-client-darwin).

Synchronize the Gradle files by clicking the Sync Gradle Changes button.

Add a data model

In the shared/src/commonMain/.../greetingkmp directory, create a new RocketLaunch.kt file and add a data class which stores data from the SpaceX API:

• The RocketLaunch class is marked with the @Serializable annotation, so that the kotlinx.serialization plugin can automatically generate a default serializer for it.

• The @SerialName annotation allows you to redefine field names, making it possible to declare properties in data classes with more readable names.

Connect HTTP client

1. In the shared/src/commonMain/.../greetingkmp directory, create a new RocketComponent class.

2. Add the httpClient property to retrieve rocket launch information through an HTTP GET request:

   import io.ktor.client.HttpClient import io.ktor.client.plugins.contentnegotiation.ContentNegotiation import io.ktor.serialization.kotlinx.json.json import kotlinx.serialization.json.Json class RocketComponent { private val httpClient = HttpClient { install(ContentNegotiation) { json(Json { prettyPrint = true isLenient = true ignoreUnknownKeys = true }) } } }

   • The ContentNegotiation Ktor plugin and the JSON serializer deserialize the result of the GET request.

   • The JSON serializer here is configured in a way that it prints JSON in a more readable manner with the prettyPrint property. It is more flexible when reading malformed JSON with isLenient, and it ignores keys that haven't been declared in the rocket launch model with ignoreUnknownKeys.

3. Add the getDateOfLastSuccessfulLaunch() suspending function to RocketComponent:

   class RocketComponent { // ... private suspend fun getDateOfLastSuccessfulLaunch(): String { } }

4. Call the httpClient.get() function to retrieve information about rocket launches:

   import io.ktor.client.request.get import io.ktor.client.call.body class RocketComponent { // ... private suspend fun getDateOfLastSuccessfulLaunch(): String { val rockets: List<RocketLaunch> = httpClient.get("https://api.spacexdata.com/v4/launches").body() } }

   • httpClient.get() is also a suspending function because it needs to retrieve data over the network asynchronously without blocking threads.

   • Suspending functions can only be called from coroutines or other suspending functions. This is why getDateOfLastSuccessfulLaunch() was marked with the suspend keyword. The network request is executed in the HTTP client's thread pool.

5. Update the function again to find the last successful launch in the list:

   class RocketComponent { // ... private suspend fun getDateOfLastSuccessfulLaunch(): String { val rockets: List<RocketLaunch> = httpClient.get("https://api.spacexdata.com/v4/launches").body() val lastSuccessLaunch = rockets.last { it.launchSuccess == true } } }

   The list of rocket launches is sorted by date from oldest to newest.

6. Convert the launch date from UTC to your local date and format the output:

   import kotlinx.datetime.TimeZone import kotlinx.datetime.toLocalDateTime import kotlin.time.ExperimentalTime import kotlin.time.Instant class RocketComponent { // ... @OptIn(ExperimentalTime::class) private suspend fun getDateOfLastSuccessfulLaunch(): String { val rockets: List<RocketLaunch> = httpClient.get("https://api.spacexdata.com/v4/launches").body() val lastSuccessLaunch = rockets.last { it.launchSuccess == true } val date = Instant.parse(lastSuccessLaunch.launchDateUTC) .toLocalDateTime(TimeZone.currentSystemDefault()) return "${date.month} ${date.day}, ${date.year}" } }

   The date will be in the "MMMM DD, YYYY" format, for example, OCTOBER 5, 2022.

7. Add another suspending function, launchPhrase(), which will create a message using the getDateOfLastSuccessfulLaunch() function:

   class RocketComponent { // ... suspend fun launchPhrase(): String = try { "The last successful launch was on ${getDateOfLastSuccessfulLaunch()} 🚀" } catch (e: Exception) { println("Exception during getting the date of the last successful launch $e") "Error occurred" } }

Create the flow

You can use flows instead of suspending functions. They emit a sequence of values instead of a single value that suspending functions return.

1. Open the Greeting.kt file in the shared/src/commonMain/kotlin directory.

2. Add a rocketComponent property to the Greeting class. The property will store the message with the last successful launch date:

   private val rocketComponent = RocketComponent()

3. Change the greet() function to return a Flow:

   import kotlinx.coroutines.delay import kotlinx.coroutines.flow.Flow import kotlinx.coroutines.flow.flow import kotlin.time.Duration.Companion.seconds class Greeting { // ... fun greet(): Flow<String> = flow { emit(if (Random.nextBoolean()) "Hi!" else "Hello!") delay(1.seconds) emit("Guess what this is! > ${platform.name.reversed()}") delay(1.seconds) emit(daysPhrase()) emit(rocketComponent.launchPhrase()) } }

   • The Flow is created here with the flow() builder function, which wraps all the statements.

   • The Flow emits strings with a delay of one second between each emission. The last element is only emitted after the network response returns, so the exact delay depends on your network.

Add internet access permission

To access the internet, the Android application needs the appropriate permission. Since all network requests are made from the shared module, it makes sense to add the internet access permission to its manifest.

Update your composeApp/src/androidMain/AndroidManifest.xml file with the access permission:

You've already updated the API of the shared module by changing the return type of the greet() function to Flow. Now you need to update native parts of the project so that they can properly handle the result of calling the greet() function.

Introduce a view model

Now that the application is becoming more complex, it's time to introduce a view model to the Android activity called MainActivity. It invokes the App() function that implements the UI. The view model will manage the data from the activity and won't disappear when the activity undergoes a lifecycle change.

1. In the composeApp/src/androidMain/.../greetingkmp directory, create a new MainViewModel Kotlin class:

   import androidx.lifecycle.ViewModel class MainViewModel : ViewModel() { // ... }

   This class extends Android's ViewModel class, which ensures the correct behavior regarding lifecycle and configuration changes.

2. Create a greetingList value of the StateFlow type and its backing property:

   import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.StateFlow class MainViewModel : ViewModel() { private val _greetingList = MutableStateFlow<List<String>>(listOf()) val greetingList: StateFlow<List<String>> get() = _greetingList }

   • StateFlow here extends the Flow interface but has a single value or state.

   • The private backing property _greetingList ensures that only clients of this class can access the read-only greetingList property.

3. In the init function of the View Model, collect all the strings from the Greeting().greet() flow:

   import androidx.lifecycle.viewModelScope import kotlinx.coroutines.launch class MainViewModel : ViewModel() { private val _greetingList = MutableStateFlow<List<String>>(listOf()) val greetingList: StateFlow<List<String>> get() = _greetingList init { viewModelScope.launch { Greeting().greet().collect { phrase -> //... } } } }

   Since the collect() function is suspended, the launch coroutine is used within the view model's scope. This means that the launch coroutine will run only during the correct phases of the view model's lifecycle.

4. Inside the collect trailing lambda, update the value of _greetingList to append the collected phrase to the list of phrases in list:

   import kotlinx.coroutines.flow.update class MainViewModel : ViewModel() { //... init { viewModelScope.launch { Greeting().greet().collect { phrase -> _greetingList.update { list -> list + phrase } } } } }

   The update() function will update the value automatically.

Use the view model's flow

1. In composeApp/src/androidMain/kotlin, open the App.kt file and update it, replacing the previous implementation:

   import androidx.lifecycle.compose.collectAsStateWithLifecycle import androidx.compose.runtime.getValue import androidx.lifecycle.viewmodel.compose.viewModel @Composable @Preview fun App(mainViewModel: MainViewModel = viewModel()) { MaterialTheme { val greetings by mainViewModel.greetingList.collectAsStateWithLifecycle() Column( modifier = Modifier .safeContentPadding() .fillMaxSize(), verticalArrangement = Arrangement.spacedBy(8.dp), ) { greetings.forEach { greeting -> Text(greeting) HorizontalDivider() } } } }

   • The collectAsStateWithLifecycle() function calls on greetingList to collect the value from the ViewModel's flow and represent it as a composable state in a lifecycle-aware manner.

   • When a new flow is created, the compose state will change and display a scrollable Column with greeting phrases arranged vertically and separated by dividers.

2. To see the results, rerun your composeApp configuration:

   

Introducing a ViewModel

In iosApp/ContentView.swift, create a ViewModel class for ContentView, which will prepare and manage data for it. Call the startObserving() function within a task() call to support concurrency:

• ViewModel is declared as an extension to ContentView, as they are closely connected.

• ViewModel has a greetings property that is an array of String phrases. SwiftUI connects the ViewModel (ContentView.ViewModel) with the view (ContentView).

• ContentView.ViewModel is declared as an ObservableObject.

• The @Published wrapper is used for the greetings property.

• The @ObservedObject property wrapper is used to subscribe to the ViewModel.

This ViewModel will emit signals whenever this property changes. Now you need to implement the startObserving() function to consume flows.

Choose a library to consume flows from iOS

In this tutorial, you can use SKIE the KMP-NativeCoroutines library to help you work with flows in iOS. Both are open-source solutions that support cancellation and generics with flows, which the Kotlin/Native compiler doesn't yet provide by default:

• The SKIE library augments the Objective-C API produced by the Kotlin compiler: SKIE transforms flows into an equivalent of Swift’s AsyncSequence. SKIE directly supports Swift's async/await, without thread restriction, and with automatic bidirectional cancellation (Combine and RxSwift require adapters). SKIE offers other features to produce a Swift-friendly API from Kotlin, including bridging various Kotlin types to Swift equivalents. It also doesn’t require adding additional dependencies in iOS projects.

• The KMP-NativeCoroutines library helps you consume suspending functions and flows from iOS by generating the necessary wrappers. KMP-NativeCoroutines supports Swift's async/await functionality as well as Combine and RxSwift. Using KMP-NativeCoroutines requires adding an SPM or CocoaPod dependency in iOS projects.

Consume the ViewModel and run the iOS app

In iosApp/iOSApp.swift, update the entry point for your app:

Run the iosApp configuration from IntelliJ IDEA to make sure your app's logic is synced:

See also

• Explore various approaches to composition of suspending functions.

• Learn more about the interoperability with Objective-C frameworks and libraries.

• Complete this tutorial on networking and data storage.