TextInput появляется в Botton в React Native

Question

Я делаю форму с Lo go вверху с помощью кнопки «назад». Когда я помещаю TextInput, она появляется внизу моего экрана, если я пытаюсь чтобы стилизовать его поверх, мой lo go выходит за пределы экрана. Даже любые изменения в таблице стилей TextInput разрушают весь мой дизайн, я думаю, что у меня есть некоторые проблемы с моим flex, но я также удалил и добавил flex в моем дочернем элементе View, но не смог Т помочь. Это мой код для создания lo go и отображения текста:

 <View style={styles.container}>
          <View style={{flex:1}}>
      <ImageBackground source={require('../assets/logo.png')}
      style={{ width: 200, height: 150,position: 'absolute', top: 20, left: -35, justifyContent: 'flex-start'}}
                resizeMode="contain">
        <View style={{position: 'absolute',left: 120,alignSelf:'center',marginTop:45}}> 
        <Text style = {styles.text} >UniQmove Training </Text> 
                </View>
     </ImageBackground>
     </View>
     <View style={{flex:3}}>
     <TouchableHighlight style={styles.inputContainer} onPress={() => this.backBtn()}>
     <ImageBackground source={require('../assets/back.png')}
      style={{ width: 40, height: 45,position: 'absolute',  justifyContent: 'flex-start'}}
                resizeMode="contain">

     </ImageBackground>
</TouchableHighlight>
</View>
               <View style={{margin:42}}>
                   <Text style = {{color:"#1589FF", fontSize:22,textAlign:"center",marginBottom:430}} >Create an Account </Text> 
               </View> 
               <KeyboardAvoidingView 
            keyboardVerticalOffset={100} behavior={"position"}>
                <View style={styles.inputx}>
          <Image style={styles.inputIcon} source={{uri: 'https://img.icons8.com/ultraviolet/40/000000/email.png'}}/>
          <TextInput style={styles.inputs}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
        </View>
        </KeyboardAvoidingView>
      </View>

Это моя таблица стилей:

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor: '#ffffff',
    },
    inputContainer: {
        width:350,
        height:45,
        right:160,
        top:-8,
        marginBottom:50,
        alignItems:'center'
    },
    text: {
      color:'#1589FF',
      fontSize: 24,
      fontWeight: 'bold',
      right:-8
     },
     inputx: {
        height:45,
        top:0,
        flexDirection: 'row',
        alignItems:'center'
    },
    inputs:{
      height:155,
      marginLeft:7,
      width:350,
    },
    inputIcon:{
      width:30,
      height:30,
      marginLeft:15,
      justifyContent: 'center'
    },
    back:{
      justifyContent: 'center',
     // marginBottom:320
    },
    buttonContainer: {
      height:45,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom:20,
      width:250,
      borderRadius:30,
      backgroundColor: "#1589FF",
    },
    loginText: {
      color: 'white',
    }
  });