Await Widget

Appearance

Prop ​

The generated section below is sourced from runtime/types/prop.d.ts.

Generated Type Declarations ​

Props ​

ts
type Props = Record<string, unknown>;

VStackValue ​

  • spacing Default 0.
  • alignment Horizontal alignment for child views.
ts
type VStackValue = {
	spacing?: number;
	alignment?: HorizontalAlignment;
};

HStackValue ​

  • spacing Default 0.
  • alignment Vertical alignment for child views.
ts
type HStackValue = {
	spacing?: number;
	alignment?: VerticalAlignment;
};

FlowValue ​

  • spacing Default 0.
  • rowSpacing Default 0.
  • alignment Vertical alignment for items within each row.
  • rowAlignment Horizontal alignment for each row when its contents do not fill the available width.
ts
type FlowValue = {
	spacing?: number;
	rowSpacing?: number;
	alignment?: VerticalAlignment;
	rowAlignment?: 'leading' | 'center' | 'trailing';
};

ZStackValue ​

  • alignment Horizontal and vertical alignment for child views.
ts
type ZStackValue = {
	alignment?: Alignment;
};

ButtonValue ​

  • intent Intent returned by Await.define(...), used to run a registered widget intent when the button is tapped.
  • fast Only applies in the app; triggers the button as soon as the touch begins.
  • audio Requests permission to play audio.
  • live Runs the intent in the app process so it can start or update a live activity from the background.
  • url Opens a universal link directly, such as https://github.com/await-widget/skills.
  • shortcut Shortcut index for iOS 27, based on the shortcuts selected in widget configuration.
ts
type ButtonValue = {
	intent?: IntentInfo;
	fast?: boolean;
	audio?: boolean;
	live?: boolean;
	url?: string;
	shortcut?: number;
};

ShapeValue ​

  • fill Default black on light theme, white on dark theme.
  • stroke Only centered strokes are supported.
ts
type ShapeValue = {
	fill?: ShapeStyle;
	stroke?: {
		color?: Color;
		lineWidth?: number;
		lineCap?: 'butt' | 'round' | 'square';
		lineJoin?: 'miter' | 'round' | 'bevel';
		miterLimit?: number;
		dash?: number[];
		dashPhase?: number;
	};
	shape?: {
		trim?: [number, number];
		rotation?: RotationEffect;
		offset?: Point;
		scale?: ScaleEffect;
		in?: {
			x: number;
			y: number;
			width: number;
			height: number;
		};
	};
};

RoundedRectangleValue ​

  • style Default continuous.
ts
type RoundedRectangleValue = {
	rectRadius?: Dimension;
	style?: CornerRadiusStyle;
};

UnevenRoundedRectangleValue ​

ts
type UnevenRoundedRectangleValue = {
	rectRadius?: {
		topLeft?: Dimension;
		topRight?: Dimension;
		bottomRight?: Dimension;
		bottomLeft?: Dimension;
		bottom?: Dimension;
		top?: Dimension;
		left?: Dimension;
		right?: Dimension;
	};
	style?: CornerRadiusStyle;
};

CapsuleValue ​

ts
type CapsuleValue = {
	style?: CornerRadiusStyle;
};

SectorValue ​

ts
type SectorValue = {
	value: [start: number, end: number];
};

PolygonValue ​

ts
type PolygonValue = {
	value: Array<[x: number, y: number]>;
};

LinkValue ​

ts
type LinkValue = {
	url?: string;
};

ColorValue ​

ts
type ColorValue = {
	value?: Color;
};

TextValue ​

  • value Text or encodable value rendered by the component.
ts
type TextValue = {
	value?: Encodable;
};

GaugeValue ​

  • value Number value in range 0~1.
ts
type GaugeValue = {
	value?: number;
};

