Keyboard changes all components placement in react native

I created an AuthForm component that I use for a sign up and sign in screen after styling the screen I noticed every time I click on the keyboard to type some input everything changes its original placement and some components overlay others and it turns into a mess, how can I fix this?

Here is the code i used

import React, { useState } from "react";import {  StyleSheet,  ImageBackground,  View,  TouchableOpacity,} from "react-native";import { Text, Button, Input } from "react-native-elements";import Icon from "react-native-vector-icons/MaterialIcons";import Spacer from "./Spacer";const AuthForm = ({  headerText,  errorMessage,  onSubmit,  submitButtonText,  subText,}) => {  const [email, setEmail] = useState("");  const [password, setPassword] = useState("");  return (<View style={styles.container}><Spacer><Text style={styles.Text1}>{headerText}</Text><Text style={styles.Text2}>{subText}</Text></Spacer><View style={styles.Input}><Input          style={styles.Input}          placeholder="Your email"          value={email}          onChangeText={setEmail}          autoCapitalize="none"          autoCorrect={false}          leftIcon={<Icon name="email" size={20} color="#B3C1B3" />}        /><Input          secureTextEntry          placeholder="Your password"          value={password}          onChangeText={setPassword}          autoCapitalize="none"          autoCorrect={false}          leftIcon={<Icon name="lock" size={20} color="#B3C1B3" />}        /></View>      {errorMessage ? (<Text style={styles.errorMessage}>{errorMessage}</Text>      ) : null}<Spacer><TouchableOpacity          style={styles.buttonStyle}          onPress={() => onSubmit({ email, password })}><Text style={styles.ButtonText}>{submitButtonText}</Text></TouchableOpacity></Spacer></View>  );};const styles = StyleSheet.create({  container: {    flex: 1,    //justifyContent: "center",  },  errorMessage: {    fontSize: 16,    color: "red",    marginLeft: 15,    marginTop: 15,    top: "35%",  },  buttonStyle: {    color: "#e8c0c8",    width: "45%",    height: "25%",    backgroundColor: "#fdc2e6",    justifyContent: "center",    alignItems: "center",    borderRadius: 15,    top: "150%",    left: "30%",  },  ButtonText: {    color: "#FFFF",  },  Text1: {    top: "420%",    left: "15%",    fontSize: 24,    color: "#ffffff",  },  Text2: {    top: "420%",    left: "15%",    fontSize: 14,    color: "#d9d9d9",  },  Input: {    top: "40%",    width: "70%",    left: "15%",  },});export default AuthForm;