Bug: CodeField stops accepting input on iOS when Prefer Cross-Fade Transitions is enabled

[rozhkovs]

Describe the bug

Some iOS users consistently cannot enter a verification code in CodeField. When the keyboard is visible and the user starts typing digits, nothing happens: the code value does not change. Trying to tap/focus the field also does not help.

There seem to be two related issues:

1. Typed characters are not entered into the field.
2. The field does not visually show focus, even when the keyboard is shown.

Video with the issue:

IMG_6671_compressed_2x.MOV

After looking closely at the affected user's device settings, I noticed that Prefer Cross-Fade Transitions was enabled:

To reproduce the issue reliably in the affected app, this setting needs to be enabled and the app needs to be launched from a cold start.

The issue seems related to caretHidden={true}. In experiments, a plain React Native TextInput with autoFocus and caretHidden can also show focus-related problems when Prefer Cross-Fade Transitions is enabled. In the production app, the issue happens with CodeField.

Repo for reproducing

I created a minimal Expo app for experiments:

rozhkovs/cross-fade-transitions-and-text-input-ios

The minimal repo currently reproduces the focus problem, but I have not been able to fully reproduce the “typed digits are ignored” behavior there. The full issue is demonstrated in the attached video from the production app.

Expected behavior

The field should be focusable and should accept typed digits regardless of whether iOS Prefer Cross-Fade Transitions is enabled.

Environment

• Desktop OS: macOS 26.5
• Device: iPhone, exact model TBD
• OS: iOS, exact version TBD
• Expo SDK: 55.0.8 in the production app; 56.x in the minimal repro
• React Native version: 0.83.2 in the production app; 0.85.3 in the minimal repro
• React Native architecture: New Architecture / Fabric enabled
• JS engine: Hermes
• Library version: reproduced with 7.4.0; also tested with 9.0.0 and the issue still happens

Additional context

• The video was recorded with react-native-confirmation-code-field version 7.4.0. Updating to 9.0.0 did not fix the issue.
• The issue is intermittent and very sensitive to the exact sequence of actions. In our case, the sequence is shown in the attached video.
• Our app has two authentication flows: SMS code and email code. Both use the same code input screen with no major differences. However, in testing, typed characters stop working specifically in the SMS flow, while the email code flow works correctly when iOS suggests inserting the code. This makes me suspect that the previous phone/email input screens or iOS one-time-code suggestions may also affect the issue.
• iOS setting used for reproduction: Settings → Accessibility → Motion → Reduce Motion ON → Prefer Cross-Fade Transitions ON.

I hope my small investigation helps.

[rozhkovs]

I was able to determine that the keyboardType={'phone-pad'} prop on the previous screen, where the phone number is entered, affects this behavior.

[retyui]

'this behavior' you meant - Typed characters are not entered into the field?

[rozhkovs]

'this behavior' you meant - Typed characters are not entered into the field?

Yes, when I removed this prop keyboardType={'phone-pad'} from the phone number input component, I was able to enter characters into the code input. However, the focus indication still did not work.

[retyui]

However, the focus indication still did not work.

can it be caused by "Prefer Cross-Fade Transitions" option on ?

[rozhkovs]

However, the focus indication still did not work.

can it be caused by "Prefer Cross-Fade Transitions" option on ?

Yes. Without this setting, focus works correctly.

[retyui]

@rozhkovs thank you, that's clarify a lot

will try to fix this issue as I back from a vocation

[retyui]

I think a root cause is in the react-native-screens library: software-mansion/react-native-screens#4133

---

you can use two workarounds

1. replace @react-navigation/native-stack with @react-navigation/stack
2. or remove autoFocus prop and do manual focus management

  const ref = useRef();
  useEffect(() => {
    setTimeout((input) => {
      ref.current?.focus();
    }, 300);
  }, []);
  return <CodeField ref={ref} ... />