ImageProps — Kuito Documentation

Usage

Load an image with request headers.

This type is used by Image

tsx

// Load an image with request headers.
import { Image, type RemoteImageSource } from 'kuito';

const avatar = (token: string): RemoteImageSource => ({
  uri: 'https://api.example.com/me/avatar',
  headers: { Authorization: `Bearer ${token}` },
});

<Image src={avatar('abc123')} width={48} height={48} borderRadius={24} />;

Type declaration

export interface ImageProps extends CommonProps, ImageNativeProps {
  onLoadStart?: (event: KuitoEvent<'loadstart'>) => void;
  onLoad?: (event: ImageLoadEvent) => void;
  onError?: (event: ImageErrorEvent) => void;
  onLoadEnd?: (event: KuitoEvent<'loadend'>) => void;
}

Members 96

Name	Type	Required	Description
`onLoadStart`	`(event: KuitoEvent<"loadstart">) => void`	No	—
`onLoad`	`(event: ImageLoadEvent) => void`	No	—
`onError`	`(event: ImageErrorEvent) => void`	No	—
`onLoadEnd`	`(event: KuitoEvent<"loadend">) => void`	No	—
`id`	`string`	No	—
`ref`	`ElementRef<ElementHandle>`	No	—
`class`	`Prop<ClassNames>`	No	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	No	Styles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (`opacity`).
`onPress`	`(event: PressEvent) => void`	No	—
`onPressCapture`	`(event: PressEvent) => void`	No	—
`key`	`string \| number`	No	—
`hidden`	`Prop<boolean>`	No	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	No	—
`paddingTop`	`Prop<LengthPercentage>`	No	—
`paddingRight`	`Prop<LengthPercentage>`	No	—
`paddingBottom`	`Prop<LengthPercentage>`	No	—
`paddingLeft`	`Prop<LengthPercentage>`	No	—
`width`	`Animatable<SizeValue>`	No	—
`height`	`Animatable<SizeValue>`	No	—
`minWidth`	`Prop<SizeValue>`	No	—
`maxWidth`	`Prop<SizeValue>`	No	—
`minHeight`	`Prop<SizeValue>`	No	—
`maxHeight`	`Prop<SizeValue>`	No	—
`aspectRatio`	`Prop<number>`	No	Width divided by height; sizes the missing side from the other.
`position`	`Prop<"relative" \| "absolute">`	No	—
`top`	`Prop<LengthPercentageAuto>`	No	—
`right`	`Prop<LengthPercentageAuto>`	No	—
`bottom`	`Prop<LengthPercentageAuto>`	No	—
`left`	`Prop<LengthPercentageAuto>`	No	—
`margin`	`Prop<LengthPercentageAuto>`	No	—
`marginTop`	`Prop<LengthPercentageAuto>`	No	—
`marginRight`	`Prop<LengthPercentageAuto>`	No	—
`marginBottom`	`Prop<LengthPercentageAuto>`	No	—
`marginLeft`	`Prop<LengthPercentageAuto>`	No	—
`flexGrow`	`Prop<number>`	No	—
`flexShrink`	`Prop<number>`	No	—
`flexBasis`	`Prop<SizeValue \| "content">`	No	—
`flex`	`Prop<number>`	No	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	No	—
`direction`	`Prop<"ltr" \| "rtl">`	No	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	No	—
`paddingInlineStart`	`Prop<LengthPercentage>`	No	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	No	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	No	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	No	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	No	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	No	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	No	—
`onAction`	`(event: AccessibilityActionEvent) => void`	No	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	No	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	No	What a screen reader says for the view.
`hint`	`Prop<string>`	No	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	No	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	No	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	No	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	No	—
`aria-selected`	`Prop<boolean>`	No	—
`aria-checked`	`Prop<boolean \| "mixed">`	No	—
`aria-busy`	`Prop<boolean>`	No	—
`aria-expanded`	`Prop<boolean>`	No	—
`aria-valuemin`	`Prop<number>`	No	—
`aria-valuemax`	`Prop<number>`	No	—
`aria-valuenow`	`Prop<number>`	No	—
`aria-valuetext`	`Prop<string>`	No	—
`gestures`	`readonly Composable[]`	No	The view's gestures; several race unless composed with together or orElse.
`opacity`	`Animatable<number>`	No	—
`backgroundColor`	`Animatable<string>`	No	—
`translateX`	`Animatable<number>`	No	—
`translateY`	`Animatable<number>`	No	—
`scale`	`Animatable<number>`	No	—
`scaleX`	`Animatable<number>`	No	—
`scaleY`	`Animatable<number>`	No	—
`rotate`	`Animatable<number>`	No	Degrees.
`transition`	`Partial<Record<"opacity" \| "backgroundColor" \| "transform" \| "borderRadius" \| "borderColor" \| "shadow" \| "width" \| "height" \| "all", Animation<unknown> \| AnimationSpec>>`	No	How the animatable props move when they change, enter or leave, by group; a CSS `transition` compiles to it.
`animate`	`Partial<Record<AnimatableProps, string \| number>>`	No	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	No	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	No	Where the view leaves to; it stays on screen until it is there. The renderer gets `true`, and keeps the view until `exited`.
`layout`	`Animation<number>`	No	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`borderRadius`	`Animatable<number>`	No	—
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	No	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	No	—
`borderColor`	`Animatable<string>`	No	—
`shadowColor`	`Animatable<string>`	No	—
`shadowRadius`	`Animatable<number>`	No	—
`shadowOffsetX`	`Animatable<number>`	No	—
`shadowOffsetY`	`Animatable<number>`	No	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	No	—
`color`	`Prop<string>`	No	—
`sharedId`	`Prop<string>`	No	A view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements).
`src`	`Prop<ImageSource>`	No	A URL, or a bundled image as its import gives it.
`objectFit`	`Prop<"none" \| "cover" \| "contain" \| "fill">`	No	CSS's `object-fit`: `cover` fills and crops, `contain` fits, `fill` distorts, `none` keeps its size, centered.
`placeholder`	`Prop<string>`	No	Color shown while the image loads.
`fadeDuration`	`Prop<number>`	No	Cross-fade duration in milliseconds when the image appears; 0 by default.
`tintColor`	`Prop<string>`	No	Recolors the image's opaque pixels, for icons.
`cache`	`Prop<"none" \| "memory-disk" \| "memory" \| "disk">`	No	Which caches may serve and keep the image; `memory-disk` by default.
`thumbhash`	`Prop<string>`	No	A ThumbHash of the image, in base64: its blurred preview shows, over `placeholder`, until the image loads.

