feat(Android): add ios like ios_from_left slide animation (#2328)

## Description

<!--
Description and motivation for this PR.

Include Fixes #<number> if this is fixing some issue.

Fixes # .
-->

This PR is based on
#1945 and
implements the `ios` animation in the reverse direction (slide in from
left to right, slide out from right to left)

## Changes

<!--
Please describe things you've changed here, make a **high level**
overview, if change is simple you can omit this section.

For example:

- Updated `about.md` docs

-->

<!--

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before

### After

-->

## Test code and steps to reproduce

<!--
Please include code that can be used to test this change and short
description how this example should work.
This snippet should be as minimal as possible and ready to be pasted
into editor (don't exclude exports or remove "not important" parts of
reproduction example)
-->

## Checklist

- [x] Included code example that can be used to test this change
- [x] Updated TS types
- [x] Updated documentation: <!-- For adding new props to native-stack
-->
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [x]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [x] Ensured that CI passes

android/src/main/java/com/swmansion/rnscreens/Screen.kt

@@ -436,6 +436,8 @@ class Screen(
         SLIDE_FROM_LEFT,
         FADE_FROM_BOTTOM,
         IOS,
+        IOS_FROM_RIGHT,
+        IOS_FROM_LEFT,
     }
 
     enum class ReplaceAnimation {

android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt

@@ -182,7 +182,9 @@ class ScreenStack(
                                 R.anim.rns_no_animation_medium,
                             )
                         StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_fade_from_bottom, R.anim.rns_no_animation_350)
-                        StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_slide_in_from_right_ios, R.anim.rns_slide_out_to_left_ios)
+                        StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_open, R.anim.rns_ios_from_right_background_open)
+                        StackAnimation.IOS_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_open, R.anim.rns_ios_from_right_background_open)
+                        StackAnimation.IOS_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_ios_from_left_foreground_open, R.anim.rns_ios_from_left_background_open)
                     }
                 } else {
                     when (stackAnimation) {
@@ -220,7 +222,9 @@ class ScreenStack(
                                 R.anim.rns_slide_out_to_bottom,
                             )
                         StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_no_animation_250, R.anim.rns_fade_to_bottom)
-                        StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_slide_in_from_left_ios, R.anim.rns_slide_out_to_right_ios)
+                        StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_close, R.anim.rns_ios_from_right_background_close)
+                        StackAnimation.IOS_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_ios_from_right_background_close, R.anim.rns_ios_from_right_foreground_close)
+                        StackAnimation.IOS_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_ios_from_left_background_close, R.anim.rns_ios_from_left_foreground_close)
                     }
                 }
             }
@@ -413,6 +417,8 @@ class ScreenStack(
             Build.VERSION.SDK_INT >= 33 ||
                 fragmentWrapper.screen.stackAnimation === StackAnimation.SLIDE_FROM_BOTTOM ||
                 fragmentWrapper.screen.stackAnimation === StackAnimation.FADE_FROM_BOTTOM ||
-                fragmentWrapper.screen.stackAnimation === StackAnimation.IOS
+                fragmentWrapper.screen.stackAnimation === StackAnimation.IOS ||
+                fragmentWrapper.screen.stackAnimation === StackAnimation.IOS_FROM_RIGHT ||
+                fragmentWrapper.screen.stackAnimation === StackAnimation.IOS_FROM_LEFT
     }
 }

android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt

@@ -143,6 +143,8 @@ open class ScreenViewManager :
                 "slide_from_bottom" -> Screen.StackAnimation.SLIDE_FROM_BOTTOM
                 "fade_from_bottom" -> Screen.StackAnimation.FADE_FROM_BOTTOM
                 "ios" -> Screen.StackAnimation.IOS
+                "ios_from_right" -> Screen.StackAnimation.IOS_FROM_RIGHT
+                "ios_from_left" -> Screen.StackAnimation.IOS_FROM_LEFT
                 else -> throw JSApplicationIllegalArgumentException("Unknown animation type $animation")
             }
     }

android/src/main/res/base/anim/rns_ios_from_left_background_close.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_shortAnimTime"
+    android:fromXDelta="30%"
+    android:toXDelta="0%" />

android/src/main/res/base/anim/rns_slide_out_to_left_ios.xml → android/src/main/res/base/anim/rns_ios_from_left_background_open.xml

@@ -2,4 +2,4 @@
 <translate xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="@android:integer/config_shortAnimTime"
     android:fromXDelta="0%"
-    android:toXDelta="-30%"/>
+    android:toXDelta="30%" />

android/src/main/res/base/anim/rns_ios_from_left_foreground_close.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_shortAnimTime"
+    android:interpolator="@android:interpolator/accelerate_decelerate"
+    android:fromXDelta="0%"
+    android:toXDelta="-100%" />

android/src/main/res/base/anim/rns_ios_from_left_foreground_open.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_shortAnimTime"
+    android:interpolator="@android:interpolator/accelerate_decelerate"
+    android:fromXDelta="-100%"
+    android:toXDelta="0%" />

android/src/main/res/base/anim/rns_ios_from_right_background_open.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_shortAnimTime"
+    android:fromXDelta="0%"
+    android:toXDelta="-30%" />

apps/src/screens/Animations.tsx

@@ -53,6 +53,8 @@ const MainScreen = ({
           'slide_from_right',
           'slide_from_left',
           'ios',
+          'ios_from_right',
+          'ios_from_left',
           'none',
         ]}
       />

apps/src/screens/Events.tsx

@@ -84,6 +84,8 @@ const MainScreen = ({
           'slide_from_right',
           'slide_from_left',
           'ios',
+          'ios_from_right',
+          'ios_from_left',
           'none',
         ]}
       />

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

