Modal Images

How to include images in your modal UIs

Shared Properties

• height [float, optional]: the height of the image in system "points" (where a standard phone is about 390 points wide). Defaults to 40.0 if not specified.

• imageType: [string, required]: one of "local" or "sf_symbol".

• imageData: [object, required]: properties that vary depending on the type. See "Image Type" below.

• fallback: [object, optional]: a fallback image if the image described in this object can not be rendered on this system. Same format as root image object. Example of situations where we can't render: SF-Symbol objects can't be rendered on iOS 12, your symbol wasn't included in earlier versions of iOS, or local image path is not found. It's common to nest several fallbacks; we'll continue to search until one we find one that works.

If the image (and fallbacks) can not be rendered, the image will not be shown.

Image Type: Local Image

Local images are images that are included in your app bundle.

• path: [string, required]: the path to the image in the asset bundle. Typically this is the name of the image (eg: "logo.png"). The image must be an asset included in your app's bundle, or it won't be found.

Example Local Image Config

{
    "imageType": "local",
    "height": 60.0,
    "imageData": {
        "path": "logo.png"
    },
}

Image Type: SF Symbols

SF Symbols are only avilable on iOS 13+.

• symbolName: [string, required]: the name of the symbol. Example "coloncurrencysign.square.fill". Download the SF Symbols app to explore options. If the symbol you choose isn't available on the earliest version of iOS your app supports, be sure to include a fallback image (another symbol available on earlier iOS, or a local image)

• weight: [string, optional]: the visual weight of the symbol. One of the following (ascending weight): "ultralight", "thin", "light", "regular", "medium", "semibold", "bold", "heavy", "black". Defaults to "regular".

• mode: [string, optional]. Which render mode to use. Options include

  • mono: monochromatic

  • hierarchical: one color shade, but various opacities/strengths of the color to give it a feeling of depth

  • palette: a color palette of 2 colors

• primaryColor: [string, optional]: a string in hex color format (#ff0000), specifying the primary color of the symbol. If omitted, will use your default tint color from the modal's theme, your default theme, or the system theme.

• secondaryColor: [string, optional]: a string in hex color format (#ff0000), which will be used as the second color in palette mode. No effect in other modes.

Example SF Symbol Config

{
    "imageType": "sf_symbol",
    "height": 80.0,
    "imageData": {
        "symbolName": "cloud.moon.bolt",
        "weight": "light",
        "mode": "palette",
        "primaryColor": "#3366ff",
       "secondaryColor": "#ffcc00"
    }
}

More Examples

See the action imageStylesModal , in "config.json", in the sample app for more examples.