Is there any way to load and chache images? I have...

# multiplatform

[Khanzada Kashif]

Is there any way to load and chache images? I have tried using image-loader library but it makes the app very laggy when caching enabled.
Right now I have moved my image loader function to expect actual and using coil for android side which is working very fine but now I can't seem to find anything that would work for iOS.

[Michael Paus]

What about https://github.com/qdsfdhvh/compose-imageloader ?

[Khanzada Kashif]

Yep this is the one I was talking about, it gets laggy with image caching.

[Jeff Lockhart]

Are you using Compose Multiplatform? For native Swift, I use https://github.com/onevcat/Kingfisher

[Khanzada Kashif]

I have a KMM project in which we built iOS using SwiftUi and in that I have image loading configured and is working really well.
Now we have integrated compose multiplatform in the same project for the new features, and now I am facing the issue of image loading and caching.

[Jeff Lockhart]

What library are you currently using in SwiftUI? I've used Kingfisher with iOS storyboard views. I'm not sure if it might be possible to expect/actual its caching for use in Compose.

[Khanzada Kashif]

I am not using any external library for it in the swiftui. It just works out of the box.
And yes, we can't use swiftui in expect/actuals

[Shivam Kanodia]

@Khanzada Kashif did you found any solution

[Shivam Kanodia]

@Khanzada Kashif?

[Khanzada Kashif]

@Shivam Kanodia made the image view in uikit for ios, with caching.

[Shivam Kanodia]

@Khanzada Kashif can you please help me with some example code, do you mean actual expect?

[Khanzada Kashif]

Let me send you the code.

[Khanzada Kashif]

@Composable
expect fun MYAsyncImage(
url: String,
contentScale: ContentScale = ContentScale.FillBounds,
contentDescription: String? = null,
modifier: Modifier,
onClick: () -> Unit
)

[Khanzada Kashif]

@Composable
actual fun MYAsyncImage(
url: String,
contentScale: ContentScale,
contentDescription: String?,
modifier: Modifier,
onClick: () -> Unit
) {
AsyncImage(
modifier = modifier.clickable {
onClick()
},
model = ImageRequest.Builder(LocalContext.current).data(url).crossfade(true).build(),
contentDescription = contentDescription,
contentScale = contentScale,
onError = {
Log.e("image error", it.result.throwable.localizedMessage ?: "image error")
}
)
}

[Khanzada Kashif]

@Composable
actual fun MYAsyncImage(
url: String,
contentScale: ContentScale,
contentDescription: String?,
modifier: Modifier,
onClick: () -> Unit
) {
val imageView = rememberSaveable(url) {
UIImageView().apply {
layer.zPosition = 1.0
loadImageFromUrl(url = url)
}
}

Box(
modifier = modifier
) {
UIKitView(
factory = {
imageView
},
modifier = Modifier,
interactive = true
)
Box(modifier = Modifier.zIndex(100f).fillMaxSize().clickable {
onClick()
})
}
}

fun UIImageView.loadImageFromUrl(url: String) {
if (url.contains("\\s".toRegex()).not())
NSURLSession.sharedSession.dataTaskWithURL(
url = NSURL(string = url),
completionHandler = { data, response, error ->
if (error == null && response != null && data != null) {
if ((response as NSHTTPURLResponse).statusCode == 200L) {
CoroutineScope(Dispatchers.Main).launch {
image = UIImage(data = data)
}
}
}
}
).resume()
}

[Khanzada Kashif]

On android side it is using coil, and for ios it is using native uikit.

[Khanzada Kashif]

@Shivam Kanodia