android - 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

Question

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
    }
     })

标签： androidreact-nativereact-native-androidreact-native-iosreact-native-navigation

Answer 1

You are wrapping the KeyboardAvoidingNew component all over the loginScreen. You can make use of just a View component. That should work well