feat(iOS): Add slide_from_left transition

[kirillzyusko]

Description

Before slide_from_left transition was resolved to default transition on iOS. Now this transition will make screen to appear from left side to right.

Changes

• updated docs;
• added RNSScreenStackAnimationSlideFromLeft to enum value;
• added animateSlideFromLeftWithTransitionContext method;
• added support for reverse gestures (from right to left to close a screen);

Screenshots / GIFs

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-03-05.at.17.44.39.mp4

Test code and steps to reproduce

• Open Animations screen
• select slide_from_left animation
• open "New screen"
• if you want to test gesture for dismissing the screen, you'll need to specify <Stack.Screen name="Screen" options={{ customAnimationOnSwipe: true }}>

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

[kirillzyusko]

@tboba I see android build can not be created due to heap size - I don't know if increasing heap size in gradle properties will help or we should simply switch to macos-14 machine that offers more space and resources by default?

Anyway this failure is not because of my changes, since I modified only iOS part 😅

[tboba]

@kirillzyusko Yep, you're right - in Screens we have some E2E test case that randomly fails, because of the event when user clicks back button 😅
Thanks for the contribution! Let me quickly check those changes.

[tboba]

Just left some small comments there. Great job!

[tboba]

Why is this needed? I can't see any issues on RTL mode with and without this case 🤔

[kirillzyusko]

@tboba this is needed to activate the gesture from the right side if "slide_from_left" transition is used.

But I guess this condition needs to be slightly modified to support gesture from left side if RTL is active, right?

[tboba]

Yeah, probably it needs to be modified, since on RTL, the default behavior to dismiss the screen is to swipe from the right side, but unfortunately I can't make the reversed slide work 🤔 For some reason, I can still dismiss that screen from the left side. Does it work for you?

8mb.video-TVO-VuQVHAmi.mp4

[kirillzyusko]

Yeah, probably it needs to be modified, since on RTL, the default behavior to dismiss the screen is to swipe from the right side, but unfortunately I can't make the reversed slide work 🤔

@tboba I think in normal mode (not RTL) if "slide_from_left" is specified, then the gesture to dismiss should be "right_to_left".

If RTL is active, then we reverse everything - so "slide_from_left" will actually move screen from right to left (as default iOS transition) and the gesture for dismissing should be from left corner (saying shorter - if RTL + "slide_from_left" is specified, then it should work as usual/default iOS transition, because it's kind of double inversion).

Is my understanding correct?

On your video - did you specify customAnimationOnSwipe property? Because without this property you're right - the gesture to close should start from left corner and should have default transition (even if custom transition was specified).

[kirillzyusko]

On your video - did you specify customAnimationOnSwipe property?

I'm asking because this condition can be executed only if customAnimationOnSwipe specified.

  // Now we're dealing with RNSScreenEdgeGestureRecognizer (or _UIParallaxTransitionPanGestureRecognizer)
  if (topScreen.customAnimationOnSwipe && [RNSScreenStackAnimator isCustomAnimation:topScreen.stackAnimation]) {

[kirillzyusko]

@tboba I re-worked this condition according to my comment - feel free to test it 🙌

I also added named variables to simplify condition and made it more readable 😊

[tboba]

Great, I'll try to test them today! Thanks 🙌

If RTL is active, then we reverse everything - so "slide_from_left" will actually move screen from right to left (as default iOS transition) and the gesture for dismissing should be from left corner (saying shorter - if RTL + "slide_from_left" is specified, then it should work as usual/default iOS transition, because it's kind of double inversion).

Yep, you're right - currently, the default animation comes from the right side to the left and is rotated when user is in RTL mode - I think in slide_to_left transition it should be opposite!
I also forgot about the customAnimationOnSwipe prop 😅 I'll check it out 👍

[kirillzyusko]

@tboba tests are failing because ANR popup is shown:

I think if you want to make your tests more reliable you should follow this guide https://wix.github.io/Detox/docs/19.x/introduction/android/#8-test-butler-support-optional

I added it my RNKC package and Android tests are more stable now than iOS 😂 Let me know if you need my help - I can try to submit a PR with a fix 👀

[tboba]

@kirillzyusko Yeah, sure! I didn't know about a Test Butler yet, so if you think this may help our CIs, and you have some free time, then why not 🙌

[kirillzyusko]

@tboba cool, will handle it in separate PR then 👀

[tboba]

@kirillzyusko Since PR with CI is already merged, could you merge main to this PR? 🙏

[kirillzyusko]

Since PR with CI is already merged, could you merge main to this PR? 🙏

@tboba just rebased it 👀

[tboba]

LGTM! Great work 🎉