https://github.com/just4fun/react-native-sticky-keyboard-accessory
:paperclip: A sticky wrapper above keyboard to include whatever you want.
https://github.com/just4fun/react-native-sticky-keyboard-accessory
keyboard keyboard-accessory react react-native
Last synced: 5 months ago
JSON representation
:paperclip: A sticky wrapper above keyboard to include whatever you want.
- Host: GitHub
- URL: https://github.com/just4fun/react-native-sticky-keyboard-accessory
- Owner: just4fun
- License: mit
- Created: 2018-03-12T07:21:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-11-13T19:52:23.000Z (over 3 years ago)
- Last Synced: 2025-11-27T09:49:31.827Z (7 months ago)
- Topics: keyboard, keyboard-accessory, react, react-native
- Language: JavaScript
- Homepage:
- Size: 183 KB
- Stars: 23
- Watchers: 2
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-sticky-keyboard-accessory
[](https://www.npmjs.com/package/react-native-sticky-keyboard-accessory)
[](https://www.npmjs.com/package/react-native-sticky-keyboard-accessory)
[](https://github.com/just4fun/react-native-sticky-keyboard-accessory/issues)
[](http://opensource.org/licenses/MIT)
## Motivation
This library was initially built for my following projects.
- [just4fun/react-native-smart-emoji-picker](https://github.com/just4fun/react-native-smart-emoji-picker)
- [just4fun/stuhome](https://github.com/just4fun/stuhome)
## Preview
## Installation
```bash
npm install --save react-native-sticky-keyboard-accessory
```
or
```bash
yarn add react-native-sticky-keyboard-accessory
```
## Usage
```javascript
import KeyboardAccessory from 'react-native-sticky-keyboard-accessory';
Keyboard.dismiss()} />
```
## How it works
- Update `bottom` to the height of keyboard when keyboard show
- Reset `bottom` to `0` once keyboard hide
```javascript
import { isIphoneX, getBottomSpace } from 'react-native-iphone-x-helper';
componentDidMount() {
this.keyboardShowListener = Keyboard.addListener(keyboardShowEvent, (e) => this.keyboardShow(e));
this.keyboardHideListener = Keyboard.addListener(keyboardHideEvent, (e) => this.keyboardHide(e));
}
keyboardShow(e) {
this.setState({
bottom: isIphoneX() ? (e.endCoordinates.height - getBottomSpace()) : e.endCoordinates.height
});
}
keyboardHide(e) {
this.setState({
bottom: 0
});
}
```
#### iPhone X (iPhone XR, iPhone XS, iPhone XS Max)
For new iPhones, if you just wrap `` into ``, the UI doesn't look good.
```javascript
...
```
In this way, your `` will actually occupy bottom safe area.
You should wrap one more `` for ``.
```javascript
...
```
You can try it out with [example](example-expo) project.
## Props
- `backgroundColor` _(string)_ - Color of keyboard accessory's background, defaults to `#f6f6f6`.
- `verticalOffset` _(number)_ - Adds a vertical offset, default is 0.
## License
[The MIT License](http://opensource.org/licenses/MIT)