Keyboard aware scroll view Android issue

user_1060888 0
Viewed 18016

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>
    );
  }
expo react-native android
7 Answers

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

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

For expo managed workflow,

  1. 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 >
user_43320490 
 <KeyboardAwareScrollView
        enableOnAndroid={true}
        extraScrollHeight={90}
        >
       <Content>
        <View></View>
       </Content>
<KeyboardAwareScrollView/>
user_61944270

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.

user_20537350
Related