[Ios] app lags/stutters while navigating to a new screen with auto focused text input

[itsramiel]

Description

When navigating from one screen to another in a stack where the second screen has a text input with autofocus, the transition animation between the screens becomes laggy.

The issue is more obvious on a real device

Real device (Iphone 8 plus):

RPReplay_Final1668517694.MP4

Simulator

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2022-11-15.at.15.05.33.mp4

Steps to reproduce

1. create a native stack navigation with two screens
2. add a text input with autofocus in Screen 2
3. navigate from Screen 1 to Screen 2

Snack or a link to a repository

https://github.com/itsramiel/bare-autocus

Screens version

3.18.2

React Native version

0.70.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

Iphone 8 plus( Ios 16.0 )

Acknowledgements

Yes

[hirbod]

I can confirm this. Happening for me as well. I also saw this on other apps (Like Lieferando / Delivery.com), which exposed to me (what I was already guessing) that they use RN 🥸

[itsramiel]

I can confirm this. Happening for me as well. I also saw this on other apps (Like Lieferando / Delivery.com), which exposed to me (what I was already guessing) that they use RN 🥸

Happens on Facebook's messenger chat too

[kkafar]

Hi @itsramiel,

do you have any insights when this started to happen? Is it an issue since 3.18.2?
I guess I will test this, but if you happened to have this info it would be great :-)

[kkafar]

First conclusions:

1. I believe app does not actually lag.
2. What happens is that focus is applied way too late after the animation starts and it looks like first animation is cancelled and then second one is played with focused text input.

In React Native code focus is applied in didMoveToWindow method. What boggles me is that this code was introduced in 2020 (earlier it was done imperatively from JS), so this bug should not be new (not much changed recently in screens iOS code). I'll be back with more details once I play with RN code.

[itsramiel]

I am actually confused too because I have an app that was on

react-native: 0.69.5
react-natie-screens: 3.15.0

which was working fine with autofocus but when I updated to

react-native: 0.70.5
react-natie-screens: 3.18.2

then it started to happen, but if I create a fresh project with old dependencies I still get the buggy behavior 🤦🏻‍♂️. I have no clue really

[hirbod]

Could this be related to iOS 16?

[kkafar]

So I moved the code I linked earlier from didMoveToWindow to willMoveToWindow: method and the behaviour improved - animation no longer "goes back".

See the recording below. On the left is reproduction. On the right you can see behaviour after changes in RN code.

app-lag-combined.mov

TextView still jumps, but I'm not sure I can do much about it, as keyboard's view gets created only after reactFocus method is called, thus it is after the animation start => the transiting view is updated few frames later.

[kkafar]

I can also confirm that the issue does not occur on iOS 15.5 (I'm running on simulator)

Keyboard is perfectly synchronised with keyboard...

app-lag-ios-15.mov

It might be hard to fix in on react-native-screens side but will do some more experimenting.

[itsramiel]

Thank you @kkafar for the investigation. If you think this is not a react-native-screens issues please let me know where is the correct place to do that if possible.

[kkafar]

I believe this issue is caused by some internal iOS changes made by Apple, as I've heard that it also concerns fully native applications.
It would be best to report this straight to Apple (I haven't checked whether somebody has done it yet) via their developer.apple service.

Also I've been experimenting some more, but I haven't managed to achieve better results than these I mentioned earlier.

[michele6000]

Someone has find out some fix?