@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 |