Network Image

Overview

The Network Image component is designed to asynchronously load and display images from a specified URL. It enhances user interfaces by providing a way to include remote images without blocking the UI thread. This document details the data and style properties used to customize the Network Image component's appearance and behavior.

Sample JSON

Below is a sample JSON object demonstrating how to define a Network Image component with various data and style properties:

networkImage.json

{
  "type": "networkImage",
  "data": {
    "imageUrl": "https://fastly.picsum.photos/id/110/5000/3333.jpg?hmac=AvUBrnXG4ebvrtC08T95vEzD1I9SryZ8KSQ4iJ9tb9s"
  },
  "style": {
    "height": 200,
    "width": 250,
    "scale": "fit",
    "cornerRadius": 16,
    "padding": {
      "top": 5,
      "right": 0,
      "bottom": 5,
      "left": 0
    }
  }
}

This results in the following output:

In this example, the Network Image component displays an image from the specified URL with the following style properties:

• Height and width are set to 200 and 250 logical pixels, respectively.
• Scale mode is set to fit, ensuring the image fits within the specified dimensions while maintaining its aspect ratio.
• Corner radius is enabled, rounding the corners of the image.
• Padding is applied with 5 logical pixels on the top and bottom, and no padding on the left and right.

Data Properties

The data properties define the source and content of the Network Image component. The following table lists the available data property for the Network Image component:

Property	Type	Required	Description
imageUrl	String	true	The URL of the image to display.

imageUrl

• Type: String (required)
• Description: Specifies the URL from which the image will be loaded. The URL must be valid and accessible.

Style Properties (Optional)

Style properties allow you to customize the appearance of the Network Image component.

info

The style properties are optional. If you don't specify any style properties, the Network Image component will use the default values.

The following table lists the available style properties for the Network Image component:

Property	Type	Required	Description
height	Float	false	The height of the image in logical pixels.
width	Float	false	The width of the image in logical pixels.
scale	String	false	The scaling mode (e.g., "fit", "fill", "crop") to adjust the image size.
cornerRadius	Float	false	Sets the corner radius in logical pixels for rounding.
padding	JSON	false	The padding around the image component.

height

• Type: Float (optional)
• Description: Defines the vertical size of the image in logical pixels. Setting this property allows you to specify the height of the image, ensuring it fits well within the layout of your app's UI. A value is not mandatory; if omitted, the image's natural height or the height derived from other style constraints will be used.

width

• Type: Float (optional)
• Description: Determines the horizontal size of the image in logical pixels. This property lets you control the width of the image, allowing for precise placement and scaling within your app's interface. Like height, specifying a width is optional; without it, the image will default to its natural width or adapt based on other styling rules applied.

scale

• Type: String (optional)
• Description: Determines how the image is resized to fit its container. The available values are:

  • Android: "fit", "fill", "crop"

  • iOS: "fit", "fill"

  • fit: Scales the image to fit the space while maintaining its aspect ratio.

  • fill: Scales the image to completely cover the space, possibly clipping it.

  • crop (Android only): Scales and centers the image, filling the space and cropping the excess parts.

cornerRadius

• Type: Float (optional)
• Description: Defines the radius for the image's corners, enabling rounded edges. A larger value increases roundness, enhancing the image's visual appeal.

padding

• Type: JSON (optional)
• Description: Defines the space around the component. The padding is specified for top, bottom, left, and right individually. Each subproperty is an integer representing the number of logical pixels for the padding.
  • top: The space above the component.
  • bottom: The space below the component.
  • left: The space to the left of the component.
  • right: The space to the right of the component.