A react-native package that handles the view position based on input position an...
source link: https://reactnativeexample.com/a-react-native-package-that-handles-the-view-position-based-on-input-position-and-keyboard-so-that-the-text-input-doesnt-get-hidden-behind-the-keyboard/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard
keyboard-aware-view
keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn’t get hidden behind the keyboard.
Installation
npm install keyboard-aware-view
yarn add keyboard-aware-view
demo.mov
Usage
import {KeyboardAwareView} from 'keyboard-aware-view';
<KeyboardAwareView>
<TextInput />
</KeyboardAwareView>
Props
extraKeyboardOffset :- Sets extra offset from keyboard.
This component is implemented in a ScrollView and has its scrollEnabled default to false. Incase a scroll view is needed in a certain component, add the scrollEnabled prop and set it to true.
Android Support
Android supports this feature natively. In order to have the same feature in android,
Navigate projectDirectory -> android -> app -> src -> main -> AndroidManifest.xml,
Change android:windowSoftInputMode to adjustPan
<activity
......
android:windowSoftInputMode="adjustPan">
........
</activity>
Motivation
KeyboardAvoidingView from react native doesn’t give the expected output in most cases and KeyboardAwareScrollView has wobbling issues in few cases.
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
License
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK