iOS (Fabric): Recycled TextInput after Password Autofill becomes non-editable (yellow background) and stops updating

[itsramiel]

Description

When a TextInput triggers iOS Password Autofill and is then recycled by React Native Fabric, the recycled input becomes unusable.

⚠️ Note about provided repo ⚠️: Since this is related to the password autofill of iOS. You would need to make sure to update ios/SecureInput/SecureInput.entitlements to point to a valid endpoint for the correct team id and app bundle. Otherwise it will not be reproduced

Steps to reproduce

1. Screen A: two inputs

• textContentType="username" / autoComplete="username"
• textContentType="newPassword" / autoComplete="new-password" / secureTextEntry
• App configured for Password Autofill (Associated Domains with webcredentials: and valid AASA).

2. On device (AutoFill enabled), type username, focus password, accept strong password.
3. App authenticates and navigates to Screen B (e.g., onboarding) with two regular TextInputs (no password field).
4. Due to Fabric recycling, the native view from the password field on Screen A is reused for one of Screen B’s inputs and that input is no longer editable/usable blocking further user flow

React Native Version

0.80.2

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: macOS 15.5
  CPU: (14) arm64 Apple M3 Max
  Memory: 2.46 GB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: ~/.nvm/versions/node/v22.14.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v22.14.0/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.14.0/bin/npm
  Watchman:
    version: 2025.04.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/itsramiel/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13363775
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.4.3
    path: /Users/itsramiel/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 19.1.1
    wanted: 19.1.1
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.80.2
    wanted: 0.80.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No crash or failure to provide stack trace for

MANDATORY Reproducer

https://github.com/itsramiel/SecureInput

Screenshots and Videos

Notice that the First Name input is no longer editable no matter what I type in. This is not just visually. The callback is not called

ScreenRecording_08-05-2025.11-29-53.AM_1.MP4

Extra Context

I tried to see if it is possible to recover the UITextField from this state in a standalone swift project by changing the textContextType and isSecureTextEntry so that this can be done in prepareForRecycle but unfortunately I was not successful in finding a way to recover from this state. I am not sure if such a TextInput should just be not recycled at all.

[wailin0]

I added textContentType="newPassword", which disabled the password autofill. That resolved the issue for now.

[ben-shokati]

This is also reproducible for me on react-native 0.79.4. The only workaround is to turn off new architecture but I don't want to do that.

[ben-shokati]

I temporarily found a workaround by disabling recycling on iOS TextInput fields:

1. Introduce a new Obj-C++ file (.mm) through XCode called RCTTextInputComponentView+NoRecycle under your project: app/ios/RCTTextInputComponentView+NoRecycle.mm and add it to your build targets
2. Place this content inside then do a clean build, run your app again

// RCTTextInputComponentView+NoRecycle.mm

#import <React/RCTTextInputComponentView.h>

@implementation RCTTextInputComponentView (NoRecycle)

// Disable pooling/recycling for all TextInputs (Fabric)
+ (BOOL)shouldBeRecycled
{
  return NO;
}

@end

[andrewdavidcostello]

Also experiencing this on 0.79.6 via Expo, hoping 0.81 potentially has this fixed.

newPassword doesn't work on subsequent screens for us so going to need to try that recycling patch for now.

[williamflaherty]

Still experiencing this on react native 0.81.5

[andywall66]

Still experiencing in 0.82.1.
Tried this above from @ben-shokati but no luck.

[ryanfoocj]

Hi, I'm also experiencing this issue on Expo 53 (RN 0.79.6). Will have to try the patch mentioned above.

[chanphiromsok]

Hi, I'm also experiencing this issue on Expo, 54,(RN 0.81)

[jpancotti]

Scoped workaround: skip Fabric recycling only for iOS Strong Password TextInputs

I hit the same issue where using iOS Strong Password (new password autofill) causes unrelated TextInputs on subsequent screens to inherit the yellow autofill styling / become “locked” and unusable. The behavior persisted across JS remounts / key changes, suggesting UIKit/Fabric internal state was leaking via component view recycling.

This workaround fixes it by preventing recycling only for TextInputs that are configured for Strong Password, instead of disabling recycling for all TextInputs.

What this does

• Prevents autofill leak to other screens by avoiding recycling for password-related TextInputs (Fabric recycle pool).
• Avoids the perf hit of globally disabling recycling by scoping the opt-out to only inputs with:
  • textContentType == newPassword OR
  • passwordRules != nil
• Still lets all other TextInputs recycle normally.

Patch (React Native / Fabric / iOS)

Apply this patch to React/Fabric/Mounting/RCTComponentViewRegistry.mm (tested on RN 0.81.5, iOS, Fabric):

