reactjs – iOS keyboard glints and autofill recommendations reappear when toggling password visibility in React Native

I am constructing a login display in React Native utilizing commonplace TextInput elements for the username and password fields. On iOS, when the consumer faucets the attention icon to toggle password visibility (secureTextEntry on/off), the keyboard briefly hides and exhibits once more, and the iCloud Keychain autofill bar reappears.

This causes the display to flicker visually, particularly when wrapped in a KeyboardAvoidingView, making the structure leap. The problem additionally occurs when switching focus between inputs—even with out toggling visibility—so long as autofill has been triggered a minimum of as soon as.

This conduct would not occur on Android and appears tightly tied to iOS keyboard and autofill conduct.

Code pattern (minimal repro):

import { useState } from "react";
import {
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Textual content,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { Feather } from "@expo/vector-icons";

export default operate App() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);

  return (
    
      
        Username
        
      
      
        Password
        
          
           setShowPassword((prev) => !prev)}
            model={types.icon}
          >
            
          
        
      
    
  );
}

const types = StyleSheet.create({
  container: { flex: 1, justifyContent: "middle", padding: 20 },
  row: { marginBottom: 20 },
  enter: {
    borderWidth: 1,
    borderColor: "#ccc",
    padding: 10,
    borderRadius: 6,
  },
  inputWrapper: { place: "relative" },
  icon: { place: "absolute", proper: 10, prime: 10 },
});

What I attempted:

I set autoComplete=”off” and textContentType=”none” on the inputs, however iOS nonetheless exhibits the Keychain autofill bar.

I additionally tried rendering two separate TextInputs (one with secureTextEntry, one with out), and switching between them—however that made the glint even worse.

Tried utterly eradicating KeyboardAvoidingView and managing keyboard manually. No enchancment.

What I anticipated:

The keyboard ought to keep secure and never cover/present when toggling visibility.

As soon as the consumer dismisses the Keychain autofill bar, it ought to keep hidden.

No flicker or structure leap when switching focus between fields.