https://github.com/vonovak/react-native-keyboard-utils
Simple components for common use cases with keyboard
https://github.com/vonovak/react-native-keyboard-utils
keyboard react-native
Last synced: about 2 months ago
JSON representation
Simple components for common use cases with keyboard
- Host: GitHub
- URL: https://github.com/vonovak/react-native-keyboard-utils
- Owner: vonovak
- Created: 2018-12-03T21:25:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-06T10:05:57.000Z (over 7 years ago)
- Last Synced: 2025-02-26T20:43:10.847Z (over 1 year ago)
- Topics: keyboard, react-native
- Language: JavaScript
- Size: 8.79 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## react-native-keyboard-utils
This is a simple package that offers some useful utility components related to keyboard.
Please note this is an experiment.
### Installation
`yarn add react-native-keyboard-utils`
### Usage
`import { HideWithKeyboard, ShowWithKeyboard, KeyboardListener, withKeyboardState } from 'react-native-keyboard-utils';`
See example at the bottom.
#### `ShowWithKeyboard`
Use this component to render content when keyboard is shown.
#### `HideWithKeyboard`
Use this component to hide content when keyboard is shown.
#### `KeyboardListener`
Use this component to register for keyboard events. The component handles event registration and cleanup for you.
Supported props are the following callbacks which will be called when the corresponding event happens:
- `onWillShow`
- `onWillHide`
- `onDidShow`
- `onDidHide`
- `onWillChangeFrame`
- `onDidChangeFrame`
#### `withKeyboardState`
A HOC that will pass a `isKeyboardShown` prop to the wrapped component. You can use it to react to keyboard state, eg: `const YourComponentThatReactsToKeyboard = withKeyboardState(YourComponent);`. `ShowWithKeyboard` and `HideWithKeyboard` are implemented using this HOC.
It accepts two props of type string: `keyboardShownEvent` and `keyboardHiddenEvent`, which are the names of events that the component will consider as "shown event" and "hidden event". By default, those values are (keep in mind `keyboardWill*` events are not supported on android):
```js
ios: {
keyboardShownEvent: 'keyboardWillShow',
keyboardHiddenEvent: 'keyboardWillHide',
},
android: {
keyboardShownEvent: 'keyboardDidShow',
keyboardHiddenEvent: 'keyboardDidHide',
},
```
The HOC forwards the `ref` to the wrapped component.
### Example
```js
import { HideWithKeyboard, ShowWithKeyboard, KeyboardListener } from 'react-native-keyboard-utils';
export default class App extends React.Component {
state = {
text: 'type here',
};
render() {
return (
this.setState({ text })}
/>
{
// do something
}}
/>
this is *shown* when the keyboard is shown
this is *hidden* when the keyboard is shown
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
```
### License
MIT