Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shigebeyond/react-native-sk-keyboard-responder
Component which wrap a View, and respond to keyboard show up: 1 move up 2 reduce height
https://github.com/shigebeyond/react-native-sk-keyboard-responder
Last synced: about 4 hours ago
JSON representation
Component which wrap a View, and respond to keyboard show up: 1 move up 2 reduce height
- Host: GitHub
- URL: https://github.com/shigebeyond/react-native-sk-keyboard-responder
- Owner: shigebeyond
- Created: 2016-03-08T07:37:19.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-03-16T06:24:23.000Z (over 8 years ago)
- Last Synced: 2024-11-12T18:50:03.397Z (8 days ago)
- Language: JavaScript
- Size: 771 KB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-sk-keyboard-responder
##What is it
react-native-sk-keyboard-responder is a component which wrap a View, and respond to keyboard show up, only for ios.
There are two way to respond
1 move up
Move view up, and clear a space for keyboard
It changes view’s position(‘bottom’ property), does not change view’s size
2 reduce height
Reduce view’s height, and clear a space for keyboard
It changes view’s size(‘height’ property), does not change view’s position
So I come up with 2 component, one component one responding way
1 **KeyBoardMoveView**
respond to moving view up
2 **KeyBoardResizeView**
respond to reducing view's height
##How to use it
1. `npm install react-native-sk-keyboard-responder@latest --save`
2. use **KeyBoardMoveView**
Move view up when keyboard show, move view down when keyboard hide
Change view's position, not change any view's size
```javascript
'use strict';
import React, {
AppRegistry,
StyleSheet,
Text,
TextInput,
View
} from 'react-native';
var {KeyBoardMoveView} = require('react-native-sk-keyboard-responder');
var test = React.createClass({
getList: function(){
var list = [];
for (var i = 0; i < 10; i++) {
list.push({'项目 ' + i})
}
return list;
},
render: function(){
return (
{this.getList()}
)
},
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'grey',
},
listBox: {
flex: 1,
justifyContent: 'space-around',
},
item: {
fontSize: 17,
},
inputBox: {
height: 50,
margin: 5,
borderWidth:1,
borderColor:'#E1E1E1',
borderRadius: 5,
backgroundColor:'#FFF',
},
input: {
flex: 1,
fontSize:14,
}
});
AppRegistry.registerComponent('test', () => test);
```
---------------------------------------------------------------------------------------------------------
3. use **KeyBoardResizeView**
Reduce view's height when keyboard show, expand view's height when keyboard hide
Change view's size, not change view's position
```javascript
'use strict';
import React, {
AppRegistry,
StyleSheet,
Text,
TextInput,
View
} from 'react-native';
var {KeyBoardResizeView} = require('react-native-sk-keyboard-responder');
var test = React.createClass({
getList: function(){
var list = [];
for (var i = 0; i < 10; i++) {
list.push({'项目 ' + i})
}
return list;
},
render: function(){
return (
{this.getList()}
)
},
});
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: 'grey',
},
listBox: {
flex: 1,
justifyContent: 'space-around',
},
item: {
fontSize: 17,
},
inputBox: {
height: 50,
margin: 5,
borderWidth:1,
borderColor:'#E1E1E1',
borderRadius: 5,
backgroundColor:'#FFF',
},
input: {
flex: 1,
fontSize:14,
}
});
AppRegistry.registerComponent('test', () => test);
```
##Properties
Any [View property](http://facebook.github.io/react-native/docs/view.html) and the following:
| Prop | Description | Default |
|---|---|---|
|**`initHeight`**|Set view's height before keyboard show up, only for KeyBoardResizeView. For example, when you render the view under NavigatorBar, you may want less height |*None*|