react-native: [KeyboardAvoidingView] Cannot handle several `TextInput`s at the same time? Question
react-native-cli: 0.2.0 react-native: 0.29.2
IOS, on Mac
Use KeyboardAvoidingView according to:
Source:
https://github.com/facebook/react-native/blob/0.29-stable/Libraries/Components/Keyboard/KeyboardAvoidingView.js
Example:
https://github.com/facebook/react-native/blob/0.29-stable/Examples/UIExplorer/KeyboardAvoidingViewExample.js
Problem:
I have a View which contains several TextInputs, so I added KeyboardAvoidingView on the root of the view, like this:
<KeyboardAvoidingView behavior="height" style={styles.container}>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="L"
/>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="O"
/>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="L"
/>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="LOL"
/>
</KeyboardAvoidingView>
I’v tried all three behaviors: position, height and padding, they all act strangely:
position
height
padding
Then I tried to just wrap the last TextInput with KeyboardAvoidingView, like this:
<View style={styles.container}>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="L"
/>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="O"
/>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="L"
/>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<KeyboardAvoidingView behavior="position" style={{alignSelf: 'stretch'}}>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="LOL"
/>
</KeyboardAvoidingView>
</View>
when I choose position for behavior, it’s like this:
Seems like every TextInput can trigger the KeyboardAvoidingView’s behavior.
Another problem:
When KeyboardAvoidingView is wrapped with a position: 'absolute' View, it doesn’t work at all, like this:
<View style={styles.container}>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="L"
/>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="O"
/>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="L"
/>
<View style={{position: 'absolute', top: 470, right: 0, left: 0, bottom: 0}}>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<KeyboardAvoidingView behavior="position" style={{alignSelf: 'stretch'}} >
<TextInput
style={styles.textInput}
placeholder="lol"
defaultValue="LOL"
/>
</KeyboardAvoidingView>
</View>
</View>
Behavior:
Question:
Did I use KeyboardAvoidingView in a wrong way? Or it can not handle multiple TextInputs
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 42
- Comments: 29 (5 by maintainers)
I’m the author of
react-native-keyboard-aware-scroll-view. I would be happy to:KeyboardAvoidingViewwith a similar approach than the one I’ve used.KeyboardAvoidingView.And I still don’t think that linking to a third party solution should close the issue. Keyboard handling should live into the core, IMHO.
https://github.com/APSL/react-native-keyboard-aware-scroll-view is a great one.
This component does not work in any expected way, it surely does some weird stuff;
It would be good to update documentation with multiple inputs/scroll view, if we are not using it right. However I tried (seemingly) all the possible scenarios, also setting contentContainerStyle; just got really tired of it after 3 hrs of no acceptable result…
Maybe you should implement keyboard-aware-scroll approach 😄
This issue should not have been closed with a link to a third party solution. The problem persists, and the problem lies within this repository. Using another repository is ultimately not the answer.
cmon guys I think this is a very important feature in an mobile app! ESSENTIAL!
I got a good result using
android:windowSoftInputMode="adjustResize"for Android and IQKeyboardManager for iOS.I also created a library for ease of use.
Just install, no extra code needed:
And why it’s not documented? Is it because it’s not production ready?
KeyboardAvoidingView is very hard to get working. On Android, you don’t need it at all thanks to the new android:windowSoftInputMode=“adjustResize” setting in the AndroidManifest.xml file. For all of my use cases, this setting works beautifully on Android.
When you have absolute or fixed-size views, KeyboardAvoidingView is simply not working.
Try adjusting the style For example,
<KeyboardAvoidingView behavior="position" style={{alignItems: 'center',}}>This is still a problem. KeyboardAvoidingView is working fine for iOS but not at all for Android. I would like to use
new android:windowSoftInputMode="adjustResize", but I used create-react-native-app, and I would really prefer not to eject if I don’t have to.This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.
Reopen it since it still exists. Thanks, @qualifyapp
KeyboardAvoidingViewdoes NOT handleTextInputs at all (separately or not). The whole purpose of KeyboardAvoidingView is reacting on software keyboard appearance events and adjusting own layout accordingly. It can change ownposition,size, andpadding(the most common use case).KeyboardAvoidingViewdoes NOT changeScrollViewpadding (aka insets).KeyboardAvoidingViewdoes NOT scrollScrollViews to focusedTextInputs.So, usually
KeyboardAvoidingViewshould be used as top-level view container.Who solved this important problem? https://github.com/APSL/react-native-keyboard-aware-scroll-view is working well on iOS as expected but it’s not working on Android. I’ve tried everything what I can do including
KeyboardAvoidingViewand other libraries. But none of them working well on Android. Is there any library which supports Android very well?This is definitely still an issue. If there is a solution it has not been made clear here or in the documentation. I think the most common mobile behavior that developers AND users are looking for is to be able to have a user click on a textInput and have the screen slide up so that the active input box is on top of the keyboard. This is easy to accomplish when theres only one textinput on the screen but often there are multiple textInputs on the screen and all three “behaviors” of KeyboardAvoidingView are not useful at all. Please reopen this or at least share a solution if there is one.
Yea it seems like
KeyboardAvoidingViewisn’t working for me at all, and I think @Swordsman-Inaction pointed out why. The views they are in are absolutely positioned. This is (I believe) impossible to avoid when usingNavigationExperimentalbecause all the scenes are absolutely positioned to do the animations properly.@nicklockwood
KeyboardAvoidindViewcan handle this scenario?Thanks @douglasjunior for sharing your bridge, it’s really helpful. Seems like the best solution I’ve seen so far!