CapDrive
User guide

Image

Displays an image from a gauge resource, such as a logo, decorative background, or tile texture. source Use the resource name to set the scaling, cropping, or repeating method to the available sizes.

Example

function main() {
  return (
    <Image
      source="badge.png"
      contentMode="fit"
      repeatMode="none"
      width={80}
      height={80}
    />
  );
}

Usage

  • source names an image in the instrument bundle. original preserves its colors; color tints only template rendering. repeatMode tiles the image, not child Views. Use contentMode for normal image scaling.
  • Numeric sizes use points. auto measures content; fill uses the space allocated by the parent. Size the container before tuning children. fill creates no extra space, and long text cannot enlarge a fixed parent.

Properties

sourcestring

Image file name from the instrument’s bundled resources, not an SF Symbol name.

Example""
contentMode?"fit" | "fill" | "stretch"

fit preserves the whole image; fill covers the area and crops; stretch changes its aspect ratio.

Example"fit"
repeatMode?"none" | "repeat" | "repeatX" | "repeatY"

Tile at the image’s natural size: repeat on both axes, repeatX/repeatY on one, none for normal sizing.

Example"none"
renderingMode?"original" | "template"

original keeps image colors; template uses the color property to tint it.

Example"original"
color?Paint

Drawing color, including HDR colors.

ExampleHDR($env.foreground)
contentAnimation?ContentAnimation

Transition when content changes. Choose the type supported by this View; duration/delay use seconds.

Example{type: "fade", duration: 0.25}
Common properties
width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example100
height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example80
padding?number

Content padding in points.

Example0
x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0
y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0
transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}
background?Paint

Background paint; accepts a color or gradient. Use clear for transparency.

Example"clear"
opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1
cornerRadius?number

Corner radius in points.

Example0
clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse
clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"
mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>
zIndex?number

Drawing order among siblings; larger values appear in front.

Example0
blur?number

Blur radius in points; 0 disables blur.

Example4
innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")
shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0
shadowRadius?number

Outer shadow blur radius in points.

Example4
shadowX?number

Outer shadow offset in points: x right, y down.

Example0
shadowY?number

Outer shadow offset in points: x right, y down.

Example2
animations?Animation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <HStack spacing={12}>
      <Image source="badge.png" width={80} height={80} contentMode="fit" />
      <Image
        source="badge.png"
        width={80}
        height={80}
        renderingMode="template"
        color={$env.accent}
      />
    </HStack>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

PropertiesWhen omitted
contentMode"fit"
repeatMode"none"
renderingMode"original"
colorHDR($env.foreground)

Symbol

ZStack

Color / Gradient

Text

Previous

Group

Next step

On this page

ExampleUsagePropertiesPractical exampleAnimationWhen omittedRelated APIs