Navigating back using gesture on iOS does not dismiss the keyboard

[gabrieldonadel]

Description

On iOS when navigating back from a screen that was a TextInput wrapped in a KeyboardAvoidingView using the swipe gesture does not dismiss the keyboard leading to weird animation during transitions. I tested the exact same come using @react-navigation/stack and the keyboard gets dismissed in the beginning of the transition

Screenshots

Screen.Recording.2022-04-18.at.14.08.12.mov

Steps To Reproduce

1. Navigate to any screen that has a TextInput wrapped in a KeyboardAvoidingView
2. Focus the TextInput and swipe from left to right (gesture to navigate back)
3. Observe container resizing the but the keyboard remaining in its position (open)

Expected behavior

Either the keyboard should be dismissed when the navigation gesture starts, same behavior as @react-navigation/stack,
or the container wrapped with a KeyboardAvoidingView should not be resized during the transition

Actual behavior

Keyboard remains on the screen while navigating back

Reproduction

Snack https://snack.expo.dev/@gabidonadel/chat-keyboard

Platform

• iOS
• Android
• Web
• Windows
• tvOS

Workflow

• Managed workflow
• Bare workflow

Package versions

package	version
@react-navigation/native	*
@react-navigation/native-stack	*
react-native-screens	3.8.0
react-native-safe-area-context	3.3.2
react-native-gesture-handler	1.10.2
expo	43.0.0

[vonovak]

I believe this (not hiding keyboard) is the expected behavior, see eg. the messages app.

[WoLewicki]

I think it is a duplicate of #958, so maybe we should close it to keep the discussion in one place? And, as @vonovak said, it might be rather a problem with how KeyboardAvoidingView works rather than the platform's behavior.

[vonovak]

@gabrieldonadel have you tried with facebook/react-native@49a1460 ? (requires 0.68)

[gabrieldonadel]

@gabrieldonadel have you tried with facebook/react-native@49a1460 ? (requires 0.68)

Thanks for the suggestion but from my testing using automaticallyAdjustKeyboardInsets still leads to the same problem

[felippepuhle]

Problem is not related to KeyboardAvoidingView only, @gabrieldonadel can correct me if I say something wrong but Keyboard is dispatching will/did hide even though keyboard is still open (we tried to create our own KeyboardAvoidingView and at the end of the day result was the same). Is there something we can help to fix this?

[WoLewicki]

@felippepuhle did you check if the behavior of Keyboard events when using native-stack differs from the ones in native iOS project? I am not sure if we do anything specific in native-stack regarding those events so it should probably work just as in the native iOS projects.

[felippepuhle]

@WoLewicki nope, unfortunately we don't have any native iOS project for a quick test and unsure how we would test all these keyboard scenarios... but we did compare with the JS stack and in that case they are explicitly calling dismiss when starting the gesture and focusing again if user didn't finish the gesture and for some reason it works...

I'm not saying it's react-native-screens fault or anything, just trying to get some more thoughts about the odd scenario where we're getting the will/did hide event but the keyboard is not being really being dismissed (it might even be the OS triggering those), any thoughts?

We're considering applying your closed PR as a patch for now, we checked what some other react native apps are doing and discord for example is using the same approach, not perfect but much better IMO.

Thanks!

[WoLewicki]

It is the OS that triggers those events (see https://github.com/facebook/react-native/blob/18196512db6b8b4469a5e1b098d8892ae72d743a/React/CoreModules/RCTKeyboardObserver.mm), but I am not sure why they are called in such way when swiping natively 😕

[WoLewicki]

I made a PR with a prop for hiding keyboard on swipe: #1419. As for the option when we would like not to hide keyboard but also not change the frame of view, we would need changes in KeyboardAvoidingView or add our own component managing it. Can I help you more with it? Or can we close it with the PR?

[gabrieldonadel]

Thanks for your help @WoLewicki, yeah I think we can close this with the PR

[cenzovit]

I made a PR with a prop for hiding keyboard on swipe: #1419. As for the option when we would like not to hide keyboard but also not change the frame of view, we would need changes in KeyboardAvoidingView or add our own component managing it. Can I help you more with it? Or can we close it with the PR?

Does anyone have any clue as to why this is the case -- that the native keyboard frame events are firing when the keyboard is not actually being dismissed? I'd like to both not hide the keyboard but also not trigger things like flatlist keyboard insets getting automatically adjusted which all seems to be tied to the native keyboard events being triggered incorrectly...