react-native-keyboard-aware-scroll-view on Android only scrolls when I add empty space to the bottom of my form

Question

I am using react-native-keyboard-aware-scroll-view on my login form. This is what my code looks like:

        <SafeAreaView style={{ flex: 1 }}>
            <View style={styles.root}>

            <KeyboardAwareScrollView
               enableOnAndroid={true}
               showsVerticalScrollIndicator={false}
                    extraHeight={-90}
               keyboardShouldPersistTaps='handled'>
               <View style={styles.logoContainer}>
                  <Image source={images.outfastLogo} resizeMode='contain' style={styles.logo} />
               </View>

               <View style={styles.formContainer}>
                  <SignInForm setShowResetPassword={setShowResetPassword} />
               </View>

            </KeyboardAwareScrollView>

            </View>
         </SafeAreaView>

and my styles:

export default StyleSheet.create({
root: {
    flex: 1,
    width: '100%',
    padding: 30,
},
logoContainer: {
    marginTop: 40,
    width: '100%',
    alignItems: 'center',
},
logo: {
    width: 220,
    height: 120,
},
formContainer: {
    flex: 1,
    width: '100%',
    marginTop: 15,
},
})

Everything works fine on iOS but on Android when I leave my form like this I can't scroll down to the signin button.

However if I leave add a spacer component (empty View with a height) to the scrollview's content at the bottom, I can scroll up high enough)

extraScrollHeight property appears to do nothing. I thought that was the point of this component. I don't like adding a hard-coded spacer element in because every phone will have a different keyboard height.

What's going on here? I always have difficulty getting this component to work properly. It does in some cases and in others it doesn't. There seems to be no good alternatives and a quick internet search will show a slew of people with similar issues but none that are exactly like mine.

Answer 1

OK, I looked at the source code and I saw that if the platform is android and enableOnAndroid is set to true, and if you don't add any styles to contentContainerStyle, this component will add a paddingBottom of 0 to the Scrollview's content. So, I added contentContainerStyle={{paddingBottom: Platform.OS === 'android'? 130: 0}} contentContainerStyle={{paddingBottom: Platform.OS === 'android'? 130: 0}} and enableOnAndroid={true} .

This is still just the equivalent of my spacer component. There must be a better approach. I'm putting this up here to help others but if there is a better solution I would love to hear about it.