Layout@knitui/components

KeyboardAvoidingView

KeyboardAvoidingView is a cross-platform form primitive. On native it shifts its content out from behind the on-screen keyboard (via behavior / keyboardVerticalOffset); on web there is no keyboard to avoid, so it renders as a plain pass-through Box and the native-only props are accepted but stripped. Use it to wrap forms that should stay visible while a field is focused.

WebiOSAndroidnative split5 own props2 examples

Stories Source Tests Native source Open in Storybook

import { KeyboardAvoidingView } from "@knitui/components";

Playground

Loading playground…

behaviorNative strategy used to avoid the keyboard. Ignored on web.

keyboardVerticalOffsetExtra offset (native only) added above the keyboard.

enabledToggle keyboard avoidance (native only).

false

Playground

<KeyboardAvoidingView
  behavior="padding"
/>

Examples

Login Form

Wrapping a simple login form — the canonical use-case.

Loading example…

Props

Prop	Type	Default	Description
`automaticOffset`	`boolean \| undefined`	—
`behavior`	`"position" \| "height" \| "padding" \| "translate-with-padding" \| undefined` height · padding · position · translate-with-padding	`padding`	Native strategy used to avoid the keyboard. Ignored on web.
`contentContainerStyle`	`unknown`	—
`disabled` system	`boolean \| undefined`	—
`enabled`	`boolean \| undefined`	—	Toggle keyboard avoidance (native only).
`keyboardVerticalOffset`	`number \| undefined`	—	Extra offset (native only) added above the keyboard.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 498 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.