Skip to content

Meta

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

Generated Type Declarations

CornerRadiusStyle

ts
type CornerRadiusStyle = 'circular' | 'continuous';

TimeStyle

ts
type TimeStyle = 'time' | 'date' | 'relative' | 'offset' | 'timer';

ProgressViewStyle

ts
type ProgressViewStyle = 'automatic' | 'linear' | 'circular';

Material

ts
type Material = 'regular' | 'thin' | 'thick' | 'ultraThin' | 'ultraThick';

ShapeStyle

ts
type ShapeStyle =
	| Color
	| Material
	| LinearGradient
	| RadialGradient
	| AngularGradient
	| 'primary'
	| 'secondary'
	| 'tertiary'
	| 'quaternary'
	| 'quinary';

NativeAnimation

ts
type NativeAnimation = (
	| {
			type?:
				| 'linear'
				| 'default'
				| 'easeIn'
				| 'easeInOut'
				| 'easeOut'
				| 'circularEaseIn'
				| 'circularEaseInOut'
				| 'circularEaseOut';
			duration?: number;
	  }
	| {
			type: 'interactiveSpring';
			blendDuration?: number;
			duration?: number;
			bounce?: number;
	  }
	| {
			type: 'bouncy';
			bounce?: number;
			duration?: number;
	  }
	| {
			type: 'smooth';
			duration?: number;
			bounce?: number;
	  }
	| {
			type: 'spring';
			blendDuration?: number;
			duration?: number;
			bounce?: number;
	  }
	| {
			type: 'timingCurve';
			start: UnitPoint;
			end: UnitPoint;
			duration?: number;
	  }
	| {
			type: 'snappy';
			bounce?: number;
			duration?: number;
	  }
) & {
	value?: unknown;
	delay?: number;
	autoreverses?: boolean;
	speed?: number;
	loop?: boolean | number;
};

ContentTransition

ts
type ContentTransition =
	| 'identity'
	| 'interpolate'
	| 'opacity'
	| 'symbolEffect'
	| 'numericText'
	| ['numericText', boolean]
	| ['numericText', number];

Edge

ts
type Edge = 'top' | 'bottom' | 'leading' | 'trailing';

RawTransition

ts
type RawTransition =
	| 'identity'
	| 'blurReplace'
	| 'opacity'
	| 'slide'
	| 'scale'
	| ['scale', number, UnitPoint?]
	| ['push', Edge]
	| ['offset', number, number]
	| ['move', Edge];

Transition

ts
type Transition = RawTransition | [RawTransition, RawTransition];

Padding

ts
type Padding =
	| number
	| {
			left?: number;
			right?: number;
			top?: number;
			bottom?: number;
			vertical?: number;
			horizontal?: number;
			other?: number;
	  };

RadialGradient

ts
type RadialGradient = {
	gradient: 'radial';
	colors?: Color[];
	stops?: Array<[Color, number]>;
	startRadius?: number;
	endRadius?: number;
};

AngularGradient

ts
type AngularGradient = {
	gradient: 'angular';
	colors?: Color[];
	stops?: Array<[Color, number]>;
	angle?: number;
	center?: UnitPoint;
};

LinearGradient

ts
type LinearGradient = {
	gradient: 'linear';
	colors?: Color[];
	stops?: Stop[];
	startPoint?: UnitPoint;
	endPoint?: UnitPoint;
};

UnitPoint

ts
type UnitPoint =
	| 'center'
	| 'zero'
	| 'leading'
	| 'trailing'
	| 'top'
	| 'topLeading'
	| 'topTrailing'
	| 'bottom'
	| 'bottomLeading'
	| 'bottomTrailing'
	| Point;

Stop

ts
type Stop = [Color, number];

RawColor

ts
type RawColor =
	| ''
	| 'background'
	| 'black'
	| 'blue'
	| 'brown'
	| 'cyan'
	| 'gray'
	| 'green'
	| 'indigo'
	| 'magenta'
	| 'mint'
	| 'orange'
	| 'pink'
	| 'primary'
	| 'purple'
	| 'red'
	| 'secondary'
	| 'teal'
	| 'white'
	| 'yellow'
	| string
	| number;

RawThemeColor

ts
type RawThemeColor = RawColor | [RawColor, number];

Color

ts
type Color =
	| RawThemeColor
	| {
			dark?: RawThemeColor;
			light?: RawThemeColor;
	  };

VerticalAlignment

ts
type VerticalAlignment =
	| 'firstTextBaseline'
	| 'lastTextBaseline'
	| 'top'
	| 'bottom'
	| 'center';

HorizontalAlignment

ts
type HorizontalAlignment =
	| 'listRowSeparatorLeading'
	| 'listRowSeparatorTrailing'
	| 'leading'
	| 'trailing'
	| 'center';

Alignment

