How to avoid keyboard pushing layout up on Android react-native

Question

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.

Using the RN KeyboardAvoidingView doesn't solve it. It just pushes the TextInput higher than the keyboard — Alex Pavtoulov, Mar 16 '17 at 17:25
I have android:windowSoftInputMode="adjustResize" in the manifest, and yet it doesn't work.. — Alex Pavtoulov, Mar 16 '17 at 17:29
If you are using expo, this can be easily solved with Expo SDK 38 and above. Check https://stackoverflow.com/a/62601264/8407719 — Kewal Shah, Jun 26 '20 at 19:03

score 103 · Answer 1 · edited Aug 02 '19 at 13:26

103

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

edited Aug 02 '19 at 13:26

Stuart Gough

1,564
3
11
17

answered May 13 '17 at 10:04

Luís Mestre

1,851
1
11
29

1

adjustPan has the wrong effect, I want the window to resize when the keyboard shows, so that the view won't be pushed out of the screen. – Alex Pavtoulov May 13 '17 at 14:33
6

For those who had the same problem as me: After modifying the AndroidManifest.xml you have to re run the "react-native run-android" command. – Gandalf Apr 15 '19 at 08:06
1

I had a little different issue, where all the layout was pushed to outside the screen and the bellow screen was shown. At first this looked like a navigation issue, but was totally a layout issue and your answer helped a lot, Thanks! – Jair May 22 '20 at 15:49
1

in android/app/src/main/AndroidManifest.xml in file for those who confused where I have to put this.Hope it helps u. – Sumj25 Feb 28 '22 at 02:51

score 22 · Answer 2 · answered Aug 10 '19 at 13:44

22

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.

answered Aug 10 '19 at 13:44

Pratap Sharma

2,633
2
18
32

1

Thanks, this solved an issue I was having with the React Navigation 5 stack header being pushed off screen by the KeyboardAvoidingView. – Abe Mar 16 '21 at 06:08
2

The setting must be one of the values listed in the following table, or a combination of one "state..." value plus one "adjust..." value. Setting multiple values in either group — multiple "state..." values, for example — has undefined results – Pritish Vaidya Jun 17 '21 at 17:27

score 15 · Answer 3 · edited Jun 24 '18 at 00:01

15

putting

android:windowSoftInputMode="adjustNothing"

in Manifest worked for me.

edited Jun 24 '18 at 00:01

Stephen Rauch

47,830
31
106
135

answered Jun 23 '18 at 23:35

Arsam

368
4
4

3

Accepted answer did not work for me. This did. Thanks – jschuss Jun 04 '19 at 03:49
3

Just note that this will prevent keyboards from emitting events, [documentation](https://reactnative.dev/docs/keyboard#addlistener) – shoopi Oct 10 '20 at 01:04

GrgaMrga · Answer 4 · 2021-03-10T18:04:53.843

13

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"

edited Mar 10 '21 at 18:04

answered Jan 16 '21 at 12:37

GrgaMrga

460
5
13

After experimenting an hour with `KeyboardAwareScrollView`, and `KeyboardAvoidingView` this finally fixed my issue. Thanks a lot! – zarathustra Nov 13 '22 at 16:43
This also worked for me. I needed to upgrade expo SDK to the latest version (49) with `yarn add expo@^49.0.0`. I had version 47 before and it didn't work until I upgraded it – Vania Oliveira Aug 06 '23 at 19:30

score 3 · Answer 5 · answered Mar 16 '17 at 19:08

3

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..

answered Mar 16 '17 at 19:08

Alex Pavtoulov

830
1
6
9

1

An issue was opened - https://github.com/facebook/react-native/issues/12980 – Alex Pavtoulov May 12 '17 at 11:13

score 3 · Answer 6 · answered Jun 04 '19 at 18:09

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.

score 1 · Answer 7 · answered Nov 25 '20 at 12:59

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.

score 0 · Answer 8 · answered Oct 17 '17 at 00:05

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.

score 0 · Answer 9 · answered Nov 01 '18 at 11:46

0

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.

answered Nov 01 '18 at 11:46

Zuha Karim

249
4
13

why keyboardVerticalOffset 550, does it work with other devices? – famfamfam May 04 '22 at 03:37

score 0 · Answer 10 · answered Dec 09 '20 at 04:27

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}>

score 0 · Answer 11 · answered Dec 09 '21 at 09:41

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
 }}
/>

score 0 · Answer 12 · answered Jun 12 '22 at 07:45

0

If you are using expo put inside app.json in android section:

"android": {
  ...
  "softwareKeyboardLayoutMode": "pan"
},

You need to be on expo version 38.0.0+

answered Jun 12 '22 at 07:45

Vanotis720

1
1
1

score -2 · Answer 13 · answered Feb 07 '20 at 22:37

-2

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.

answered Feb 07 '20 at 22:37

JDune

567
7
10

How to avoid keyboard pushing layout up on Android react-native

13 Answers13

Managed workflow

Bare workflow

Linked