WebView — Kuito Documentation

Embed a web page in a native view. Use it for hosted help, web content or a service that only offers a web interface.

Embed a hosted help page

tsx

import { WebView } from 'kuito';

export default function Help() {
  return <WebView flex={1} src="https://example.com/help" />;
}

Behavior

Give the view a bounded size. Use allowedOrigins to restrict the origins that may load. Use webViewRef for navigation and messaging; do not expose privileged app actions to arbitrary page messages.

Continue

Read Linking for a complete workflow. See the complete prop reference for types and documented defaults.

Référence

Signatures

(props: NativeViewProps<WebViewProps, WebViewMethods>): KuitoElement

Paramètres

Nom	Type	Requis	Description
`props`	`NativeViewProps<WebViewProps, WebViewMethods>`	Oui	—

Retourne

KuitoElement

Props: NativeViewProps<WebViewProps, WebViewMethods>

Props (props héritées incluses) 96

Nom	Type	Requis	Description
`opacity`	`Animatable<number>`	Non	—
`backgroundColor`	`Animatable<string>`	Non	—
`borderRadius`	`Animatable<number>`	Non	—
`borderColor`	`Animatable<string>`	Non	—
`width`	`Animatable<SizeValue>`	Non	—
`height`	`Animatable<SizeValue>`	Non	—
`translateX`	`Animatable<number>`	Non	—
`translateY`	`Animatable<number>`	Non	—
`scale`	`Animatable<number>`	Non	—
`scaleX`	`Animatable<number>`	Non	—
`scaleY`	`Animatable<number>`	Non	—
`rotate`	`Animatable<number>`	Non	Degrees.
`shadowColor`	`Animatable<string>`	Non	—
`shadowRadius`	`Animatable<number>`	Non	—
`shadowOffsetX`	`Animatable<number>`	Non	—
`shadowOffsetY`	`Animatable<number>`	Non	—
`hidden`	`Prop<boolean>`	Non	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	Non	—
`position`	`Prop<"relative" \| "absolute">`	Non	—
`id`	`string`	Non	—
`class`	`Prop<ClassNames>`	Non	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	Non	Styles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (`opacity`).
`key`	`string \| number`	Non	—
`paddingTop`	`Prop<LengthPercentage>`	Non	—
`paddingRight`	`Prop<LengthPercentage>`	Non	—
`paddingBottom`	`Prop<LengthPercentage>`	Non	—
`paddingLeft`	`Prop<LengthPercentage>`	Non	—
`minWidth`	`Prop<SizeValue>`	Non	—
`maxWidth`	`Prop<SizeValue>`	Non	—
`minHeight`	`Prop<SizeValue>`	Non	—
`maxHeight`	`Prop<SizeValue>`	Non	—
`aspectRatio`	`Prop<number>`	Non	Width divided by height; sizes the missing side from the other.
`top`	`Prop<LengthPercentageAuto>`	Non	—
`right`	`Prop<LengthPercentageAuto>`	Non	—
`bottom`	`Prop<LengthPercentageAuto>`	Non	—
`left`	`Prop<LengthPercentageAuto>`	Non	—
`margin`	`Prop<LengthPercentageAuto>`	Non	—
`marginTop`	`Prop<LengthPercentageAuto>`	Non	—
`marginRight`	`Prop<LengthPercentageAuto>`	Non	—
`marginBottom`	`Prop<LengthPercentageAuto>`	Non	—
`marginLeft`	`Prop<LengthPercentageAuto>`	Non	—
`flexGrow`	`Prop<number>`	Non	—
`flexShrink`	`Prop<number>`	Non	—
`flexBasis`	`Prop<SizeValue \| "content">`	Non	—
`flex`	`Prop<number>`	Non	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	Non	—
`direction`	`Prop<"ltr" \| "rtl">`	Non	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	Non	—
`paddingInlineStart`	`Prop<LengthPercentage>`	Non	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	Non	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	Non	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	Non	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	Non	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	Non	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	Non	—
`onAction`	`(event: AccessibilityActionEvent) => void`	Non	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	Non	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	Non	What a screen reader says for the view.
`hint`	`Prop<string>`	Non	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	Non	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	Non	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	Non	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	Non	—
`aria-selected`	`Prop<boolean>`	Non	—
`aria-checked`	`Prop<boolean \| "mixed">`	Non	—
`aria-busy`	`Prop<boolean>`	Non	—
`aria-expanded`	`Prop<boolean>`	Non	—
`aria-valuemin`	`Prop<number>`	Non	—
`aria-valuemax`	`Prop<number>`	Non	—
`aria-valuenow`	`Prop<number>`	Non	—
`aria-valuetext`	`Prop<string>`	Non	—
`gestures`	`readonly Composable[]`	Non	The view's gestures; several race unless composed with together or orElse.
`transition`	`Partial<Record<"opacity" \| "backgroundColor" \| "transform" \| "borderRadius" \| "borderColor" \| "shadow" \| "width" \| "height" \| "all", Animation<unknown> \| AnimationSpec>>`	Non	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>>`	Non	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	Non	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	Non	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>`	Non	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	Non	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	Non	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	Non	—
`color`	`Prop<string>`	Non	—
`sharedId`	`Prop<string>`	Non	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).
`ref`	`ElementRef<NativeViewHandle<WebViewMethods>>`	Non	—
`src`	`Bound<WebViewSource>`	Non	The page to load. Set `src` or `html`, not both.
`html`	`Bound<string \| { html: string; baseUrl?: string;}>`	Non	Inline HTML, resolved against `baseUrl` when given.
`allowedOrigins`	`Bound<string[]>`	Non	Origins the WebView navigates to, as wildcard patterns (`https://`). The main frame's navigations elsewhere open through Linking instead. `["http://", "https://*"]` by default.
`injectedJavaScript`	`Bound<string>`	Non	Runs in the main frame each time a document finishes loading.
`javaScriptEnabled`	`Bound<boolean>`	Non	True by default.
`swipeNavigation`	`Bound<boolean>`	Non	iOS only: swipe from an edge to go back or forward. False by default.
`userAgent`	`Bound<string>`	Non	Replaces the platform's user agent.
`onLoadStart`	`(event: WebViewNavigationEvent) => void`	Non	—
`onLoad`	`(event: WebViewNavigationEvent) => void`	Non	The page loaded.
`onLoadEnd`	`(event: WebViewNavigationEvent) => void`	Non	The load ended, loaded or failed.
`onError`	`(event: WebViewErrorEvent) => void`	Non	—
`onNavigate`	`(event: WebViewNavigationEvent) => void`	Non	The URL, title, loading state or history changed.
`onMessage`	`(event: WebViewMessageEvent) => void`	Non	—

