NativeImage

A customizable image block for Nativeblocks.

@NativeBlock(
    keyType = "NATIVE_IMAGE",
    name = "Native Image",
    description = "Nativeblocks image block",
    version = 2
)
fun NativeImage

NativeImage is a flexible image block for displaying images with customization options, including corner radii, scaling, resizing, and accessibility support. It integrates seamlessly with the Nativeblocks ecosystem and supports dynamic properties for server-driven UI.

---

Features:

• Loads images from remote URLs.
• Configurable width, height, scaling, and corner radii.
• Accessibility support with content descriptions.
• Dynamic resizing and scaling options.

---

Example:

NativeImage(
    imageUrl = "https://example.com/image.png",
    width = "match",
    height = "wrap",
    scaleType = ContentScale.Fit,
    radiusTopStart = 8.dp,
    radiusBottomEnd = 8.dp,
    contentDescription = "Example Image"
)

---

Datas

imageUrl

The URL of the image to display.

@NativeBlockData(
    description = "The URL of the image to display. Must be a valid HTTP or HTTPS URL."
) imageUrl: String

contentDescription

A description of the image for accessibility purposes.

@NativeBlockData(
    description = "A description of the image content for accessibility purposes."
) contentDescription: String = ""

Properties

width

The width of the image frame.

@NativeBlockProp(
    description = "The width of the image (e.g., 'match' or 'wrap').",
    valuePickerGroup = NativeBlockValuePickerPosition("Size"),
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("match", "Match parent"),
        NativeBlockValuePickerOption("wrap", "Wrap content")
    ],
    defaultValue = "wrap"
) width: String = "wrap"

height

The height of the image frame.

@NativeBlockProp(
    description = "The height of the image (e.g., 'match' or 'wrap').",
    valuePickerGroup = NativeBlockValuePickerPosition("Size"),
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("match", "Match parent"),
        NativeBlockValuePickerOption("wrap", "Wrap content")
    ],
    defaultValue = "wrap"
) height: String = "wrap"

radius

The corner radius in DP.

@NativeBlockProp(
    description = "The radius for the top-start corner in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "0.0"
) radiusTopStart: Dp = 0.dp

@NativeBlockProp(
    description = "The radius for the top-end corner in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "0.0"
) radiusTopEnd: Dp = 0.dp

@NativeBlockProp(
    description = "The radius for the bottom-start corner in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "0.0"
) radiusBottomStart: Dp = 0.dp

@NativeBlockProp(
    description = "The radius for the bottom-end corner in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "0.0"
) radiusBottomEnd: Dp = 0.dp

scaleType

The scaling strategy for the image (e.g., "fit", "crop").

@NativeBlockProp(
    description = "The scaling strategy for the image (e.g., 'fit', 'crop').",
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("none", "none"),
        NativeBlockValuePickerOption("crop", "crop"),
        NativeBlockValuePickerOption("inside", "inside"),
        NativeBlockValuePickerOption("fit", "fit"),
        NativeBlockValuePickerOption("fillBounds", "fillBounds"),
        NativeBlockValuePickerOption("fillWidth", "fillWidth"),
        NativeBlockValuePickerOption("fillHeight", "fillHeight")
    ],
    defaultValue = "none"
) scaleType: ContentScale = ContentScale.None