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

July 17, 2022

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.

• Go to File > Add Packages

• Search for https://github.com/onevcat/Kingfisher.git

• Select “Up to Next Major” with “7.0.0”

• Add the package to iosApp

You have a new package dependency now

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.

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