[iOS 17] Keyboard flickering on a back gesture

[kirillzyusko]

Description

The keyboard flickers when you do a back swipe navigation gesture.

I think it's kind of known issue in RN community and it seems like it's iOS 17 specific only. Initially I thought it'll be fixed in subsequent iOS releases, but it's already iOS 17.3 and the issue is still there 😬

Also it's worth to note, that the native iOS apps developed by Apple work correctly, if we test for example "Messages" app - it works well even on latest iOS versions. Below is comparison between two apps:

Messages (expected behavior)	RN (actual behavior)
RPReplay_Final1706546041.MP4	RPReplay_Final1706546586.MP4

Let me know what do you think - whether it should be fixable in RNS or we should wait more for new OS releases 👀

Steps to reproduce

1. Open provided repo app
2. Press "Go to Details"
3. Try to swipe back

See how keyboard is flickering.

Snack or a link to a repository

https://github.com/kirillzyusko/RNNativeStackIOSKeyboard

Screens version

3.29.0

React Native version

0.73.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

iPhone 11

Acknowledgements

Yes

[WoLewicki]

Did you try making a nativeiOS app with a simple configuration to see if it also happens there? It might be patched only on the apps coming from Apple itself.

[kirillzyusko]

@WoLewicki I've tried, but I couldn't achieve a behavior when keyboard is associated with a screen (using Swift UI). I. e. every time when I did a back gesture -> keyboard was closing automatically, and if screen is not dismissed -> then keyboard appears instantly (I think the same behavior as if I specify hideKeyboardOnSwipe).

If you can give me a direction on what I need to do in order to have an associated keyboard within a screen, then I can give a try again 👀

[WoLewicki]

Hmm I don't know how to handle it with Swift UI tbh 😕 I'd go with a simple swift/obj-c project and align it with how hideKeyboardOnSwipe works in RNScreens.

[kirillzyusko]

Okay @WoLewicki I'll try and let you know 👀

[tboba]

Hi @kirillzyusko, did you manage to make any solution with SwiftUI? 😄
From my side, I can confirm this happens in Screens - a good reproducer also might be #77 (snack).

[kirillzyusko]

Hello @tboba

No, we didn't have enough time to investigate this problem, so I didn't create a reproduction example with SwiftUI (but in general I think @WoLewicki is right and such behavior is hard to achieve in SwiftUI).

Most likely we need to go to pure ObjC/Swift project. I was trying to find ready examples on GitHub and just run them, but no luck - almost all of them are very old and can not be opened using new XCode version.

[maksg]

Hey @kirillzyusko, I just recreated your project in Swift and indeed there is no flickering.

I believe that this may be some performance thing since for me it only happens on second swipe back on Paper and it looks like the keyboard is reopened on first swipe also but it just happens faster. You can see in the video below that keyboard suggestions flash for a moment. I'll try looking into what might be causing this.

Also it seems that it works correctly on Fabric so you can check and see if migrating to Fabric works for your case.

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-08-22.at.14.51.15.mp4

[kirillzyusko]

Also it seems that it works correctly on Fabric so you can check and see if migrating to Fabric works for your case.

Okay, glad to know that! Curious to know a root cause of the issue.

I think in Fabric many things have changed in react-native - really curious to know where problem is underlying. Is it in react-native or in react-native-screens 🤔

[maksg]

After some researching I guess that it could be an issue with react-native. I tried making RNScreen as barebone as possible but nothing changed. Tweaking RCTUITextField also didn't help.

I found this issue facebook/react-native#41801 so it could be something similar because we're getting the same warning. However I don't think it's destroying and creating text field again, initWithFrame is only called once.

Maybe someone else could look at that as I'm out of ideas for now. @kkafar @tboba @WoLewicki