ts
type Alignment =
	| 'leading'
	| 'trailing'
	| 'top'
	| 'bottom'
	| 'topLeading'
	| 'topTrailing'
	| 'bottomLeading'
	| 'bottomTrailing'
	| 'center'
	| 'trailingFirstTextBaseline'
	| 'leadingLastTextBaseline'
	| 'leadingFirstTextBaseline'
	| 'centerLastTextBaseline'
	| 'centerFirstTextBaseline'
	| 'trailingLastTextBaseline';

Dimension

ts
type Dimension = 'max' | number;

Size

ts
type Size = {
	width: number;
	height: number;
};

TemplateRenderingMode

ts
type TemplateRenderingMode = 'original' | 'template';

AspectRatio

ts
type AspectRatio =
	| 'fill'
	| 'fit'
	| [aspectRatio: number, contentMode: 'fill' | 'fit'];

IntentInfo

ts
type IntentInfo = {
	name: string;
	args: Encodable[];
};

Encodable

ts
type Encodable =
	| string
	| number
	| boolean
	| undefined
	| Encodable[]
	| {
			[key: string]: Encodable;
	  };

ID

ts
type ID = {
	id?: Encodable;
};

TextAlignment

ts
type TextAlignment = 'center' | 'leading' | 'trailing';

FontDesign

ts
type FontDesign = 'monospaced' | 'rounded' | 'serif' | 'default';

FontWeight

ts
type FontWeight =
	| 100
	| 'ultraLight'
	| 200
	| 'thin'
	| 300
	| 'light'
	| 400
	| 'regular'
	| 500
	| 'medium'
	| 600
	| 'semibold'
	| 700
	| 'bold'
	| 800
	| 'heavy'
	| 900
	| 'black';

FontWidth

ts
type FontWidth = 'compressed' | 'condensed' | 'standard' | 'expanded' | number;

Interpolation

ts
type Interpolation = 'none' | 'low' | 'medium' | 'high';

Resizable

ts
type Resizable = boolean | 'stretch' | 'tile';

Point

ts
type Point =
	| number
	| {
			x?: number;
			y?: number;
	  };

ScaleEffect

ts
type ScaleEffect =
	| number
	| {
			scale?: number;
			anchor?: UnitPoint;
	  }
	| {
			x?: number;
			y?: number;
			anchor?: UnitPoint;
	  };

Font

ts
type Font = {
	name: string;
	size: number;
	wght?: number;
	wdth?: number;
	opsz?: number;
	slnt?: number;
	ital?: number;

	GRAD?: number;
	HGHT?: number;
	SOFT?: number;

	monospacedDigit?: boolean;
	features?: string[] | string;
};

Rotation3DEffect

ts
type Rotation3DEffect = {
	angle: number;
	x?: number;
	y?: number;
	z?: number;
	anchor?: UnitPoint;
	anchorZ?: number;
	perspective?: number;
};

RotationEffect

ts
type RotationEffect =
	| number
	| {
			angle: number;
			anchor: UnitPoint;
	  };

Frame

ts
type Frame =
	| {
			maxWidth?: Dimension;
			maxHeight?: Dimension;
			alignment?: Alignment;
	  }
	| {
			width?: number;
			height?: number;
			alignment?: Alignment;
	  };

Shadow

ts
type Shadow = {
	color?: Color;
	x?: number;
	y?: number;
	blur?: number;
};

Pattern

ts
type Pattern = 'dash' | 'dashDot' | 'dashDotDot' | 'dot' | 'solid';

BlendMode

ts
type BlendMode =
	| 'normal'
	| 'multiply'
	| 'screen'
	| 'overlay'
	| 'darken'
	| 'lighten'
	| 'colorDodge'
	| 'colorBurn'
	| 'softLight'
	| 'hardLight'
	| 'difference'
	| 'exclusion'
	| 'hue'
	| 'saturation'
	| 'color'
	| 'luminosity'
	| 'sourceAtop'
	| 'destinationOver'
	| 'destinationOut'
	| 'plusDarker'
	| 'plusLighter';

ButtonStyle

ts
type ButtonStyle =
	| 'automatic'
	| 'bordered'
	| 'borderedProminent'
	| 'borderless'
	| 'plain'
	| CustomButtonStyle;

CustomButtonStyle

ts
type CustomButtonStyle = {
	press: NativeView;
	normal: NativeView;
};

GifDuration

ts
type GifDuration = 2 | 4 | 6 | 10 | 12 | 20 | 30 | 60;

TickerStyle

ts
type TickerStyle = 'minute' | 'second' | 'hour12' | 'hour24';

LineHeight

ts
type LineHeight =
	| number
	| 'loose'
	| 'normal'
	| 'tight'
	| 'variable'
	| [type: 'multiple' | 'leading', value: number];

Blur

ts
type Blur =
	| number
	| {
			blur: number;
			opaque?: boolean;
	  };

FixedSize

ts
type FixedSize =
	| boolean
	| {
			horizontal?: boolean;
			vertical?: boolean;
	  };

strikethrough

ts
type strikethrough =
	| boolean
	| {
			isActive?: boolean;
			color?: Color;
	  };