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
﻿
﻿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
﻿
﻿ cannot save images larger than 350K. 
﻿ does not recommend storing images in 
﻿ or storing images as base64 in the 
﻿ 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)
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        title: Header image
        source:
          uri: [email protected]-static[0].image
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        title: Header image
        source:
          uri: =@ctx.datasources.story-static[0].image
﻿
Image in 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)
stories:
  type: component.story-group
  options:
    data: [email protected]-static
    groupName: Work productivity
    item: 
      type: component.image
      options:
        title: [email protected]
        subtitle: [email protected]
        onPress: 
          type: action.go-to
          options:
            title: Read more
            linkTo: [email protected]
        source:
          uri: [email protected]
stories:
  type: component.story-group
  options:
    data: =@ctx.datasources.story-static
    groupName: Work productivity
    item: 
      type: component.image
      options:
        title: =@ctx.current.item.title
        subtitle: =@ctx.current.item.description
        onPress: 
          type: action.go-to
          options:
            title: Read more
            linkTo: =@ctx.current.item.url
        source:
          uri: =@ctx.current.item.image
﻿
Image in jig/default
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)
title: Image in jig/default
type: jig.default

children:
  - type: component.image
    options:
      title: Image
      subtitle: in jig/default
      source:
        uri: [email protected]-static[0].image
title: Image in jig/default
type: jig.default

children:
  - type: component.image
    options:
      title: Image
      subtitle: in jig/default
      source:
        uri: =@ctx.datasources.story-static[0].image
﻿
﻿

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.