How to avoid keyboard pushing layout up on Android react-native
AndroidReact NativeKeyboardAndroid Problem Overview
I'm facing this issue for a few months and I still can't solve it. I have a text input at the bottom of the view that is supposed to rise up with the soft keyboard once tapped. Instead, the whole layout is pushed up and you can't see the upper part of it.
I tried many different keyboard spacer libraries but they all just push the TextInput even higher..
Screenshots: Without keyboard With keyboard
Here is my main View:
<View
style={{
flex: 1,
alignItems: 'stretch',
justifyContent: 'space-between',
overflow: 'hidden',
backgroundColor: Colors.darkBlue
}}
>
{/* Header */}
<View
style={{
flexDirection: 'row',
alignItems: 'stretch',
height: 300
}}>
{/* Question bubble */}
{ (this.state.question && this.state.question !== '') ? (
<TouchableOpacity
style={{
flex: 1,
flexDirection: 'row',
backgroundColor: 'transparent',
alignItems: 'stretch',
paddingRight: QUESTION_SPEAKER_RADIUS
}}
>
<View
style={{
flex: 1,
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}}
>
<Text>
{this.state.question}
</Text>
</View>
</TouchableOpacity>
) : null
}
</View>
<KeyboardInput
style={{}}
onClose={() => this.setState({ displayMode: DISPLAY_MODES.homeEmpty })}
onConfirm={(text) => this.onConfirmText(text) }
/>
</View>
Here is KeyboardInput:
<View
style={{
alignSelf: 'stretch',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
backgroundColor: Colors.pink,
borderColor: Colors.lime,
borderTopWidth: 4,
padding: 6,
}}>
<View
style={{
flex: 1,
borderRadius: 6,
padding: 0,
backgroundColor: Colors.white,
alignItems: 'stretch',
}}
>
<TextInput
placeholder={Strings.child_keyboard_placeholder}
value={this.state.messageTextInput}
onChangeText={(text) => this.setState({messageTextInput: text})}
style={{
height: 50,
marginLeft: 10,
marginRight: CONFIRM_BUTTON_SIZE / 2
}}
underlineColorAndroid='transparent'
numberOfLines={2}
maxLength={70}
autoCorrect={false}
returnKeyType='next'
/>
</View>
</View>
Using RN 0.35 on Android.
Android Solutions
Solution 1 - Android
The problem here is that you have in your AndroidManifest.xml:
windowSoftInputMode="adjustResize";
Change it to:
windowSoftInputMode="adjustPan"
Note: after this change you'll need run ./gradlew clean
in android folder and react-native run-android
in your project directory
Solution 2 - Android
I tried all the solutions I could find in GitHub or stack overflow. Adding the following line of code in AndroidManifest.xml will be helpful.
I've tried this
windowSoftInputMode="adjustPan"
Sometimes it works but it misbehaves.
And then I came accross this
windowSoftInputMode="adjustResize"
This also misbehaves I finally combined both of them something like this and it works fine out of the box.
android:windowSoftInputMode="adjustPan|adjustResize"
And then you can use react-native KeyboardAvoidingView component.
<KeyboardAvoidingView
style={{ flex: 1}}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={Platform.OS === 'ios' ? 40 : 0}
>
Hope this helps you.
Solution 3 - Android
putting
android:windowSoftInputMode="adjustNothing"
in Manifest worked for me.
Solution 4 - Android
All the answers are good, but didn't work when using expo.
Managed workflow
If using expo you can use softwareKeyboardLayoutMode
like this inside app.json
:
"android": {
...
"softwareKeyboardLayoutMode": "pan"
},
You need to be on expo version 38.0.0+
Bare workflow
Otherwise, modifying AndroidManifest.xml
works:
windowSoftInputMode="adjustPan"
Solution 5 - Android
Well, thanks to the React Native FB group I got a solution: The status bar has to be not 'hidden' in order for this to work. Really weird bug..
Solution 6 - Android
Setting
> android:windowSoftInputMode="adjustPan"
on the MainActivity in AndroidManifest.xml worked for me !
However android:windowSoftInputMode="adjustNothing"
is not suggested as it completely takes your freedom of making any design responsive to keyboard.
Solution 7 - Android
In your main 'AndroidManifest.xml' file change the android:windowSoftInputMode="adjustResize"
to android:windowSoftInputMode="adjustPan"
or android:windowSoftInputMode="adjustNothing"
.
'android:windowSoftInputMode="adjustNothing"' covers the part of the screen where the keyboard appears and hides the content that was there previously. Scrolling may not be possible while the keyboard is active.
android:windowSoftInputMode="adjustPan"
pushes the selected input field above the keyboard and allows you to scroll without pushing the entire component out of place like android:windowSoftInputMode="adjustResize"
does.
Solution 8 - Android
Here are a couple deadly tutorials for anyone venturing into this area:
I will look very closely at the HOC solution myself shortly for this project, but for now, I just need this problem gone, which windowSoftInputMode="adjustPan"
did for me.
With that, the keyboard just comes up over top of the view. With the default resize option, every component was using flex: 1
and justify/align center
so the view got all kinds of mangled. Considering my view only has one input and is part of an 8 view, 8 step process, this is way too much work for me given the keyboard doesn't even go over top of the input with adjustPan
.
But, in my opinion, the optimal solution is to use <KeyboardAvoidingView />
in conjunction with add and remove event listeners and swapping component styles
with some state toggles. It's the only way to get full control over the UI on both Android and iOS through both keyboard states.
Solution 9 - Android
The only solution that worked for me is:
Define keyboardVerticalOffset and put everything in a ScrollView put keyboardVerticalOffset={-500}
<KeyboardAvoidingView style = {styles.container}
behavior="position" keyboardVerticalOffset={-550}>
ScrollView
TextInput
I tried many solutions from changing android windowsoft in XML to height of container and what not then I found this solution on Github.
Solution 10 - Android
I know this is late but this but the above answers didn't work for me.
I tried KeyboardAvoidingView
outside ScrollView
with behavior={'padding'}
as I guess behavior={'position'}
has been messing with view. following is my code
<KeyboardAvoidingView behavior="padding">
<ApplicationDetailsTabs
initialIndex={this.state.activeTab}
onChange={this.onTabChange}
/>
<ScrollView style={styles.container}>
Solution 11 - Android
I am also facing that problem of "how to hide TAB.Navigation while keyboard is open ,now after searching i have found that ... so do tabBarHideOnKeyboard: true in your Tab.navigator , i am sure that it will help you e.g:
<Tab.Navigator
screenOptions={{
tabBarHideOnKeyboard: true
....//other options
}}
/>
Solution 12 - Android
I had a particular situation where the only way I could prevent this from happening was by giving the problematic TextInput a minHeight in its style.