1.0.0 • Published 8 years ago
react-native-keyboard-dodging-view v1.0.0
react-native-keyboard-dodging-view
A react-native component for iOS that shifts the view up when the keyboard is presented. There are a few examples of this available including KeyboardAvoidingView but I've run into issues with this, particularly when using multiple fields. This solution aims to tackle this problem.
##Setup
npm install --save react-native-keyboard-dodging-view
##Props
Prop | Type | |
---|---|---|
verticalOffset | number | (Optional) Additional vertical offset |
##Usage
Import:
import KeyboardDodgingView from 'KeyboardDodgingView`
Example:
class Example extends Component {
render() {
return (
<View style={{backgroundColor: '#dedede', flex: 1, paddingTop: 400}}>
<KeyboardDodgingView>
<TextInput returnKeyType="next" onSubmitEditing={() => this.refs.secondField.focus()} style={{height: 50, margin: 10, marginBottom: 0, backgroundColor: 'white'}} />
<TextInput ref="secondField" returnKeyType="go" style={{height: 50, margin: 10, backgroundColor: 'white'}} />
</KeyboardDodgingView>
</View>
);
}
}
##Features
- Dynamically calculates the height required to shift contents up
- Accounts for changes in keyboard size
- Handles multiple textfield selection
##Outstanding issues
- Slight jump when switching text fields via the keyboard return key on iOS 8
- Measurements are off when content is vertically aligned by a container view (with
justifyContent: 'center'
)
1.0.0
8 years ago