reactjs – iOS keyboard sparkles and autofill options reappear when toggling password visibility in React Native

I am constructing a login display in React Native utilizing normal TextInput elements for the username and password fields. On iOS, when the person faucets the attention icon to toggle password visibility (secureTextEntry on/off), the keyboard briefly hides and reveals 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 no less than 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)}
            type={kinds.icon}
          >
            
          
        
      
    
  );
}

const kinds = 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 reveals 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 sparkle even worse.

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

What I anticipated:

The keyboard ought to keep steady and never conceal/present when toggling visibility.

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

No flicker or structure leap when switching focus between fields.