ImageValue ​

  • url Local or remote path such as img.png path/img.png https://example.com/img.png
  • resizable The modes used to resize an image to fit within its containing view.
  • interpolation The level of quality for rendering an image that requires interpolation, such as a scaled image.
  • style The mode that indicates how images are rendered
  • accented The mode that indicates how images are rendered on widget accented mode
  • maxPixel The maximum number of pixels along the image's longest edge. Defaults to 1000.
  • proposedSize Maximum width and height for the image's natural layout size. Scales down proportionally.
ts
type ImageValue = {
	url?: string;
	resizable?: Resizable;
	interpolation?: Interpolation;
	style?: TemplateRenderingMode;
	accented?: Accented;
	maxPixel?: number;
	proposedSize?: {width?: number; height?: number};
};

IconValue ​

  • value The name of the system symbol image. Use the SF Symbols app to look up the names of system symbol images.
  • resizable The modes used to resize the symbol to fit within its containing view.
ts
type IconValue = {
	value?: string;
	resizable?: Resizable;
};

TimeStopwatchFormat ​

Unbounded stopwatch counts up from date

  • showsHours Whether to include an hours component. Default true.
  • maxFieldCount Maximum number of time fields to display. Default 4.
  • maxPrecision Smallest displayed unit in seconds, e.g. 0.01. Default 0.01.
ts
type TimeStopwatchFormat = {
	type: 'stopwatch';
	showsHours?: boolean;
	maxFieldCount?: number;
	maxPrecision?: number;
};

TimeTimerFormat ​

Bounded timer stops at date

  • countsDown Counts down to date when true, counts up to it when false. Default true.
  • showsHours Whether to include an hours component. Default true.
  • maxFieldCount Clamped to 2...4. Default 3.
  • maxPrecision Smallest displayed unit in seconds: 0.01 (hundredths), 0.1 (tenths), or 1 (seconds). Default 1.
ts
type TimeTimerFormat = {
	type: 'timer';
	countsDown?: boolean;
	showsHours?: boolean;
	maxFieldCount?: number;
	maxPrecision?: 0.01 | 0.1 | 1;
};

TimeValue ​

  • timeZone IANA time-zone identifier. Omit to use the system time zone.
ts
type TimeValue =
	| {
			timeZone?: string;
			format?: DateFormatToken[];
			date?: never;
			style?: never;
			countsDown?: never;
			showsHours?: never;
			maxFieldCount?: never;
			maxPrecision?: never;
	  }
	| {
			date?: Date;
			format: TimeStopwatchFormat;
			timeZone?: never;
			style?: never;
			countsDown?: never;
			showsHours?: never;
			maxFieldCount?: never;
			maxPrecision?: never;
	  }
	| {
			date: Date;
			format: TimeTimerFormat;
			timeZone?: never;
			style?: never;
			countsDown?: never;
			showsHours?: never;
			maxFieldCount?: never;
			maxPrecision?: never;
	  }
	| {
			date?: Date;
			style?: TimeStyle;
			timeZone?: never;
			format?: never;
			countsDown?: never;
			showsHours?: never;
			maxFieldCount?: never;
			maxPrecision?: never;
	  };

ProgressViewValue ​

  • countsDown Default true. Only applies when value is a date range.
ts
type ProgressViewValue = {
	value: number | [start: Date, end: Date];
	countsDown?: boolean;
};

SvgValue ​

  • url For example, img.png, path/img.png, or https://example.com/img.png.
  • value For example, <svg><path d="M0 0h10v10h-10z"/></svg>.
ts
type SvgValue = {
	url?: string;
	value?: string;
};

SpacerValue ​

ts
type SpacerValue = {
	minLength?: number;
};

GifValue ​

ts
type GifValue = {
	size: Size;
	duration: GifDuration;
};

TickerValue ​

ts
type TickerValue = {
	size: Size;
	style: TickerStyle;
};

FlashTickerValue ​

ts
type FlashTickerValue = {
	size: Size;
};

AxisFlipValue ​

