https://github.com/lizouzt/react-native-keyboard-avoid
react-native KeyboardAvoid handler
https://github.com/lizouzt/react-native-keyboard-avoid
keyboard keyboard-hooks react-native
Last synced: about 2 months ago
JSON representation
react-native KeyboardAvoid handler
- Host: GitHub
- URL: https://github.com/lizouzt/react-native-keyboard-avoid
- Owner: lizouzt
- License: mit
- Created: 2017-12-15T06:42:12.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-20T06:10:18.000Z (about 7 years ago)
- Last Synced: 2025-03-18T13:18:39.749Z (2 months ago)
- Topics: keyboard, keyboard-hooks, react-native
- Language: JavaScript
- Size: 2.69 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-keyboard-avoid
Component that handles keyboard appearance and automatically make any component node to keep out keyboard.
Work with `TextInput`,`View` and so on.
## Supported versions
- `v1.0.0` requires `RN>=0.20`
## Installation
Installation can be done through ``npm`` or `yarn`:
```shell
npm i react-native-keyboard-avoid --save
```
```shell
yarn add react-native-keyboard-avoid
```
## Usage
You just need use this `KeyboardAvoid` on whatever you want to keep out from native keyboard view.
It accept `ScrollView`, `ListView`, `FlatList` and any other `View` component. There will show you 3 example.
#### 1.With something in `ScrollView` or `ListView`, `FlatList`
```js
import KeyboardAvoid from 'react-native-keyboard-avoid';
_onFocus () {
KeyboardAvoid.checkNeedScroll({
nodeRef: this.titleInput, //TextInput ref
scrollNodeRef: this.scrollView, //ScrollView ref
contentOffset: this.contentOffset //ScrollView scrollOffset.y
}, 'scroll', 0);
}
```
```jsx
this.scrollView = ref}
style={{flex: 1}}
scrollEventThrottle={3}
onScroll={(event) => {this.contentOffset = event.nativeEvent.contentOffset.y}}>
this.titleInput = ref}
returnKeyType={"search"}
onFocus={() => this._onFocus()}/>
Search
or
this.scrollView = ref}
onScroll={(event) => {this.contentOffset = event.nativeEvent.contentOffset.y;}}/>
```
#### 2.With component which use position: 'absolute'
```js
import KeyboardAvoid from 'react-native-keyboard-avoid';
_onPress () {
this.aTextInput.focus();
KeyboardAvoid.checkNeedScroll({
nodeRef: this.footer
}, 'position', 0);
}
```
```jsx
this.footer = ref}
style={{
width: config.width,
position: 'absolute',
bottom: 0,
height: 50,
backgroundColor: 'lightblue',
zIndex: 4
}}>
this._onPress()}>
浮低
```
#### 3.With two components one use position and one use scroll
```js
import KeyboardAvoid from 'react-native-keyboard-avoid';
_onPressAndFocus () {
KeyboardAvoid.checkNeedScroll({
nodeRef: this.titleInput,
scrollNodeRef: this.scrollView,
contentOffset: this.contentOffset
}, 'scroll', 50);
KeyboardAvoid.checkNeedScroll({
nodeRef: this.footer
}, 'position');
}
```
### Methods
| **Method** | **Parameter** | **Description** |
|------------|---------------|-----------------|
| `checkNeedScroll` | `(params, type='scroll', offset=0)` | Get `ScrollResponder` |
| `unMount` | none | unMount this handler while app view unMount |
## API
`KeyboardAvoid.checkNeedScroll(params, type='scroll', offset=0)`
### Prame
#### params {object}
| **Prop** | **Type** | **Description** |
|----------|----------|-----------------|
| `nodeRef ` | Node Ref | ref of the component which need to avoid from keyboard |
| `scrollNodeRef ` | Node Ref | ref of scroll component |
| `contentOffset ` | Node Ref | scrolloffset.y of scroll component |
#### type {string}
| **value** | **Description** |
|----------|----------|
| `scroll` | Such as example 1. keyboard avoid in `ScrollView` or `ListView`, `FlatList` |
| `position ` | Such as example 2. keyboard avoid with position |
#### offset {number}
target offset from the top of keyboard
`onScroll={(event) => {this.contentOffset = event.nativeEvent.contentOffset.y}}`
## License MIT