@rnhooks/keyboard

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 |