KeyboardAwareScrollView compress the content on Android

RN: v.0.64.0 react-native-keyboard-aware-scroll-view: v0.9.4

Content is compressed by keyboard wrapper on Android. Can someone explain how I can achieve the same behavior as on iOS?

https://user-images.githubusercontent.com/46958937/120645687-60df3c00-c481-11eb-8d1a-972217843c52.mov https://user-images.githubusercontent.com/46958937/120645305-f1694c80-c480-11eb-81b3-fc617950a3cb.mov

Code

<SafeAreaView style={styles.container} edges={['top']}>
        <KeyboardAwareScrollView contentContainerStyle={styles.content} enableOnAndroid enableAutomaticScroll scrollEnabled={true}>
          <View style={styles.header}>
            <Image source={require('src/assets/logo.png')}/>
            <Text style={styles.info}>Welcome, Please enter your email and password to login</Text>
          </View>
          <View style={styles.main}>
            <Formik
              initialValues={initialValues}
              onSubmit={onPressLogin}
            >
              {({ handleChange, handleBlur, handleSubmit, values }) => (
                <View style={styles.form}>
                  <View style={styles.input_wrapper}>
                    <AntIcon style={styles.icon} name="mail" size={16} color="#0C0D34" />
                    <TextInput
                      style={styles.input}
                      placeholder="Email"
                      onChangeText={handleChange('email')}
                      onBlur={handleBlur('email')}
                      value={values.email}
                    />
                  </View>
                  <View style={styles.block}>
                    <View style={styles.input_wrapper}>
                      <FeatherIcon style={styles.icon} name="lock" size={16} color="#0C0D34" />
                      <TextInput 
                        style={styles.input} 
                        placeholder="Password" 
                        onChangeText={handleChange('password')}
                        onBlur={handleBlur('password')}
                        value={values.password}
                      />
                    </View>
                    <Text style={styles.subtitle} onPress={onPressForgot}>Forgot</Text>
                  </View>
                  <TouchableOpacity onPress={handleSubmit}>
                    <LinearGradient 
                      start={{x: 0, y: 0}} end={{x: 1, y: 0}}
                      colors={[COLORS.green_regular, COLORS.green_dark]} 
                      style={styles.button}
                    >
                      <Text style={styles.button_title}>Login</Text>
                    </LinearGradient>
                  </TouchableOpacity>
                </View>
              )}
            </Formik>
          </View>
          <View style={styles.footer}>
            <Text style={styles.footer_title}>
              Don't have an account? <Text style={styles.footer_button} onPress={onPressSignUp}>Sign up</Text>
            </Text>
          </View>
      </KeyboardAwareScrollView>
    </SafeAreaView>

Styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'space-between',
    paddingVertical: getPercentageSizeVertical(3),
    paddingHorizontal: getPercentageSizeHorizontal(20),
  },
  header: {
    flex: 0.25,
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  info: {
    textAlign: 'center',
    color: COLORS.black,
  },
  main: {
    flex: 0.45,
    justifyContent: 'center',
  },
  form: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  icon: {
    marginRight: 15,
  },
  input: {
    flex: 1,
    height: 50,
    color: COLORS.black,
  },
  block: {
    width: '100%',
  },
  input_wrapper: {
    borderBottomColor: '#DADAE4',
    borderBottomWidth: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 5,
  },
  subtitle: {
    alignSelf: 'flex-end',
    color: COLORS.green_dark,
  },
  footer: {
    flex: 0.15,
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  button: {
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    width: 258,
    height: 58,
  },
  button_title: {
    color: COLORS.white,
    textTransform: 'uppercase',
    fontSize: 20,
  },
  footer_title:{
    color: COLORS.black,
  },
  footer_button: {
    color: COLORS.green_dark,
  },
})

APSL / react-native-keyboard-aware-scroll-view

KeyboardAwareScrollView compress the content on Android #491