NativeImage

A customizable image block for Nativeblocks.

@NativeBlock(
    name = "Native Image",
    keyType = "NATIVE_IMAGE",
    description = "Nativeblocks image block",
    version = 1
)
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 = "fit",
    radiusTopStart = 8.0,
    radiusBottomEnd = 8.0,
    contentDescription = "Example Image"
)

---

Properties

imageUrl

The URL of the image to display.

@NativeBlockData(description = "The URL of the image to display.")
var imageUrl: String

---

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")
    ]
)
var 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")
    ]
)
var height: String = "wrap"

---

radiusTopStart

The top-start corner radius in DP.

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

---

radiusTopEnd

The top-end corner radius in DP.

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

---

radiusBottomStart

The bottom-start corner radius in DP.

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

---

radiusBottomEnd

The bottom-end corner radius in DP.

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

---

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("fit", "fit"),
        NativeBlockValuePickerOption("fillBounds", "fillBounds")
    ]
)
var scaleType: String = "none"

---

contentDescription

A description of the image for accessibility purposes.

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