Components

image

6min

You can use this component as a unique visual identifier. Display a profile photo, company logo, photo of products, and much more to improve your application's visual experience.

The image component can be part of the header, stories and as a child component in jig.default.

Image Preview
Image Preview


Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.



Core structure



uri

The image source (either a remote URL or a local file resource). The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).

Other options



height

Change the height of the image in pixels. Ensure a proper resizeMode is used to achieve the best results on different device resolutions. The default is set at 196 pixels.

resizeMode

Resize the image when the frame doesn't match the raw image dimensions. The following options are available:

  • center - If the image is bigger than the area it is scaled down making it completely visible. The image is not scaled up.
  • contain - Scales the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
  • cover - Scales the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
  • stretch - Scales the width and height of the image independently, This may change the aspect ratio of the source.

subtitle

Adds a subtitle that is displayed on or next to the image based on image context.

title

Display the text content for the title that can be displayed on or next to the image based on the image context.

width

Change the width of the image in pixels. Ensure a proper resizeMode is used to achieve the best results on different device resolutions.

Actions



onPress

The action is triggered when pressing on the image. Use IntelliSense (ctrl+space) to see the list of available actions.

Considerations

  • Dynamic Data cannot save images larger than 350K. Jigx does not recommend storing images in Dynamic Data or storing images as base64 in the Dynamic Data database.
  • The images can be preloaded and cached using the asset folder's images file. The images will be displayed even when you are offline. For more details, refer to Assets.

Examples and code snippets 

Image in header
Image in header


Image is used as a background picture in the header section.

Examples:

See the example using static data in GitHub. See the example using dynamic data in GitHub.

Datasource:

See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

header (static)
header (dynamic)
datasources (static)
datasources (dynamic)

Image as a story


Image as a front cover of the story.

Examples: See the example using static data in GitHub. See the example using dynamic data in GitHub.

Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.



story (static)
story (dynamics)
datasources (static)
datasources (dynamic)

Image in a jig
Image in a jig


Image as a children component in default jig.

Examples: See the example using static data in GitHub. See the example using dynamic data in GitHub.

Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.



jig (static)
jig (dynamic)
datasources (static)
datasources (dynamic)




Updated 24 Jul 2024
Doc contributor
Did this page help you?
Yes
No