React Native - изображение появляется на экране после появления клавиатуры

Question

У меня проблема, которую я не могу исправить. Я использую KeyboardAvoidingView , чтобы стилизовать мое приложение на клавиатуре, но значок переходит на экран.

Я хочу решить эту проблему двумя способами: 1. с помощью поведения заполнения 2. с использованием позиции (или других) Поведение к статическому положению моих элементов на клавиатуре.

Код: Home.js (основной)

render() {
    let { fadeAnim } = this.state;

    return (
        <KeyboardAvoidingView style={{
          flex: 1,
        }} behavior="padding">
          <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
            <Animated.View style={{
              opacity: fadeAnim,
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: '#7eb3e0',
              flex: 1
            }}>
              <Logo ref={this.imageReference}/>
              <Menu ref={this.menuReference} />
            </Animated.View>
          </TouchableWithoutFeedback>
        </KeyboardAvoidingView>
    )
}

Logo.js:

render() {
  return (
      <Animated.Image
        onLoad={this.state.onLoad}
        style={{
          transform: [
            {
            translateY: this.state.position.interpolate({
              inputRange: [0, Dimensions.get('screen').height/2],
              outputRange: [0, -Dimensions.get('screen').height/2+125]
            }),
          }
        ],
          maxWidth: MAX_IMAGE_WIDTH,
          flex: 1,
          maxHeight: MAX_IMAGE_HEIGHT,
          minHeight: MAX_IMAGE_HEIGHT/2,
          minWidth: MAX_IMAGE_WIDTH/2,
          position: "relative"
        }}
        source={require('../../../assets/logo.png')}
      />
  );
}

Menu.js:

render() {
    return (
        <Animated.View style={{
             opacity: this.state.inputsOpacity,
             position: "absolute",
             width: '80%',
             }}>
            <View style={{flexDirection:"row"}}>
            <MaterialCommunityIcons style={{paddingLeft: 10, borderBottomWidth: 2}} size={40} name="email"/>
            <TextInput
                placeholder="Enter your email!"
                style={{
                textAlignVertical: "center",
                borderBottomWidth: 2,
                paddingLeft: 10,
                flex: 1,
                height: 50
            }}
            ></TextInput>
            </View>

            <View style={{flexDirection:"row", paddingTop: 10}}>
            <MaterialCommunityIcons style={{paddingLeft: 10, borderBottomWidth: 2}} size={40} name="lock"/>
            <TextInput
                placeholder="Enter your password!"
                secureTextEntry={true}
                style={{
                textAlignVertical: "center",
                borderBottomWidth: 2,
                paddingLeft: 10,
                flex: 1,
                height: 50
            }}
            ></TextInput>
            </View>
        </Animated.View>
    )
}

Спасибоза помощь и хорошего дня:)