useKeyboard

Reports the on-screen keyboard's height and whether it is showing.

Use this when the value drives rendering. For animating against the keyboard, use Reanimated's useAnimatedKeyboard instead — it runs on the UI thread and tracks the keyboard frame-for-frame, where this fires once per show and hide.

Usage

import { useKeyboard } from 'panelui-native';

function Screen() {
  const { isVisible, height } = useKeyboard();

  return (
    <View className="flex-1">
      <Content />
      {isVisible ? null : <Footer />}
    </View>
  );
}

Examples

const { isVisible } = useKeyboard();

<View className="flex-1">
  <Content />
  {isVisible ? null : (
    <View className="border-t border-border p-4">
      <Button fullWidth>Continue</Button>
    </View>
  )}
</View>;

Reserving space for the keyboard

Rendering with the height is fine; animating with it is not — use useKeyboardAvoidance for that.

const { height } = useKeyboard();

<ScrollView contentContainerStyle={{ paddingBottom: height + 24 }}>
  {/* … */}
</ScrollView>;

Dismissing on a tap

const { isVisible } = useKeyboard();

<Pressable
  onPress={Keyboard.dismiss}
  pointerEvents={isVisible ? 'auto' : 'none'}
  className="absolute inset-0"
/>;

API Reference

Returns

Value	Type	Description
`height`	`number`	Keyboard height in px, or `0` when hidden.
`isVisible`	`boolean`	Whether the keyboard is showing.

On iOS this listens to keyboardWillShow / keyboardWillHide, which fire before the animation; on Android to the Did variants, which are the only ones it emits.