> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Keyboard

> Keep inputs visible above the on-screen keyboard in the native shell.

The mobile shell does **not** resize your page when the keyboard opens; the keyboard is drawn over it. Moving your UI out of the way is up to you, and the shell tells you the keyboard's height every time it opens or closes.

## KeyboardAvoidingView

The web counterpart of React Native's component.

```tsx theme={null}
import { KeyboardAvoidingView } from '@cskn/sdk';

// 'padding' (default): grows bottom padding, so scrollable content can scroll above the keyboard
<KeyboardAvoidingView style={{ height: '100%', overflowY: 'auto' }}>
  <Form />
</KeyboardAvoidingView>

// 'position': moves the element up, for bars pinned to the bottom
<KeyboardAvoidingView
  behavior="position"
  offset={8}
  style={{ position: 'fixed', left: 0, right: 0, bottom: 0 }}
>
  <ChatInput />
</KeyboardAvoidingView>
```

<ParamField path="behavior" type="'padding' | 'position'" default="'padding'">How to make room.</ParamField>
<ParamField path="offset" type="number" default="0">Extra gap above the keyboard, in px.</ParamField>

The transition follows the keyboard's own animation duration. In a browser it renders a plain `div`.

## useKeyboard

```tsx theme={null}
import { useKeyboard } from '@cskn/sdk';

const { visible, height, duration } = useKeyboard();
```

`height` is in CSS pixels, and `duration` is the keyboard animation in milliseconds (250 when the shell does not send one). Without React: `getKeyboardState()` and `onKeyboardChange(cb)`.

@cskn/ui's `Screen` also takes `keyboardAvoiding`, which pads the bottom of the screen by the keyboard height.

## Don't avoid the keyboard twice

<Warning>
  Use the bridge's keyboard height as your **only** source. `100vh` never changes for the keyboard, and `window.visualViewport` behaves differently per platform: on iOS it shrinks by the keyboard height on its own; on Android it never changes. A layout sized to `visualViewport.height` that also pads by `height` makes room twice on iOS, leaving the input floating a keyboard's height too high.
</Warning>

In a plain browser there is no bridge and no keyboard event, so `visualViewport` is the only signal. If you support both, stop following `visualViewport` while `visible` is `true`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.