react native – Bug: iOS autofill persists throughout screens, breaking InputBox

Problem

I’ve applied a easy wrapper round a TextInput part, and I’m utilizing it in a number of screens.

Within the app circulation, the person:

1. Indicators-up utilizing e-mail/password
2. Is redirected to a profile creation display

After I let iOS autofill a “new safe password” on the sign-up web page, after it being profitable, the TextInput on the following display is yellowed-out as if iOS had autofilled one thing in, however the textual content field is empty. From there I can faucet on the TextInput which pulls up the keyboard, I can sort in letters, however nothing really occurs.
I’ve applied logic to forestall the person persevering with with out coming into some textual content in there, so the person is basically caught (which I’ve eliminated for this demo).

There a number of consecutive profile creation screens. The opposite TextInput fields are additionally affected, till the third display for some motive.

Disabling autofill, secureTextEntry, or setting textContentType to none on InputFields (which are not the password ones) doesn’t work.
I believed it could possibly be some buried state I unintentionally maintain, or a misused reference. Or one thing to do with routing? I am at a little bit of a loss, and will use some assist understanding how this will come about.

Code

TextInput wrapper part:

import React from "react";
import {
  StyleSheet,
  Textual content,
  View,
  TextInput,
  TextInputProps,
  Dimensions,
  TouchableOpacity,
} from "react-native";
import { useColors } from "@/elements/ThemeProvider";
import { Eye, EyeOff } from "lucide-react-native";

const { width } = Dimensions.get("window");

interface CustomInputProps extends TextInputProps {
  label: string;
  error?: string;
  isPassword?: boolean;
  disableAutofill?: boolean;
}

export const CustomInput: React.FC = ({
  label,
  error,
  isPassword = false,
  disableAutofill = false,
  ...props
}) => {
  const colours = useColors();
  const [secureTextEntry, setSecureTextEntry] = React.useState(isPassword);

  const toggleSecureEntry = () => {
    setSecureTextEntry(!secureTextEntry);
  };

  return (
    
      {label}
      
        
        {isPassword && (
          
            {secureTextEntry ? (
              
            ) : (
              
            )}
          
        )}
      
      {error && {error}}
    
  );
};

I don’t use anything special with the component:

const [name, setName] = useState("");


  

Any concepts on what I needs to be trying into to debug this?

Different Infos

• Expo 52.0.36
• React Native 0.76.7
• React 18.3.1
• iOS 18.4.1