How to make KeyboardAvoidingView working properly?

I created the following sign up screen component with KeyboardAvoidingView:

const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    paddingHorizontal: 10,  },  text: {    alignSelf: 'center',    marginVertical: 5,  },})const SignUpScreen = ({ navigation }: Props) => {  const [name, setName] = React.useState('');  const [email, setEmail] = React.useState('');  const [password, setPassword] = React.useState('');  const { signUp } = React.useContext(AuthContext);  return (<KeyboardAvoidingView      style={styles.container}      behavior="padding"><LogonHeader title="Nouveau compte" /><Input        placeholder="Votre nom complet"        value={name}        onChangeText={setName}      /><Input        placeholder="Indiquez vote e-mail"        value={email}        onChangeText={setEmail}      /><Input        placeholder="Créez votre mot de passe"        value={password}        onChangeText={setPassword}        secureTextEntry      /><Button        title="Créer mon compte"        onPress={() => signUp({          name,          email,          password,        })}      /><Text style={styles.text}>        En créant un compte, vous acceptez nos{''}<Text          style={{ fontWeight: 'bold' }}          onPress={() => console.log('CGU')}>          CGU</Text></Text><Text style={styles.text}>        Déjà un compte ?{''}<Text          style={{ fontWeight: 'bold' }}          onPress={() => navigation.navigate('SignIn')}>          Connexion</Text></Text></KeyboardAvoidingView>  );}

But the keyboard style overlap the screen without any change. If I select the last input on IOs, the keyboard just appear over it.

Note: I am using react-navigation, but I have the same bug with rendering only this screen on the root app.

What I am missing?