React Native Keyboard Aware Scroll View Squeezing Content

I was recently working on a React Native project and I choose to use KeyBoardAwareScrollView to handle the keyboard scroll of the screen. The Below image shows the design which should be actual but when I use keyboardAvoidingView it starts to add padding to the bottom of the screen while I want the screen to scroll up when the keyboard is visible, after doing some research I came across the KeyboardAvoidingScrollView but using that if i give they height of

flex: 1 

If i change this line to a static height it fixes the issue on a static screen

 scrollContainer: { height: 1000 }

to the container that holds the content everything is pushed to the top.

To somehow adjust the view I gave the scroll container fixed height that did solve the problem temporarily but didn't work on all screen sizes.

My Code Looks like this

  import {
    View,
    Text,
    StyleSheet,
    SafeAreaView,
    Image,
    StatusBar,
    KeyboardAvoidingView,
  } from "react-native";
  import AuthContent from "../../auth/AuthContent";
  import AuthForm from "../../auth/AuthForm";
  import CustomTextInput from "../../components/CustomTextInput";
  import { setEmailPass } from "../../../redux/UserReucer";
  import { useDispatch } from "react-redux";
  import { useSelector } from "react-redux";
  import { ImageBackground } from "react-native";
  import { GlobalStyles } from "../../../consts/GlobalConsts";
  import OrientationLoadingOverlay from "react-native-orientation-loading-overlay";
  import { useState } from "react";
  import Loading from "../../components/Loading";
  import { getAxiosClient } from "../../apis/TallyApi";
  import { showAlert } from "../../../utils/Alert";
  import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
  const SignUpScreen = ({ navigation }) => {
    const dispatch = useDispatch();
    const currentUser = useSelector((state) => {
      return state.mUser;
    });

    const [isLoading, setIsLoading] = useState(false);

    // console.log("Redux state", currentUser);

    async function loginHandler({ email, password }) {
      setIsLoading(true);
      console.log("Signup Screen", email, password);

      try {
        let response = await getAxiosClient().post("/users/checkEmail", {
          email: email,
        });

        dispatch(setEmailPass({ email, password }));
        navigation.navigate("RoleScreen");

        console.log("Axios response ", response.data);
      } catch (err) {
        // const { response } = err;
        // const { request, ...errorObject } = response;
        console.log("Axios Error ", err.response.data.message);
        showAlert(err.response.data.message);
        // console.error(err);
        // console.error(err);
      } finally {
        setIsLoading(false);
      }
    }

    return (
      <>
        <ImageBackground
          source={require("../../../../assets/background_color.png")}
          style={GlobalStyles.backgroundContainer}
        >
          <SafeAreaView style={styles.container}>
            <KeyboardAwareScrollView
              style={styles.container}
              behavior={Platform.OS === "ios" ? "padding" : "height"}
            >
              <View style={styles.scrollContainer}>
                <StatusBar barStyle="light-content" />
                <View style={styles.topSpace}></View>
                <View style={styles.mainContainer}>
                  <View style={styles.imageContainer}>
                    <Image
                      style={styles.image}
                      source={require("../../../../assets/email_icn.png")}
                    ></Image>
                  </View>
                  <View style={styles.textContainer}>
                    <Text style={styles.largeText}>Continue with email</Text>
                    <Text style={styles.smallText}>
                      Enter your email address to get register with palace
                    </Text>
                  </View>
                  <View style={styles.authContainer}>
                    <AuthContent
                      styles={styles.authContainer}
                      onAuthenticate={loginHandler}
                    ></AuthContent>
                  </View>
                </View>
                <View style={styles.bottomSpace}></View>
                <Loading isLoading={isLoading}></Loading>
              </View>
            </KeyboardAwareScrollView>
          </SafeAreaView>
        </ImageBackground>
      </>
    );
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    scrollContainer: { flex: 1 },
    largeText: {
      fontSize: 30,
      color: "white",
      marginVertical: 9,
      textAlign: "center",
    },
    smallText: {
      fontSize: 16,
      color: "white",
      marginVertical: 9,
      textAlign: "center",
    },
    topSpace: {
      flex: 0.5,
    },
    mainContainer: {
      flex: 8.5,
    },
    bottomSpace: {
      flex: 1,
    },
    imageContainer: {
      flex: 3,
      alignItems: "center",
      justifyContent: "center",
    },
    textContainer: {
      flex: 1.5,

      justifyContent: "center",
    },
    authContainer: {
      flex: 2.5,
    },
    image: {
      resizeMode: "contain",
      height: "90%",
    },
  });

  export default SignUpScreen;