Media

Components that help further define the structure and feel of the screen.

There are six Media components available:

Image

A component for displaying different types of images, including images from remote URLs, and images from assets.

📘

Note that for remote URLs you will need to manually specify the dimensions of your image.

❗️

Make sure the Image file name begins with a letter, not a number!

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Image.

Resize Mode

Set how to resize the image when the dimensions set in the component don't match the actual dimensions of the image. Refer to the Resize Mode table below to learn more about each setting.

Data

Property

Description

Source Type

  • Static if the image source is coming from Assets.
  • Remote URL if the image source is network.

Source

Source of the image from the uploaded Assets.

Resize Mode

Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to cover.

Property

Description

cover

Scale 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).

contain

Scale 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).

stretch

Scale width and height independently, This may change the aspect ratio of the source.

repeat

Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio unless it is larger than the VIew, in which case it will be scaled down uniformly so that it is contained in the View.

center

Center the image in the View along both dimensions. If the image is larger than the View, scale it down uniformly so that it is contained in the View.

Image Background

A component that allows you to set a background image to cover the entire screen. You can add children components to it to layer them on top of it.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Image Background.

Resize Mode

Set how to resize the image when the dimensions set in the component don't match the actual dimensions of the image. Refer to the Resize Mode table in Image component to learn more about each setting.

Backface Visibility

Sets whether the back face of an element is visible when turned towards the user.

Data

Property

Description

Source Type

  • Static if the image source is coming from Assets.
  • Remote URL if the image source is network.

Source

Source of the image from the uploaded Assets.

Circle Image

A circular image component is commonly used to represent a user's avatar and contains an image
source.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Circle Image.

Size

Size of the image component. Sets the width and height equal to maintain the discoid.

Data

Property

Description

Source Type

  • Static if the image source is coming from Assets.
  • Remote URL if the image source is network.

Source

Source of the image from the uploaded Assets.

Video

A component that displays a video.

❗️

YouTube videos are not currently supported. Please use a video in a .mp4 or .mov format.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Video.

Mute Audio

Enable to mute the video.

Allow Looping

Enable to loop the video.

Use Thumbnail

Enable so that a thumbnail will appear when the video is not playing.

Resize Mode

How the video will be resized when its dimensions set for the component don't match the actual dimensions of the video. Refer to the Resize Mode table in the Image component to learn more about each setting.

Play on Load

Enable so that the video will play when loaded.

Use Native Controls

Enable to give users the ability to play/pause the video.

Data

Property

Description

URL

Accepts the URL of the video as a value to load into the component.

It supports static text or data & variables by typing {{varName}}.

Web View

A component that renders a website on the screen in a native view.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Web View.

Data

Property

Description

Website URL

Accepts a URL of the page as a value to load in the Web View.

It supports static text or data & variables by typing {{varName}}.

Audio Player

A component that allows you to play audio.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Audio Player.

Data

Property

Description

URL

The URL of the audio file to be played.

It supports static text or data & variables by typing {{varName}}.


Additional Resources


Did this page help you?