@@ -210,7 +210,9 @@ Allows for the customization of how the given screen should appear/disappear whe
 - `"slide_from_bottom"` - slide in the new screen from bottom to top
 - `"slide_from_right"` - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
 - `"slide_from_left"` - slide in the new screen from left to right
-- `"ios"` - iOS like slide in animation (Android only, resolves to default transition on iOS)
+- `"ios"` - @deprecated iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS) (will be removed in v4.0.0 in favor of `ios_from_right`)
+- `"ios_from_right"` - iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS)
+- `"ios_from_left"` - iOS like slide in animation. pushes in the new screen from left to right (Android only, resolves to default transition on iOS)
 - `"none"` – the screen appears/disappears without an animation
 
 ### `stackPresentation`

ios/RNSConvert.mm

@@ -51,12 +51,15 @@ + (RNSScreenStackPresentation)RNSScreenStackPresentationFromCppEquivalent:
 + (RNSScreenStackAnimation)RNSScreenStackAnimationFromCppEquivalent:(react::RNSScreenStackAnimation)stackAnimation
 {
   switch (stackAnimation) {
-    // these three are intentionally grouped
+    // these four are intentionally grouped
     case react::RNSScreenStackAnimation::Slide_from_right:
     case react::RNSScreenStackAnimation::Ios:
+    case react::RNSScreenStackAnimation::Ios_from_right:
     case react::RNSScreenStackAnimation::Default:
       return RNSScreenStackAnimationDefault;
+    // these two are intentionally grouped
     case react::RNSScreenStackAnimation::Slide_from_left:
+    case react::RNSScreenStackAnimation::Ios_from_left:
       return RNSScreenStackAnimationSlideFromLeft;
     case react::RNSScreenStackAnimation::Flip:
       return RNSScreenStackAnimationFlip;

ios/RNSScreen.mm

@@ -1937,6 +1937,8 @@ @implementation RCTConvert (RNSScreen)
       @"slide_from_right" : @(RNSScreenStackAnimationDefault),
       @"slide_from_left" : @(RNSScreenStackAnimationSlideFromLeft),
       @"ios" : @(RNSScreenStackAnimationDefault),
+      @"ios_from_right" : @(RNSScreenStackAnimationDefault),
+      @"ios_from_left" : @(RNSScreenStackAnimationSlideFromLeft),
     }),
     RNSScreenStackAnimationDefault,
     integerValue)

native-stack/README.md

@@ -304,7 +304,9 @@ How the given screen should appear/disappear when pushed or popped at the top of
 - `slide_from_bottom` – performs a slide from bottom animation
 - `slide_from_right` - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
 - `slide_from_left` - slide in the new screen from left to right
-- `ios` - iOS like slide in animation (Android only, resolves to default transition on iOS)
+- `"ios"` - @deprecated iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS)  (will be removed in v4.0.0 in favor of `ios_from_right`)
+- `"ios_from_right"` - iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS)
+- `"ios_from_left"` - iOS like slide in animation. pushes in the new screen from left to right (Android only, resolves to default transition on iOS)
 - `none` - the screen appears/disappears without an animation.
 
 Defaults to `default`.

src/fabric/ScreenNativeComponent.ts

@@ -56,7 +56,9 @@ type StackAnimation =
   | 'slide_from_left'
   | 'slide_from_bottom'
   | 'fade_from_bottom'
-  | 'ios';
+  | 'ios'
+  | 'ios_from_right'
+  | 'ios_from_left';
 
 type SwipeDirection = 'vertical' | 'horizontal';
 

src/native-stack/types.tsx

@@ -440,7 +440,9 @@ export type NativeStackNavigationOptions = {
    * - "slide_from_bottom" – performs a slide from bottom animation
    * - "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
    * - "slide_from_left" - slide in the new screen from left to right
-   * - "ios" - iOS like slide in animation (Android only, resolves to default transition on iOS)
+   * - "ios" - @deprecated iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS) (will be removed in v4.0.0 in favor of `ios_from_right`)
+   * - "ios_from_right" - iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS)
+   * - "ios_from_left" - iOS like slide in animation. pushes in the new screen from left to right (Android only, resolves to default transition on iOS)
    * - "none" – the screen appears/dissapears without an animation
    */
   stackAnimation?: ScreenProps['stackAnimation'];

src/types.tsx

@@ -39,7 +39,9 @@ export type StackAnimationTypes =
   | 'slide_from_bottom'
   | 'slide_from_right'
   | 'slide_from_left'
-  | 'ios';
+  | 'ios'
+  | 'ios_from_right'
+  | 'ios_from_left';
 export type BlurEffectTypes =
   | 'extraLight'
   | 'light'
@@ -365,7 +367,9 @@ export interface ScreenProps extends ViewProps {
    * - `slide_from_bottom` – performs a slide from bottom animation
    * - "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
    * - "slide_from_left" - slide in the new screen from left to right
-   * - "ios" - iOS like slide in animation (Android only, resolves to default transition on iOS)
+   * - "ios" - @deprecated iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS) (will be removed in v4.0.0 in favor of `ios_from_right`)
+   * - "ios_from_right" - iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS)
+   * - "ios_from_left" - iOS like slide in animation. pushes in the new screen from left to right (Android only, resolves to default transition on iOS)
    * - "none" – the screen appears/dissapears without an animation
    */
   stackAnimation?: StackAnimationTypes;

windows/RNScreens/Screen.h

@@ -11,7 +11,9 @@ enum class StackAnimation {
   SIMPLE_FROM_BOTTOM,
   SLIDE_FROM_RIGHT,
   SLIDE_FROM_LEFT,
-  IOS
+  IOS,
+  IOS_FROM_RIGHT,
+  IOS_FROM_LEFT
 };
 
 enum class ReplaceAnimation { PUSH, POP };