NativeImage

A customizable image block for Nativeblocks.

@NativeBlock(
    name: "Native Image",
    keyType: "NATIVE_IMAGE",
    description: "Nativeblocks image block",
    version: 1
)
struct NativeImage<Content: View>: View 

NativeImage is a flexible image block for displaying images with customization options, including placeholders, error handling, resizing, scaling, and styling.

Features:

• Supports image loading from remote URLs.

• Customizable placeholder and error views.

• Configurable resizing and scaling options.

• Background styling, corner radius, and accessibility support.

Example:

NativeImage(
    imageUrl: "https://example.com/image.png",
    placeHolder: { _ in Text("Loading...") },
    errorView: { _ in Text("Failed to load image.") },
    contentDescription: "Example image",
    contentMode: "fit",
    resizable: "stretch"
)

Inheritance

View

Properties

imageUrl

The URL of the image to display.

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

placeHolder

A placeholder view to display while the image is loading.

@NativeBlockSlot(description: "The placeholder view displayed while the image is loading.")
    var placeHolder: (BlockIndex) -> Content

errorView

A view to display if there is an error loading the image.

@NativeBlockSlot(description: "The error view displayed when the image fails to load.")
    var errorView: (BlockIndex) -> Content

contentDescription

A description of the image for accessibility purposes.

@NativeBlockData(description: "The content description for the image, used for accessibility.")
    var contentDescription: String = ""

contentMode

The content mode for scaling the image.

@NativeBlockProp(
        description: "The content mode for scaling the image.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("fill", "fill"),
            NativeBlockValuePickerOption("fit", "fit"),
        ]
    )
    var contentMode: String = "fit"

• valuePicker: A dropdown picker for selecting the content mode.

• valuePickerOptions: Options include "fill" (scale to fill the frame) and "fit" (scale to fit the frame).

resizable

The resizing mode for the image.

@NativeBlockProp(
        description: "The resizing mode for the image.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("stretch", "stretch"),
            NativeBlockValuePickerOption("tile", "tile"),
        ]
    )
    var resizable: String = "stretch"

• valuePicker: A dropdown picker for selecting the resizing mode.

• valuePickerOptions: Options include:

  • "notSet": Default behavior without resizing.
  • "stretch": Stretches the image to fit its frame.
  • "tile": Tiles the image across its frame.

frameWidth

The width of the image frame.

@NativeBlockProp(
        description: "The width of the image frame.",
        valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("infinity", "infinity"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Size")
    )
    var frameWidth: String = "notSet"

• valuePicker: A combobox input for specifying width options.

• valuePickerOptions: Options include:

  • "notSet": Default behavior without specific width.
  • "infinity": Stretches the width to fill available space.

frameHeight

The height of the image frame.

@NativeBlockProp(
        description: "The height of the image frame.",
        valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("infinity", "infinity"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Size")
    )
    var frameHeight: String = "notSet"

• valuePicker: A combobox input for specifying height options.

• valuePickerOptions: Options include:

  • "notSet": Default behavior without specific height.
  • "infinity": Stretches the height to fill available space.

backgroundColor

The background color of the image.

@NativeBlockProp(
        description: "The background color of the image.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var backgroundColor: String = "#00000000"

• valuePicker: A color picker for selecting the background color.

cornerRadius

The corner radius of the image for rounded corners.

@NativeBlockProp(
        description: "The corner radius of the image for rounded corners.",
        valuePicker: NativeBlockValuePicker.NUMBER_INPUT,
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var cornerRadius: CGFloat = 0

• valuePicker: A number input for specifying the radius.

body

var body: some View