KeyboardAwareScrollView has extra bottom padding?

Question

I've had this problem for a while with KeyboardAwareScrollView, where it has some extra padding at the bottom (yellow). Here I want my form to be always at the bottom of the screen, this it seems this padding does not permit this.

export const LoginView: React.FC = () => {
  return (
    <View style={styles.container}>
      <KeyboardAwareScrollView
        style={styles.scrollContainer}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
      >
        <View
          style={{
            justifyContent: "space-between",
            backgroundColor: "green",
          }}
        >
          <View style={styles.imageContainer}>
            <Image></Image>
          </View>
          <View style={styles.formConstainer}>
            <Formik></Formik>
          </View>
        </View>
      </KeyboardAwareScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContainer: {
    backgroundColor: "yellow",
  },
  imageContainer: {
    alignItems: "center",
    justifyContent: "center",
  },
  formConstainer: {},
});

Here's how it looks like right now.

Answer 1

Just change KeyboardAwareScrollView style to contentContainerStyle ( These styles will be applied to the scroll view content container which wraps all of the child views. ) and add flex to view inside it.

       export const LoginView: React.FC = () => {
          return (
            <View style={styles.container}>
              <KeyboardAwareScrollView
                contentContainerStyle={styles.scrollContainer} //style changed to contentContainerStyle
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
              >
                <View
                  style={{
                    justifyContent: "space-between",
                    backgroundColor: "green",
                    flex:1 //flex added
                  }}
                >
                  <View style={styles.imageContainer}>
                    <Image></Image>
                  </View>
                  <View style={styles.formConstainer}>
                    <Formik></Formik>
                  </View>
                </View>
              </KeyboardAwareScrollView>
            </View>
          );
        };
        
        const styles = StyleSheet.create({
          container: {
            flex: 1,
          },
          scrollContainer: {
            backgroundColor: "yellow",
            flexGrow:1 //added flexGrow
          },
          imageContainer: {
            alignItems: "center",
            justifyContent: "center",
            flex:2 //flex added
          },
          formConstainer: { 
            flex:1 //flex added
          },
        });