A simple React Native View component that resizes composite children views inside itself when the keyboard appears. You can implement your own ScrollView, ListView, Multiple Views etc... inside the View and set your own view to 'flex: 1'.
npm install react-native-keyboard-aware-view
A simple React Native View component that resizes composite children views inside itself when the keyboard appears. You can implement your own ScrollView, ListView, Multiple Views etc... inside the View and set your own view to 'flex: 1'.
For the screen below demonstration, the ` automatically jumping according to scroll is NOT related to this library. It is related to my own implementation of , which is another story & beyond the scope of this plugin.
The problem this plugin aims to solve is to offer easy approach to adjust the view height when keyboard shows / hides. So that you could see the view at the bottom of the screen always sticking above the keyboard. You want to implement a sticky Whatsapp-like message text input box? Set your Chat scrollview to flex: 1, and set your message box view below the scrollview, and then wrap them both inside . Here you go. You have implemented a sticky message box view in iOS with no effort at all!
Tested: it only affects iOS since Android version of React Native lacks support of this callback, by v0.17:
DeviceEventEmitter.addListener('keyboardWillShow', this.onKeyboardWillShow.bind(this))
DeviceEventEmitter.addListener('keyboardWillHide', this.onKeyboardWillHide.bind(this))
I believe this callback feature will not be landed in the future Android version of React Native. But anyway, Android version has its very own native handling for the keyboards without coding, so this lack is somehow acceptable.
npm:`shell
npm i react-native-keyboard-aware-view --save
`Usage
Import react-native-keyboard-aware-view and wrap your content inside
it:`js
import { KeyboardAwareView } from 'react-native-keyboard-aware-view'
`$3
usage
...
`$3
usage
...
`
$3
~~After adopting this plugin, when your Android app needs to undergo indeterminate layout changes THAT would affect the layout of , the keyboard would be dismissed. If you do not want the keyboard to be dismissed by this behaviour you just have to set this parameter to true:
`usage
...
`$3
However, iOS still keeps this parameter to control the keyboard:
usage
...
`$3
jsx
render() {
return (
style={[{flex: 1, alignSelf: 'stretch'}, this.props.style]}
keyboardShouldPersistTaps={true}
automaticallyAdjustContentInsets={false}
onScroll={this.onScroll.bind(this)}
scrollEventThrottle={200}
onLayout={(e) => {var {x, y, width, height} = e.nativeEvent.layout; console.log(height); }}>
或以Facebook登記
提交
);
}
`
$3
jsx
render() {
return (
A
B
C
D
Submit
);
}
``MIT.