onLoadStart — method signatures

Signatures

(event: KuitoEvent<"loadstart">): void

Parameters

Name	Type	Required	Description
`event`	`KuitoEvent<"loadstart">`	Yes	—

Returns

void

onLoad — method signatures

Signatures

(event: ImageLoadEvent): void

Parameters

Name	Type	Required	Description
`event`	`ImageLoadEvent`	Yes	—

Returns

void

onError — method signatures

Signatures

(event: ImageErrorEvent): void

Parameters

Name	Type	Required	Description
`event`	`ImageErrorEvent`	Yes	—

Returns

void

onLoadEnd — method signatures

Signatures

(event: KuitoEvent<"loadend">): void

Parameters

Name	Type	Required	Description
`event`	`KuitoEvent<"loadend">`	Yes	—

Returns

void

onPress — method signatures

Signatures

(event: PressEvent): void

Parameters

Name	Type	Required	Description
`event`	`PressEvent`	Yes	—

Returns

void

onPressCapture — method signatures

Signatures

(event: PressEvent): void

Parameters

Name	Type	Required	Description
`event`	`PressEvent`	Yes	—

Returns

void

onAction — method signatures

Signatures

(event: AccessibilityActionEvent): void

Parameters

Name	Type	Required	Description
`event`	`AccessibilityActionEvent`	Yes	—

Returns

void

backgroundGradient — nested fields

backgroundGradient fields

Name	Type	Required	Description
`angle`	`number`	Yes	—
`colors`	`string[]`	Yes	—

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.