onAction — signatures de méthode

Signatures

(event: AccessibilityActionEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`AccessibilityActionEvent`	Oui	—

Retourne

void

backgroundGradient — champs imbriqués

backgroundGradient champs

Nom	Type	Requis	Description
`angle`	`number`	Oui	—
`colors`	`string[]`	Oui	—

onLoadStart — signatures de méthode

Signatures

(event: WebViewNavigationEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`WebViewNavigationEvent`	Oui	—

Retourne

void

onLoad — signatures de méthode

Signatures

(event: WebViewNavigationEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`WebViewNavigationEvent`	Oui	—

Retourne

void

onLoadEnd — signatures de méthode

Signatures

(event: WebViewNavigationEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`WebViewNavigationEvent`	Oui	—

Retourne

void

onError — signatures de méthode

Signatures

(event: WebViewErrorEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`WebViewErrorEvent`	Oui	—

Retourne

void

onNavigate — signatures de méthode

Signatures

(event: WebViewNavigationEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`WebViewNavigationEvent`	Oui	—

Retourne

void

onMessage — signatures de méthode

Signatures

(event: WebViewMessageEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`WebViewMessageEvent`	Oui	—

Retourne

void

Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.

#Embed a hosted help page

#Behavior

#Continue

Référence

Signatures

Paramètres

Retourne

Props (props héritées incluses) 96

Signatures

Paramètres

Retourne

backgroundGradient champs

Signatures

Paramètres

Retourne

Signatures

Paramètres

Retourne

Signatures

Paramètres

Retourne

Signatures

Paramètres

Retourne

Signatures

Paramètres

Retourne

Signatures

Paramètres

Retourne

Embed a hosted help page

Behavior

Continue