react-native-keyboard-space
What is this?
- On iOS, the software keyboard covers the screen by default.
- This is not desirable if there are
TextInput
near the bottom of the screen - they would be covered by the keyboard and the user cannot see what they are typing. - To get around this problem, place a
<KeyboardSpace />
at the bottom of the screen, after yourTextInput
. The keyboard spacer has size 0 and when the keyboard is shown it will grow to the same size as the keyboard, shifting all views above it and therefore making them visible.
KeyboardAvoidingView
?
How is this different from - The
KeyboardAvoidingView
doesn't work when used together with aScrollView
orListView
.
Running Example
git clone https://github.com/dwicao/react-native-keyboard-space.git
cd example
npm install
react-native run-android
Installation
npm install --save react-native-keyboard-space
Basic Usage
import React Component from 'react';import StyleSheet Text View TextInput ScrollView from 'react-native';import KeyboardSpace from 'react-native-keyboard-space'; { return <View => <ScrollView> ... </ScrollView> <TextInput =/> <KeyboardSpace /> </View> ; } const styles = StyleSheet; ;
Credits
All credits goes to original author, I just make this repo for easy to use by importing from npm.
License
MIT