Menu
I have a login screen created using react-native.
How can I shift my screen up when the user is typing in the textInput?
Do I listen to the onFocus() event and use css styling to change the style of the view?
506
android:windowSoftInputMode="adjustPan" will make the Main activity view PAN move (i.e. be translated) outside of the screen! Use "adjustResize" if you want your components to resize (e.g. put one <View> with style={{flex:1}} and it will be the one that resizes when the keyboard is visible).
Making the text input to scroll in react native, you have to add numberOflines to it, this is the property which takes the value as int, how much lines you want to display in text input you have to provide the number and after that, the text input will get scroll property automatically.
The first thing you have to do is replace the container View with the KeyboardAvoidingView and then add a behavior prop to it. If you look at the documentation you'll see that it accepts 3 different values — height, padding, position. I've found that padding works in the most predictable manner.
To implement auto grow multiline text input, you can adjust the height of the text input according to the content size in the textInput. you can use onContentSizeChange prop in TextInput and call a function to increase/decrease the height of input.
In 2017 (RN 0.43) there is special component for this: KeyboardAvoidingView
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
