Keyboard aware scroll view Android issue
Solution 1
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"
}
Solution 2
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>
Solution 3
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.
Solution 4
<KeyboardAwareScrollView
enableOnAndroid={true}
extraScrollHeight={90}
>
<Content>
<View></View>
</Content>
<KeyboardAwareScrollView/>
Comments
-
arled almost 2 years
I've created a react native project using Expo XDE (xde-2.19.3) with a few
TextInputs
on the screen. Im usingKeyboardAwareScrollView
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 configureAndroidManifest.xml
but it seems that Expo has already sorted this out: https://github.com/expo/expo/blob/master/template-files/android/AndroidManifest.xmlHowever 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> ); }