Focus issue on iOS when a "Reduce Motion" is turn on

[retyui]

Description

Based on this issue: retyui/react-native-confirmation-code-field#258

important settings:

1. iOS Settings -> Accessibility -> Motion ->
   1.2 Reduce Motion ON
   1.3 Prefer Cross-Fade Transitions ON.

---

When users navigate from screen 1 (where it has a focused input) to the screen 2 with a <TextInput autoFocus />

In logs you can, see the issue:

1. User moves a focus to the "input 1"
2. LOG ---onFocus 1
3. User navigates to the "screen 2"
4. LOG ---onBlur 1
5. LOG ---onFocus 2
6. LOG ---onBlur 2
7. LOG ---onFocus 1 // <--- Hmm... focus has landed on input from screen 1 ? how ?

demo.mov

Steps to reproduce

Steps you can find here: https://github.com/rozhkovs/cross-fade-transitions-and-text-input-ios

Snack or a link to a repository

https://github.com/rozhkovs/cross-fade-transitions-and-text-input-ios

Screens version

4.25.2

React Native version

0.85.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[kkafar]

Hello @retyui!

What makes you think that this issue is related to react-native-screens?
With few exceptions (formsheet on Android), we don't really do much in focus area. Is that something specific to native stack? What if you use JS stack?

[retyui]

@kkafar I couldn't reproduce issue with a JS stack @react-navigation/stack and also pure RN doesn't have this issue at all

[t0maboro]

Hi @retyui

I haven't been able to reproduce this issue on my side so far. Due to internal policies, I'm creating a separate repository for this https://github.com/t0maboro/RNS4133 . I want to confirm my setup is correct.

rns4133.mov

[retyui]

@t0maboro you probably should use an expo

[t0maboro]

Unfortunately, still unable to reproduce this on Expo. I'll ask someone from the team for a double-check.