swiping back with fullScreenSwipeEnabled on iOS 17 will make your keyboard go crazy bananas

[adgarcia]

Description

If you use the fullScreenSwipeEnabled screen option on a device/simulator running iOS 17 and then swipe 'back' while the keyboard is up, then your keyboard will be translated vertically in an unexpected (if also funny) way.

Although the provided reproduction is on a simulator running the example project on iOS 17, I can also reproduced this in a production app running on a device with iOS 17.

crazy.for.cuckoo.puffs.mov

Steps to reproduce

1. have some way to build to an iOS simulator or device running iOS 17
2. run the react-native-screens Examples project
3. navigate to 'Gestures' -> 'Details'
4. make sure full screen swipe is enabled:

5. adjust 'top' until the little full screen tomato colored swipe box is visible above the keyboard

6. swipe back within that box while the keyboard is visible.

observe the keyboard become vertically translated by an amount that looks kind of like 'height of the keyboard' * 'normalized horizontal swipe distance'

Snack or a link to a repository

https://github.com/adgarcia/react-native-screens

Screens version

3.25.0

React Native version

0.72.4

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

None

Device model

Any iPhone running iOS 17

Acknowledgements

Yes

[adgarcia]

I am using the screens example

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

hello robot you are mistaken. I have provided a reproduction using the react native screens example repo. You cannot reply to me but maybe I should just clone the repo and link that. let us see

[adgarcia]

thank you robot

[kkafar]

Absolutely love the issue title. I've managed to reproduce the issue and confirmed that it does not occur on older iOS versions (is it the same for you?).

[adgarcia]

Absolutely love the issue title. I've managed to reproduce the issue and confirmed that it does not occur on older iOS versions (is it the same for you?).

Hey! Thank you for the response! Yeah that is the same for me. All is well on ios 16 and earlier.

So I did some more investigating and it seems like it's actually happening anywhere one uses a UIPercentDrivenInteractiveTransition to drive a navigation transition animation. In my project I am working around this by patching RNScreenStack.mm to dismiss the keyboard as soon as the swipe is detected. It is rather ugly.

-(void)handleSwipe {
switch (gestureRecognizer.state) {
    case UIGestureRecognizerStateBegan: {
      // On iOS 17 the keyboard goes nuts when you drive a dismiss animation with UIPercentDrivenInteractiveTransition
      if (@available(iOS 17, *)) {
        [[UIApplication sharedApplication] sendAction:@selector(resignFirstResponder) to:nil from:nil forEvent:nil];
      }
      _interactionController = [UIPercentDrivenInteractiveTransition new];
      [_controller popViewControllerAnimated:YES];
      break;
    }

It would be more ideal to do the dismissal in one of the UINavigationControllerDelegate methods (specifically animationControllerForOperation as that's when you know for sure that an animated transition is going to be used), but doing that results in the keyboard not animating away nicely =(

I haven't tried using something custom that conforms to UIViewControllerInteractiveTransitioning to replace the UIPercentDrivenInteractiveTransition yet.

Anyway! I think software mansion is really cool and every time I poke around in your code I come away impressed. Really appreciate the work you all do.

[kkafar]

This issue is reproducible on native iOS application. I got some intel that it will be most likely fixed with next patch release for iOS. Closing the issue here, as it seems that it is not caused by react-native-screens.