useKeyboardManager
Read the on-screen keyboard's visibility, height and animation timing from
KeyboardManagerProvider, dismiss it, or hand focus to an input by id; for layout that only needs the height, useKeyboardHeight is simpler. useKeyboardMetricsOptional and useKeyboardFocusOptional return one half each, so a consumer re-renders only for what it reads, and like useKeyboardManagerOptional they return null instead of throwing without a provider.useKeyboardManager() returns isKeyboardVisible, keyboardHeight, keyboardEndCoordinates and keyboardAnimationDuration / keyboardAnimationEasing, plus dismissKeyboard() and a focus hand-off: refocus(id) marks a target, and the Input, PinInput or AutoComplete whose keyboardFocusId matches takes focus (Input and PinInput also match on name or testID). The metrics come from React Native's Keyboard events, so they only move on iOS and Android; on web they stay at hidden and 0. PlocksProvider doesn't mount a KeyboardManagerProvider, so add one near your app root yourself; useKeyboardManager throws without it.Loading demo…
import { Badge, Block, Button, Input, Row, Text, useKeyboardManager } from '@plocks/ui';
export function Demo() {
const { isKeyboardVisible, keyboardHeight, dismissKeyboard, refocus } = useKeyboardManager();
return (
<Block fullWidth maw={360}>
<Input label="Message" keyboardFocusId="message" />
<Row gap="sm" align="center">
<Badge c={isKeyboardVisible ? 'success' : 'gray'}>
{isKeyboardVisible ? 'Visible' : 'Hidden'}
</Badge>
<Text ff="monospace">{Math.round(keyboardHeight)}px</Text>
</Row>
<Row gap="sm">
<Button onPress={() => refocus('message')}>Focus</Button>
<Button variant="outline" onPress={dismissKeyboard}>
Dismiss
</Button>
</Row>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources