Skip to content

react-native-hooks/keyboard

Repository files navigation

@rnhooks/keyboard Build Status Maintainability

React Native hook for keyboard

Installation

yarn add @rnhooks/keyboard

Note

v1.0.0 and above is only supported on react-native >= 0.65, for older react-native use the older release.

Usage

import useKeyboard from '@rnhooks/keyboard';

function App() {
  const [visible, dismiss] = useKeyboard();

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>@rnhook/keyboard</Text>
      <Text style={styles.instructions}>{visible ? 'Keyboard Visible' : 'Keyboard Not Visible'}</Text>
      <Button title="Dismiss Keyboard" onPress={dismiss} />
    </View>
  );
}

Configuration

If you like, you can configure the hook to use the will events instead of the did events (by default, it uses the did events). This is useful in cases where you want to trigger an animation before the keyboard begins dismissing:

useKeyboard({
  useWillShow: true,
  useWillHide: true,
})
Name Default Type Description
useWillShow false boolean Use the keyboardWillShow event instead.
useWillHide false boolean Use the keyboardWillHide event instead.

Output

Name Default Type Description
visible false boolean Keyboard Visibility
dismiss Keyboard.dismiss function Dismiss Keyboard