How do I create an image in Beagle that works for Angular, Android and iOS?

Question

I'd like to know how do I create an image in Beagle that is compatible with all these three platforms: Angular, Android and iOS.

It's working just fine in my Angular application, but I can't get it to work in any mobile platform.

Here's my code for the backend:

Image(Local.justWeb('/public/logo.png'))

I saw there's a Local.both, but I don't know exactly how to use it.

Answer 1

An image can be of two types: local or remote. Remote images only use a URL and works the same way in any platform.

This is the case of local images though. A local image resource works differently depending on the platform. For web applications you'll always need a URL. For mobile applications you'll need an identifier to locate the resource.

In the backend, you can write Local.justWeb if your application has only web clients, or Local.justMobile if your application has only mobile clients. If you need it to work for all platforms, you can use Local.both.

• Local.justWeb accepts a single parameter: the URL relative to site's root.
• Local.justMobile accepts a single parameter: the identifier of the resource in mobile platforms.
• Local.both accepts two parameters: first: the URL for the web app; second: the identifier for mobile platforms.

In Android, first you need to import the image as a resource (resource tab > import). A resource identifier can be defined in your design system class. If you don't have a design system class yet, you can create it. See the example below:

package com.myapp.beagle

import com.myapp.R
import br.com.zup.beagle.android.annotation.BeagleComponent
import br.com.zup.beagle.android.setup.DesignSystem

@BeagleComponent
class DesignSystem : DesignSystem() {
    override fun image(id: String): Int? {
        return when (id) {
            "informationImage" -> android.R.drawable.ic_menu_help
            "delete" -> android.R.drawable.ic_delete
            "TestImage" -> android.R.drawable.editbox_dropdown_dark_frame
            "logo" -> R.drawable.logo // <-- your identifier goes here
            else -> android.R.drawable.ic_menu_help
        }
    }
}

In iOS, you just need to create the resource with name equal to the mobileId you're going to use. To create a new resource, in xCode, click in the assets folder > + button > create image.