How to Load Images in Kotlin Multiplatform (KMM) Using Coil

Feature	Description
Library Used	Coil (Image Loading Library)
Platforms Supported	Android, iOS, Web, Desktop (via KMM)
Key Benefits	Fast, lightweight, easy integration
Implementation	Kotlin Multiplatform with Jetpack Compose & SwiftUI
Use Cases	Displaying remote/local images, caching, placeholders

Introduction

Kotlin Multiplatform (KMM) allows developers to build cross-platform apps for Android, iOS, Web, and Desktop with a single codebase. One challenge in KMM is image loading since different platforms handle images differently.

Solution: The Coil image loading library, originally built for Android, now supports Kotlin Multiplatform and integrates smoothly with Jetpack Compose.

Why Use Coil in KMM?

• ✅ Works on Android, iOS, Web, and Desktop
• ✅ Easy integration with Jetpack Compose & SwiftUI
• ✅ Uses coroutines for fast async loading
• ✅ Supports caching, SVGs, GIFs, and transformations

Setup Coil in a Kotlin Multiplatform Project

1. Add Coil Dependency

In your shared module (build.gradle.kts), add:

dependencies {
    implementation("io.coil-kt:coil-compose:2.2.2") // Latest version
}

2. Initialize Coil in KMM

For Android & Compose Multiplatform, Coil works out-of-the-box. But for iOS, use the expect/actual pattern.

📌 Expect Declaration (Common Code - ImageLoader.kt)

expect fun getImageLoader(): ImageLoader

🔹 Actual Implementation (Android - ImageLoader.android.kt)

actual fun getImageLoader(): ImageLoader {
    return ImageLoader.Builder(context)
        .crossfade(true)
        .build()
}

🍏 Actual Implementation (iOS - ImageLoader.ios.kt)

actual fun getImageLoader(): ImageLoader {
    return ImageLoader.Builder()
        .build()
}

Using Coil in Jetpack Compose (Android & Desktop)

@Composable
fun LoadImage(url: String) {
    Image(
        painter = rememberAsyncImagePainter(url),
        contentDescription = "Loaded Image",
        modifier = Modifier.size(150.dp)
    )
}

Using Coil in SwiftUI (iOS)

import SwiftUI
import SDWebImageSwiftUI

struct LoadImage: View {
    var url: String
    var body: some View {
        WebImage(url: URL(string: url))
            .resizable()
            .scaledToFit()
            .frame(width: 150, height: 150)
    }
}

Reusable Image Loader for KMM

Create a reusable function to load images across platforms:

fun loadImage(url: String): Painter {
    return rememberAsyncImagePainter(url)
}

Conclusion

With Kotlin Multiplatform and Coil, you can efficiently load images across multiple platforms using shared code. This improves performance, reduces code duplication, and simplifies development.