When using Text Input When Keyboard is not on screen the background image is fine but when keyboard is on screen image bottom comes above the keyboard

I Got this problem When using Text Input When Keyboard is not on screen the background image is fine but when keyboard is on screen image bottom comes above the keyboard .. the code for login page and image is given below I tried using the Keyboard avoid view and safeareaview but nothing seems to work out

LoginScreen.js

  import React from "react";  import  {SafeAreaView,TextInput,Image,View,Text,StatusBar,StyleSheet,KeyboardAvoidingView,TouchableOpacity, TouchableOpacityComponent} from "react-native";  import Icon from "react-native-vector-icons/Ionicons";export default class LoginScreen extends React.Component{state={    name:"",    error:""}onPressIcons=()=>{    this.props.navigation.navigate("About")}onPressNextPage=()=>{    if(this.state.name===""){        this.setState({error:"Enter A User Name"})    }    else{        this.props.navigation.navigate("Navigate",{name:this.state.name})    }}render(){    return(<KeyboardAvoidingView style={styles.container}><StatusBar barStyle="dark-content" backgroundColor="transparent"/><KeyboardAvoidingView style={styles.form} ><TouchableOpacity style={styles.icon} onPress={this.onPressIcons}><Icon name="ios-contact" size={45} color="#108786"/></TouchableOpacity><Image source={require("../assets/logo.png")} style={styles.image}/><Text style={styles.error}>{this.state.error}</Text><Text style={styles.username}>Username</Text><TextInput style={styles.input}                     placeholder="UserName"                    onChangeText={name =>{this.setState({name})}}                    value={this.state.name}/></KeyboardAvoidingView></KeyboardAvoidingView>    )    }   } const styles=StyleSheet.create({container:{    flex:0,    backgroundColor:"#108786",    justifyContent:"center",    alignItems:"center"},form:{    alignContent:"center",    alignSelf:"center",    alignItems:"center",    elevation:24,    height:"100%",    width:"100%",    backgroundColor:"#FFF",    borderRadius:45,    borderTopStartRadius:0,    borderTopEndRadius:0,    borderBottomStartRadius:0,    borderBottomEndRadius:600   },   icon:{        marginTop:90,        marginLeft:300   },   image:{       height:150,       width:200,       alignSelf:"center"   },   error:{        marginTop:7,        alignSelf:"center",        color:"red",        fontSize:15   },   username:{        color:"#108786",        fontSize:27,        fontWeight:"bold",        alignSelf:"center",        justifyContent:"center",        marginRight:280,        marginTop:10    },    input:{        marginTop:15,        marginRight:100,        height:50,        width:380,        marginLeft:100,        borderWidth:StyleSheet.hairlineWidth,        borderColor:"#018786",        borderRadius:10,        fontWeight:"600",        paddingHorizontal:16,        alignSelf:"center",        borderBottomRightRadius:30,        borderTopRightRadius:30    }     })