Keyboard aware scroll view Android issue

Question

I've created a react native project using Expo XDE (xde-2.19.3) with a few TextInputs on the screen. Im using KeyboardAwareScrollView to scroll the inputs from under the keyboard into view and works fine on iOS but does not work on Android. Hope that makes sense.

Looked at the KeyboardAwareScrollView docs and saw that I need to configure AndroidManifest.xml but it seems that Expo has already sorted this out: https://github.com/expo/expo/blob/master/template-files/android/AndroidManifest.xml

However I'm still not able to get this working on Android...

What could I be missing?

render() {
    return (
      <KeyboardAwareScrollView
        enableOnAndroid='true'
        enableAutoAutomaticScrol='true'
        keyboardOpeningTime={0}
      >
      <ScrollView style={styles.container}>
        <View style={styles.subcontainer}>
          <View style={styles.form}>
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
              <TextInput
                ref='NoduleCountInput'
                onFocus={() => this.onFocus()}
                onBlur={() => this.onBlur()}
                keyboardType='phone-pad'
                returnKeyType='done'
                placeholder='Test'
                style={styles.field}
              />
            </View>
         </View>
        </ScrollView>
      </KeyboardAwareScrollView>
    );
  }

score 23 · Accepted Answer · edited Dec 22 '18 at 02:57

23

I tried the above solution for cross platform support but its not correct. The right and complete solution if you want the focus with automatic scrolling to TextInput to work is to set parameters as follows:

<KeyboardAwareScrollView
  enableOnAndroid={true}
  enableAutomaticScroll={(Platform.OS === 'ios')}
>
...
</KeyboardAwareScrollView>

This is because enableAutomaticScroll is enabled by default and it mixes up with the native Android behaviour to give unexpected results. So set this field to false when Platform is Android.

And yes also set the following in app.json without which it will not work.

"androidStatusBar": {
  "backgroundColor": "#000000"
}

edited Dec 22 '18 at 02:57

Brad Adams

2,066
4
29
38

answered Oct 13 '17 at 19:21

Karan Kamdar

346
2
4

1

Yep this is what I ended up doing. so you need to set `androidStatusBar` for some weird reason. – arled Oct 20 '17 at 13:08
yeah that worked but I dont use default status bar so it makes my margins ugly :( – Rokas Devolskis Mar 31 '20 at 18:15
1

I am using react-native-keyboard-aware-scroll-view and recently encountered the same problem on android. I solved it by disabling automatic scroll for android without adding androidStatusBar change. – octobus Apr 27 '21 at 08:23
It is really wired, I also just added "androidStatusBar": { "backgroundColor": "#000000" } it started working properly. Event transperant or other colors won;t worked. – Rohit Parte Jun 18 '23 at 17:57

score 10 · Answer 2 · answered Jun 15 '18 at 08:13

10

I tried the other solutions and they didn't work for me, but finally I manage to make it work by using the following code:

 <KeyboardAwareScrollView enableOnAndroid={true} extraHeight={130} extraScrollHeight={130}>
  ...
</KeyboardAwareScrollView>

answered Jun 15 '18 at 08:13

ignacio.suay

737
6
7

arled · Answer 3 · 2017-08-03T10:35:42.580

7

This is how I fixed it:

In app.json I set:

"androidStatusBar": {
  "backgroundColor": "#000000"
}

This fixed the issue, I don't know how but it did. So will leave this here just incase someone else finds it useful.

edited Aug 03 '17 at 10:35

answered Aug 03 '17 at 10:29

arled

2,577
6
27
49

It is the only thing worked. I tried almost all possible solutions, even though there is no relation between backgroundColor and scroll – Rohit Parte Jun 18 '23 at 17:57
@RohitParte this question is very old I'm sure there's a better way of doing things now :) – arled Jul 05 '23 at 18:39

score 4 · Answer 4 · answered Oct 04 '21 at 11:05

For expo managed workflow,

Go to app.json add this:

   "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "softwareKeyboardLayoutMode": "pan" // add this line. 
    },

As mention in docs with this line:

First, Android natively has this feature, you can easily enable it by setting windowSoftInputMode in AndroidManifest.xml

So to do this, we set it in app.json , as stated here

Then in component:

 <KeyboardAwareScrollView  
     extraScrollHeight={100} // (when scroll)to have extra height between keyboard and text input 
     enableOnAndroid={true}
     extraHeight={80} // make some height so the keyboard wont cover other component
     contentContainerStyle={{flexGrow: 1}} // make the scrollView full screen 
> 
   // other stuff
</KeyboardAwareScrollView >

score 2 · Answer 5 · answered Jul 29 '19 at 18:01

2

 <KeyboardAwareScrollView
        enableOnAndroid={true}
        extraScrollHeight={90}
        >
       <Content>
        <View></View>
       </Content>
<KeyboardAwareScrollView/>

answered Jul 29 '19 at 18:01

Hrishikesh Baidya

513
4
7

7

Can you add some context around your answer, and how it fixes the problem? – atymic Jul 30 '19 at 00:15
in the place of Content you can replace your form or whatever you want just cover those code with main component which is import KeyboardAwareScrollView from 'KeyboardAwareScrollView'; – Hrishikesh Baidya Aug 05 '19 at 04:09

score 1 · Answer 6 · answered May 12 '20 at 12:16

1

for me I was facing this issue on Android (react-native 0.62.2). iOS was working perfectly. I found that adjustResize flag in Android manifest was the culprit. I removed it and it started working

Before

android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize"

After

android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

Warning

I don't know what side effects it will cause in future.

answered May 12 '20 at 12:16

Maulik Dhameliya

1,470
1
17
21

Other ReactNative libraries need this flag – monchisan Aug 10 '20 at 17:41

score 0 · Answer 7 · answered Jul 25 '23 at 13:03

0

Go to AndroidManifest.xml and make sure the attribute.

--> android:windowSoftInputMode="adjustPan"

answered Jul 25 '23 at 13:03

Ameer Hamza

11
1

score -4 · Answer 8 · edited Aug 02 '17 at 19:45

-4

Use

<activity android:windowSoftInputMode="adjustResize"></activity>

in your Manifest

edited Aug 02 '17 at 19:45

Stéphane Bruckert

21,706
14
92
130

answered Aug 02 '17 at 16:25

Milad Moosavi

1,587
10
20

This actually doesn't solve the problem at all. Actually the docs are stating that it's better to use "adjustPan" – RowanX Feb 06 '20 at 20:26

Keyboard aware scroll view Android issue

8 Answers8

Linked