KMPizza
Kotlin Multiplatform + Pizza = ❤️

Step 21: Add images to iOS app with Kingfisher image library

In Step 15 we started creating our iOS App Swift UI.
So far it has only a main view with the list of recipes.
However, if you try running the app, it’ll crash with an error.

That’s because we need to use a special version of coroutines library (native-mt).
Add the following dependency to your project. In Versions.kt:

  
const val COROUTINES_MT = "1.6.3-native-mt"

In Common object:

 
const val COROUTINES = "org.jetbrains.kotlinx:kotlinx-coroutines-core:$COROUTINES_MT"

In shared build.gradle.kts within the commonMain sourceSet:

 
// Coroutines
implementation(Versions.Common.COROUTINES) {
   version {
       strictly(Versions.COROUTINES_MT)
   }
}

Also add the following to your project gradle.properties:

 
kotlin.native.binary.memoryModel=experimental
kotlin.native.binary.freezing=disabled

These settings will enable the new memory model management.
Run the app again and you’ll see a list of recipe titles.

Now let’s make our iOS app look more like our Android app by adding other cool features.

First, add an image loading library.

add packages menu
add package to iosApp

You have a new package dependency now

new package dependency

Add a new file to the recipes folder: RecipeView.
Here we’ll describe how we want one Recipe to look like in the list of recipes.

 
import SwiftUI
import shared
import struct Kingfisher.KFImage [1]
 
struct RecipeView: View {
    
    var item: RecipeResponse
    
    var body: some View {
        HStack(alignment: .center) {
            KFImage(URL(string: "https://m.media-amazon.com/images/I/413qxEF0QPL._AC_.jpg"))
                .resizable()
                .frame(width: 64, height: 64, alignment: .center)
                .cornerRadius(8)
                .padding(.trailing)
            VStack(alignment: .leading) {
                Text(item.title)
                    .font(.body)
            }
        }
    }
}

[1] Don’t forget to import KFImage from the Kingfisher imaging library, for now we’ll use it with a hardcoded placeholder image
[2] The recipe view will hold Recipe as an entity
[3] HStack is like a Row and VStack is like a Column in Jetpack Compose.

Now you can replace the Text(recipe.title) in RecipesView with the following:

 
   RecipeView(item: recipe)

As a result, you should be able to see a nice list with image placeholders for every recipe.

ios recipes list with images

In the next step we’ll proceed with RecipeDetailView and add Navigation to our iOS App.