diff --git a/React/Fabric/Mounting/RCTComponentViewRegistry.mm b/React/Fabric/Mounting/RCTComponentViewRegistry.mm
index 74ebc31..9d4c4e2 100644
--- a/React/Fabric/Mounting/RCTComponentViewRegistry.mm
+++ b/React/Fabric/Mounting/RCTComponentViewRegistry.mm
@@ -13,9 +13,37 @@
 
 #import <React/RCTImageComponentView.h>
 #import <React/RCTParagraphComponentView.h>
+#import <React/RCTTextInputComponentView.h>
 #import <React/RCTViewComponentView.h>
 #import <unordered_map>
 
+static BOOL RCTShouldSkipRecycleForStrongPasswordTextInput(UIView<RCTComponentViewProtocol> *componentView)
+{
+  if (![componentView isKindOfClass:[RCTTextInputComponentView class]]) {
+    return NO;
+  }
+
+  // `RCTTextInputComponentView` exposes the backed UIKit view via `-accessibilityElement`.
+  // Detect when iOS Strong Password is enabled (newPassword/passwordRules) and avoid recycling
+  // those instances. Recycling can leak UIKit internal state to unrelated inputs.
+  id element = [(RCTTextInputComponentView *)componentView accessibilityElement];
+
+  if ([element respondsToSelector:@selector(textContentType)]) {
+    NSString *textContentType = [element textContentType];
+    if ([textContentType isEqualToString:UITextContentTypeNewPassword]) {
+      return YES;
+    }
+  }
+
+  if ([element respondsToSelector:@selector(passwordRules)]) {
+    if ([element passwordRules] != nil) {
+      return YES;
+    }
+  }
+
+  return NO;
+}
+
 using namespace facebook;
 using namespace facebook::react;
 
@@ -107,7 +135,8 @@ const NSInteger RCTComponentViewRegistryRecyclePoolMaxSize = 1024;
   RCTAssertMainQueue();
   auto &recycledViews = _recyclePool[componentHandle];
 
-  if (recycledViews.size() > RCTComponentViewRegistryRecyclePoolMaxSize || !componentViewDescriptor.shouldBeRecycled) {
+  if (recycledViews.size() > RCTComponentViewRegistryRecyclePoolMaxSize || !componentViewDescriptor.shouldBeRecycled ||
+      RCTShouldSkipRecycleForStrongPasswordTextInput(componentViewDescriptor.view)) {
     return;
   }

Packaging note

If you don’t want to fork RN, this is easy to ship via patch-package so it applies after installs / during CI builds.

Extra UX tip: “unlock” a strong-password TextInput by remounting it

Even after clearing the value, some Strong Password autofill states remain “sticky”/locked unless the TextInput is fully remounted. In our app, adding a clear (“x”) button that:

1. clears the controlled value, and
2. bumps a local key (e.g. key={... + instanceCounter})

lets the user dismiss the yellow autofill state and regain editability.

(Without the remount key bump, clearing alone didn’t reliably unlock it.)

[Skshashank]

Hey @jpancotti ,thanks for the detailed explanation . But the above patch didn't worked for me .
react-native - 0.77.3

[bs-farhan-shaikh]

Summary

There are two separate issues related to iOS password auto-fill.

---

1. Auto-fill strong password locks the input (non-editable & non-removable)

When using Auto-fill Strong Password, the TextInput becomes locked — the text cannot be edited or cleared.

Solution

Control secureTextEntry explicitly and toggle it when needed.
In my case, I use a custom wrapper around react-native-paper’s TextInput.

State for secure entry

const [secureTextEntry, setSecureTextEntry] = useState(
  props.secureTextEntry === true || false
)

Right icon for password visibility toggle (this unlocks the input)

const getRightComponent = (): React.ReactNode => {
  if (props.right !== undefined && props.right !== null) return props.right

  if (props.secureTextEntry !== undefined) {
    return (
      <TextInput.Icon
        icon={secureTextEntry ? 'eye' : 'eye-off'}
        onPress={() => {
          setSecureTextEntry(!secureTextEntry)
        }}
      />
    )
  }

  return null
}

Props driven by secureTextEntry state

<TextInput
  key={secureTextEntry.toString()} // this makes the input to re-render when state changes
  secureTextEntry={secureTextEntry}
  textContentType={secureTextEntry ? 'password' : undefined}
  autoComplete={secureTextEntry ? 'password' : undefined}
  clearButtonMode={secureTextEntry ? 'always' : undefined}
  right={getRightComponent()}
 ...
/>

This prevents the input from getting stuck after auto-fill.

---

2. Auto-fill yellow highlight leaks to other inputs randomly

After using strong password auto-fill, the yellow auto-fill highlight sometimes appears on unrelated inputs.

Solution

Prevent TextInput recycling on iOS, as suggested by @ben-shokati :

🔗 #53050 (comment)

---

Final Result

Combining both fixes:

• Prevents the password field from becoming locked
• Stops random auto-fill highlight leaks across inputs

This fully resolves the issue for us on iOS.