Невозможно понять, как, почему или когда KeyboardAvoidingView работает в React Native с использованием Expo

Question

После нескольких месяцев разработки приложения, сегодня я переделал свой экран входа в систему, который был беспорядок стилей и проблем, я сказал, эй!Давайте освежим все знания стиля позиционирования, которые я собрал за эти месяцы, что может пойти не так?

Конечно, KeyboardAvoidingView работает неправильно, он всегда работает неправильно, на сегодняшний день я до сих пор не могу понять, почему иногда работает,а иногда нет.

Экраны того, что я имею в виду, синяя зона - это зона внутри KeyboardAvoidingView:

Как видите, этоничего не делает, даже не работает (ни в Android, ни в iOS):

Вот мой код, не обращайте внимания на стилив коде, после того, как я закончу, я перемещаю его в styles const:

  return (
        <View style={[styles.container, {alignItems: 'center'}]}>
          <Image
            source={require('../assets/images/anawin-logo.png')}
            style={styles.image}
          />
          <KeyboardAvoidingView style={{flex: 1, width: '100%', alignItems: 'center', backgroundColor: 'blue' }} enabled>
            <TextInput
              keyboardType="email-address"
              onChangeText={(email) => this.setState({ email })}
              placeholder="Correu electrònic"
              placeholderTextColor ="#dedede"
              autoCapitalize = "none"
              underlineColorAndroid="transparent"
              style={styles.input}
              value={email}
            />
            <View style={{flexDirection: 'row', marginTop: 10}}>
              <TextInput
                onChangeText={(password) => this.setState({ password })}
                ref={(input) => { this.secondTextInput = input; }}
                value={password}
                placeholder="Contrassenya"
                secureTextEntry={safetyPassword}
                placeholderTextColor="#dedede"
                underlineColorAndroid="transparent"
                style={styles.input}
              />
              <Icon
               containerStyle={{right: 10, top: 5, position: 'absolute'}}
               onPress={() => this.setState({safetyPassword : safetyPassword ? false : true})}
               size={32}
               color='white'
               underlayColor="#9c0b4e"
               type="font-awesome"
               name={safetyPassword ? 'eye-slash' : 'eye'} />
             </View>
             <View style={{marginTop: 50, flexDirection: 'row'}}>
              <Image
                source={require('../assets/images/raim-blanc.png')}
                style={styles.imageRaim}
              />
              <TouchableOpacity
                onPress={() => {
                    this._onLogin(email, password)
                  }}
                title="Conectar-se"
                accessibilityLabel="Conectar-se"
              >
                <Text style={styles.textLogin}> Connectar-se </Text>
              </TouchableOpacity>
            </View>
          </KeyboardAvoidingView>
          <View style={{marginTop:100, marginBottom: 20}}>
              <TouchableOpacity style={styles.contrasenya} onPress={this._Recovery.bind(this)} >
                  <Text style={{ fontSize: 14, textAlign: 'center', color: 'white'}} > No recordes la teva contrassenya? </Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.nouCompte} onPress={this._Contacto.bind(this)} >
                  <Text style={{ fontSize: 14, textAlign: 'center', color: Color.corporatiu}} > Sol·licitar un compte </Text>
              </TouchableOpacity>
            </View>
        </View>
      )

И стили, которые уже используются:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.corporatiu,
    paddingTop: 20,
  },
  image: {
    width: '90%',
    resizeMode: 'contain',
  },
  textLogin: {
    color: 'white',
    fontSize:28,
    fontFamily: 'Kushan',
  },
  input: {
   width: '90%',
   fontSize: 20,
   padding: 10,
   color: 'white',
   borderBottomWidth:1,
   borderColor: 'white',
 },
 imageRaim: {
   width: 35,
   height: 35,
   marginTop: 0,
   marginLeft: -10,
   resizeMode: 'contain',
 },
 nouCompte:{
   backgroundColor:'white',
   padding: 10,
 },
 contrasenya:{
   marginBottom:5,
   paddingBottom:15,
 }
});

Я был бы так счастлив, есликто-то может дать мне свет, типа, эй, вы не можете использовать flex, элементы должны иметь фиксированную высоту или что-то в этом роде, потому что я сейчас темный.