Teclado faz área do input "encolher" no React Native

Mobile
#1

Estava tudo certo até que fui testar com o teclado do meu dispositivo e percebi que a tela estava subindo mesmo sem o KeyboardAvoidingView o que me deixou sem entender primeiramente. Depois disso coloquei o próprio KeyboardAvoidingView e não mudou nada. Resumindo: Em ambos os casos o input ficou encolhido conforme o espaço do teclado entre ele.
Já venho quebrando a cabeça mas até agora não consegui resultados…

import React, { useState } from "react";
import { View, Text, StyleSheet, TextInput, TouchableOpacity, KeyboardAvoidingView } from "react-native"
import { Ionicons as Icons } from '@expo/vector-icons';

export default function Register(){

    const[userPassword, setUserPassword] = useState(null);
    const[isHidePassword, setHidePassword] = useState(true);

    let data = {
        userPassword: userPassword,
    }
  
    const passwordCompleted = () =>{
      alert('Password ok = '+userPassword);
    }

    return(
      <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"} style={styles.mainContainer}>
        <View style={styles.innerContainer} >
          <Text style={styles.stepText}>6/6</Text>
          <Text style={styles.viewText}>Agora defina a sua senha</Text>

          <View style={styles.userPasswordInputArea}>
            <TextInput style={styles.userPasswordInput} placeholder= "senha" 
              onChangeText={value => setUserPassword(value)}
              secureTextEntry={isHidePassword}
            />
            <TouchableOpacity
              style={styles.iconHide}
              onPress={ () => {setHidePassword((prev) => !prev)} } 
              >          
              <Icons name={isHidePassword ? 'eye-off' : 'eye'} color='#323359' size={25}/>
            </TouchableOpacity>
          </View>
          
          <TouchableOpacity style={styles.toSendButton} activeOpacity={0.7} onPress={()=>passwordCompleted()}>
            <Text style={styles.toSendButtonText}>Enviar</Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    )
}
  
const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: '#323359'
  },
  innerContainer: {
    marginTop: 90,
    borderRadius: 35,
    flex: 1,
    backgroundColor: '#F1F4F5',
    borderBottomEndRadius: 0,
    borderBottomStartRadius: 0,
  },
  stepText:{
    marginTop: 35, 
    textAlign: 'right', 
    color: '#323359',
    marginRight: 40
  },
  viewText:{
    marginTop: 12, 
    color: '#323359',
    fontSize: 17,
    alignSelf: 'center',
  },
  userPasswordInputArea:{ //Tdos estao na proporcao desse aqui
    flexDirection: 'row', //tudo dentro de input area vai ficar na mesma linha
    marginTop: 30,
    width: '85%',
    height: '9%',
    backgroundColor: '#FFF', 
    alignItems: 'center',
    marginLeft: '7%',
    borderRadius: 50,

    shadowColor: '#000',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity: 0,
    shadowRadius: 2,
    elevation: 3
  },
  userPasswordInput:{
    width: '80%',//Pega 80% da área em largura
    height: '100%',
    alignItems: 'center',
    fontSize: 18,
    paddingLeft: 20
  },
  iconHide:{
    width: '20%',//Pega o resto da área em largura
    height: 50,
    justifyContent: 'center', 
    alignItems: 'center',
  },
  toSendButton:{
    backgroundColor: '#323359',
    marginTop: 35,
    width: 180,
    height: 40,
    alignSelf: 'center',
    alignItems: 'center',
    borderRadius: 50,
    padding: 7,
  
    shadowColor: '#000',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity: 0,
    shadowRadius: 2,
    elevation: 3,
  },
  toSendButtonText:{
    color: '#FFF',
    fontSize: 17,
    fontWeight: 'bold',
  }
});`Texto pré-formatado`
#2

Se ainda estiver com o problema, pode mostrar como está ficando? Só pra entender