fix: containedTransparentModal swipe back gesture issue

[hurali97]

Description

This PR aims to fix the gesture issue on the modal presentation 'containedTransparentModal'. The issue is raised here: #1476 (comment)

So if we look at the video attached in the above issue, we'd see the swipe back gesture works (which it shouldn't) when the presentations type is 'containedTransparentModal' and it doesn't work(excellent) when the presentation type is 'transparentModal'.

Changes

The method gestureRecognizerShouldBegin is checking for topScreen but not for the topModal, and ideally it should check for it. So the idea is to compare the topModal is presented by the topScreen and if yes, we obscure the gesture and return NO. And obviously, if the topModal isn't being presented we check for isAttached flag to let the gestures flow.
Relevant changes: 15fb9dd

Before (This Before video is taken from the issue link provided above)

before.mp4

After

after.mp4

Test code and steps to reproduce

The code is taken from here and added in TestExample dir, below is the repro provided by the issue opener.
https://github.com/NguyenHoangMinhkkkk/navigation-reproduce

Comment out the below fixes, pod install and rebuild the TestExample iOS project and you should be able to repro.
15fb9dd

Checklist

• Included code example that can be used to test this change
• Updated TS types
• Updated documentation:
  • https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
  • https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
  • https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
  • https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
• Ensured that CI passes

[hurali97]

@kkafar or anyone would want to review 👍

[kkafar]

Thank you for your contribution!

Gesture recogniser logic received overhaul recently:

• #1512
• #1516

So this PR needs to be updated & conform to the new business logic.

I will also need your to revert the changes in Podfile.lock, remove commented out code, and possibly add empty lines at file ends (you can see it easliy on github overview).

I'll come back shortly to review the changes from the perspective of business logic

[hurali97]

Thank you for your contribution!

Gesture recogniser logic received overhaul recently:

• fix: handle multiple gesture recognizers #1512
• fix: add usage of older API for older iOS versions #1516

So this PR needs to be updated & conform to the new business logic.

I will also need your to revert the changes in Podfile.lock, remove commented out code, and possibly add empty lines at file ends (you can see it easliy on github overview).

I'll come back shortly to review the changes from the perspective of business logic

Hey, I incorporated to the required changes. Prevented the sending of events to RNSPanGestureRecognizer if the modal is opened. Tested the updated changes on the Test1072, doesn't break it either.

Also, regarding the empty lines, git preview seems to truncates the empty lines at bottom.

[kkafar]

Hi @hurali97,
it seems that #1476 is fixed by #1509. I used your test example in #1509 (and made a typo while adding you as co-author) 🤦🏻 . Could you confirm that it also works for you when you use screens from this commit: d7d04e6?

[hurali97]

Hi @kkafar :)

I checked out the commit, but I am getting unexpected outputs. Please see the attached videos for reference:

Below is the output when I import { createNativeStackNavigator, NativeStackNavigationOptions } from 'react-native-screens/native-stack';

rns.native-stack.mp4

This one is the output when I import { createNativeStackNavigator, NativeStackNavigationOptions } from '@react-navigation/native-stack';

react-nav.native-stack.mp4

Also, I tried to see Test1509 it seems to fix the issue for vertical swipe without specifying on the parent screen, but if you try removing the swipeDirection from the second screen too, the default horizontal swipe for back doesn't work, producing the same result as first video.

Also, please see second video, it should be noted that the swipe doesn't work on the opened modal (perfect) but it doesn't also work on the standalone screen.

[kkafar]

@hurali97
Thank you for your contribution & noticing bugs 👏 For now, we decided to go with different solution: #1521 as it does not introduce additional conditions & (hopefully) is more reliable. I would love to hear from you, if the changes introduced in #1521 finally solve the problem.

Edit:

Also, I tried to see Test1509 it seems to fix the issue for vertical swipe without specifying on the parent screen, but if you try removing the swipeDirection from the second screen too, the default horizontal swipe for back doesn't work, producing the same result as first video.

To have "default horizontal swipe working" you would need to set fullScreenSwipeEnabled: true on ScreenB. Otherwise your only option to go back (beside back button) is 'swipe-from-edge-gesture`.

Also please keep in mind, that screen prop names in react-native-screens/native-stack & @react-navigation/native-stack differ! For example you have fullScreenSwipeEnabled for screens native stack, and fullScreenGestureEnabled for native stack from navigation.