ts
type AxisFlipValue = {
	index: number;
	curr: NativeView;
	prev: NativeView;
	perspective?: number;
};

FlipValue ​

ts
type FlipValue = AxisFlipValue & {
	delta: number;
	shadowOpacity?: number;
	leadingHidden?: boolean;
	trailingHidden?: boolean;
};

Mods ​

ts
type Mods = {
	[K in keyof BaseMods]?: BaseMods[K];
} & {
	[K in keyof BaseMods as `${K & string}_${string}`]?: BaseMods[K];
};

BaseMods ​

  • clockEffect This modifier is currently available, but future availability is uncertain.
  • minimumScaleFactor There is a known issue where minimumScaleFactor may stop working when lineHeight is used.
ts
type BaseMods = {
	animation?: NativeAnimation | number | '';
	aspectRatio?: AspectRatio;
	background?:
		| ShapeStyle
		| NativeView
		| {alignment: Alignment; content: NativeView};
	baselineOffset?: number;
	blendMode?: BlendMode;
	blur?: Blur;
	brightness?: number;
	buttonStyle?: ButtonStyle | '';
	clipped?: boolean;
	clipShape?: NativeView | '';
	clockEffect?: number | 'second' | 'minute' | 'hour';
	colorInvert?: boolean;
	colorMultiply?: Color;
	compositingGroup?: boolean;
	contentShape?: NativeView | '';
	contentTransition?: ContentTransition;
	contrast?: number;
	cornerRadius?: number;
	debug?: boolean;
	disable?: boolean;
	drawingGroup?: boolean;
	fixedSize?: FixedSize;
	font?: Font | '';
	fontDesign?: FontDesign | '';
	fontSize?: number;
	fontWeight?: FontWeight | '';
	fontWidth?: FontWidth | '';
	foreground?: ShapeStyle;
	frame?: Frame;
	gaugeStyle?: GaugeStyle;
	geometryGroup?: boolean;
	grayscale?: number;
	height?: number;
	hidden?: boolean;
	hueRotation?: number;
	ignoresSafeArea?: boolean;
	italic?: boolean;
	kerning?: number;
	layoutPriority?: number;
	lineHeight?: LineHeight | '';
	lineLimit?: number | '';
	lineSpacing?: number;
	luminanceToAlpha?: boolean;
	mask?: NativeView;
	maxHeight?: Dimension | boolean;
	maxSides?: Dimension | boolean;
	maxWidth?: Dimension | boolean;
	minimumScaleFactor?: number;
	monospaced?: boolean;
	monospacedDigit?: boolean;
	offset?: Point;
	offsetX?: number;
	offsetY?: number;
	opacity?: number;
	overlay?:
		| ShapeStyle
		| NativeView
		| {alignment: Alignment; content: NativeView};
	padding?: Padding | boolean;
	pixelPerfectCenter?: boolean | Point;
	position?: Point;
	progressViewStyle?: ProgressViewStyle;
	reverseMask?: NativeView;
	rotation3DEffect?: Rotation3DEffect;
	rotationEffect?: RotationEffect;
	safeAreaInset?:
		| {edge: HorizontalEdge; alignment?: VerticalAlignment; content: NativeView}
		| {
				edge: VerticalEdge;
				alignment?: HorizontalAlignment;
				content: NativeView;
		  };
	saturation?: number;
	scaleEffect?: ScaleEffect;
	shadow?: Shadow;
	sides?: number;
	strikethrough?:
		| boolean
		| {isActive?: boolean; pattern?: Pattern; color?: Color};
	test?: unknown;
	textAlignment?: TextAlignment;
	tint?: ShapeStyle;
	tracking?: number;
	transform?: [number, number, number, number, number, number];
	transition?: Transition;
	truncationMode?: 'head' | 'middle' | 'tail';
	typesettingLanguage?: string;
	underline?: boolean | {isActive?: boolean; pattern?: Pattern; color?: Color};
	width?: number;
	zIndex?: number;
};