question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Navigating back using gesture on iOS does not dismiss the keyboard

See original GitHub issue

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

https://user-images.githubusercontent.com/11707729/163845102-7cb0ed1d-c7f3-4aaa-8ebf-41b1b271bf13.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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
gabrieldonadelcommented, Apr 21, 2022

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

1reaction
WoLewickicommented, Apr 19, 2022

I think it is a duplicate of https://github.com/software-mansion/react-native-screens/issues/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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

iOS 7 back swipe gesture and keyboard dismissal
iOS 7 back swipe gesture and keyboard dismissal ... The thing is that UIView animateWithDuration is triggered without any respect to duration when...
Read more >
Use AssistiveTouch on iPhone - Apple Support
Go to Settings > Accessibility > Touch > AssistiveTouch > Create New Gesture. · Perform your gesture on the recording screen. For example:...
Read more >
How to dismiss iOS keyboard programatically (Swift 5)
Tap Gesture. This is the quickest way to implement keyboard dismissal. Just set a Tap gesture on the main View and hook that...
Read more >
Navigate your device with TalkBack - Android Accessibility Help
Choose reading controls · On devices with multi-finger gestures (updated R and up): Three-finger swipe right or left. Or, in one motion, swipe...
Read more >
Material Top Tabs Navigator | React Navigation
To use this navigator, ensure that you have @react-navigation/native and its ... npx pod-install ios ... 'none' : drags do not dismiss the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found