Skip to main content
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.
​
'padding' | 'position'
default:"'padding'"
How to make room.
​
number
default:"0"
Extra gap above the keyboard, in px.
The transition follows the keyboard’s own animation duration. In a browser it renders a plain div.

​
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

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.
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.