@rnhooks/keyboard
v1.1.0
Published
React Native Hook for Keyboard
Downloads
5,452
Readme
@rnhooks/keyboard
React Native hook for keyboard
Installation
yarn add @rnhooks/keyboard
Note
v1.0.0
and above is only supported onreact-native >= 0.65
, for olderreact-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 |