Embedding compose code to render image assets

[cleamaec]

It was indicated in the documentation the Skip does not support loading images from resources yet so I added this compose code as an alternative. I have a hiddenlake photo inside Assets. However when I tried running the app it's giving this error. I should be able to use them right? or did I miss something?

#if SKIP
ComposeView { context in
    androidx.compose.foundation.Image(painter = painterResource(R.drawable.hiddenlake), contentDescription = "").Compose(context: context.content())
    return .ok
}
#endif

[aabewhite]

I'm sorry for the trouble. You're definitely on the right track!

1. You don't have to call .Compose() on Composable functions (in fact these functions return Void/Unit). You only have to call .Compose() when you're using SwiftUI views within a ComposeView content block.
2. You will need to fully qualify or import androidx.compose.ui.res.painterResource. If you import it, remember to put the import in a #if SKIP block.
3. When you say you put the photo in Assets, do you mean as an Xcode image asset? I don't believe that is expected to work right now. Resources support in general is lacking, and is a top item on our priority list. Let me ping @marcprux who is more familiar with that aspect of our codebase and see if he has ideas on how to load the image.

[aabewhite]

I should have mentioned that when you're getting used to mixing Compose/Kotlin into your code, one technique we've found useful is to open the whole project in Android Studio and play with the Kotlin directly. You get code completion and automatic imports and all that. Then back-port your solution to your Swift (or for lots of code, add a separate .kt file to your project that you write entirely in Android Studio). Just keep in mind that while you're experimenting with transpiled files in Android Studio, you should avoid running from Xcode or it'll re-transpile and overwrite your edits.

To open in Android Studio, make sure you've built your project once in Xcode and then in the Xcode file tree panel go to <app>/<app-module>/Skip/build/<app>.output/<app>/skipstone, control-click settings.gradle.kts and choose "Open with External Editor".

[aabewhite]

I've done some investigation. We're in the final stages of revamping our project structure to be more Android-friendly, but at the moment resource loading isn't working as intended. I'll get back to you when we work out the kinks in the new project structure in the next couple of days. Apologies!

[marcprux]

We've released Skip 0.7.26 (skip upgrade to get it) that creates a more Android-friendly app project when you run skip init --appid=bundle.id project-name AppName. The resulting project structure will have a top level project-name/Android/app/src/main/res/ that you can manage yourself. So in theory, you'll be able to drop resources in there and any #if SKIP Android code should be able to access it from the default R handling. But it is completely untested at this point, so we'd appreciate your feedback as to whether it works or not.

To expand on the topic slightly, Skip's approach to resources handling is to convert the Foundation.Bundle.module.url(…) behavior into the original Java ClassLoader.getResource(name) mechanism. This matches up better than Android's resource handling because it compartmentalizes resources on a module basis, and also (in theory) can handle locale-specific resource lookups.

We don't have any immediate plans to handle Android's static R resource generation, so you'll be on your own in #if SKIP blocks there. But we'd enjoy hearing about your experiences with it.

[cleamaec]

Hi @marcprux, thanks for the info! I opened my Skip app in Android Studio and tried importing a drawable via Android Studio's Resource Manager. It was reflected in the project-name/Android/app/src/main/res/ folder that you mentioned however I'm still encountering an Unresolved reference: drawable when building the project both in Xcode and Android Studio. See images below. Let me know if I'm not doing it right or if this is an expected issue. Thanks!

[marcprux]

The problem is that the R.drawable constants are only available at the application-level module, to which only the scaffold of Android/app/src/main/kotlin/poackagename/Main.kt is part of. Everything in your SwiftPM project is converted to an embedded Android module project, and so does not have access to the top-level R constants.

However, you can look up the image by name at runtime. I just tried this out, and it seems to work:

@ViewBuilder func androidCustomImageView() -> some View {
    #if !SKIP
    EmptyView()
    #else
    // This module cannot access application-level `R.drawable` constants, so we need to look up the resource by name
    let ctx = androidx.compose.ui.platform.LocalContext.current
    // https://developer.android.com/guide/topics/resources/drawable-resource#Bitmap
    let res = ctx.getResources().getIdentifier("rainbowlake", "drawable", ctx.getPackageName())
    logger.log("loaded application image resource for rainbowlake: \(res)")
    ComposeView { context in
        if res != 0 {
            androidx.compose.foundation.Image(
                painter = androidx.compose.ui.res.painterResource(id = res),
                contentDescription = "embedded image")
        }
        return .ok
    }
    #endif
}

We hope to soon support resource loading using the SwiftUI.Image(named:) API to load bundled images the same way on both platforms, but until then, you'll need to work through these sorts of gymnastics to get images loading.

Please let us know if you get it working!

[cleamaec]

Hi @marcprux, just a follow up question, is the code in your last comment supposed to display the image in the Android app only? Is there a way to also display the image in Swift? Based from my understanding this is how the compiler directive works.

#if SKIP
//Android only stuff
#else
//Skip stuff
#endif

Is my understanding correct? If yes, how do we customize the iOS part of the project?

Thanks,
Clea

[marcprux]

Yes, you're right: I "skipped" the iOS part. You would put in your iOS-specific SwiftUI there, such as AsyncImage(url: Bundle.module.url(forResource: …)) or Image(named:), or however else you'd like to display it.

We just released skip-ui 0.3.19, which adds support for using AsyncImage(url:) from a local bundle URL. It only works with images that are placed directly in Resources/ (we won't support Asset catalogs for a while yet), but if that is sufficient for your needs, you might want to try that out. Here's an example of using it:

https://github.com/skiptools/skipapp-showcase/blob/0faf7465b97501fad3c6d5008736fe37eaf166b6/Sources/Showcase/ImagePlayground.swift#L15-L25

[cleamaec]

I have imported the images to their respective directories. However, I am encountering this issue with the Bundle.module.url as the module variable inside the Bundle object was set to be accessed in the same module only.

[marcprux]

Is the image in your Resources/ folder, and is the folder specified in the module's Package.swift section as resources: [.process("Resources")]? See https://github.com/skiptools/skipapp-showcase/blob/main/Package.swift for an example.

Also, make sure you Update to Latest Package Versions in Xcode's File/Packages menu to ensure you have the latest skip libraries.

Let us know if that doesn't help. It is definitely working in the Showcase app, so we should be able to get it working for you.

[cleamaec]

It was just a missing import, my bad. Thank you @marcprux , it is now working!