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

chrispader · kkafar · commit 6bdb770ffbc6 · 2024-10-25T11:32:25.000+02:00
## Description  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   ## Test code and steps to reproduce  ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation:  - [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 (cherry picked from commit f80281b)
diff --git a/android/src/main/java/com/swmansion/rnscreens/Screen.kt b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
@@ -348,6 +348,8 @@ class Screen(
         SLIDE_FROM_LEFT,
         FADE_FROM_BOTTOM,
         IOS,
+        IOS_FROM_RIGHT,
+        IOS_FROM_LEFT,
     }
 
     enum class ReplaceAnimation {
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt
@@ -160,7 +160,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) {
@@ -183,7 +185,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)
                     }
                 }
             }
@@ -370,6 +374,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
     }
 }
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt
@@ -103,6 +103,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")
             }
     }
diff --git a/android/src/main/res/base/anim/rns_ios_from_left_background_close.xml b/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%" />
diff --git a/android/src/main/res/base/anim/rns_ios_from_left_background_open.xml b/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%" />
diff --git a/android/src/main/res/base/anim/rns_ios_from_left_foreground_close.xml b/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%" />
diff --git a/android/src/main/res/base/anim/rns_ios_from_left_foreground_open.xml b/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%" />
diff --git a/android/src/main/res/base/anim/rns_ios_from_right_background_close.xml b/android/src/main/res/base/anim/rns_ios_from_right_background_close.xml
diff --git a/android/src/main/res/base/anim/rns_ios_from_right_background_open.xml b/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%" />
diff --git a/android/src/main/res/base/anim/rns_ios_from_right_foreground_close.xml b/android/src/main/res/base/anim/rns_ios_from_right_foreground_close.xml
diff --git a/android/src/main/res/base/anim/rns_ios_from_right_foreground_open.xml b/android/src/main/res/base/anim/rns_ios_from_right_foreground_open.xml
diff --git a/apps/src/screens/Animations.tsx b/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',
         ]}
       />
diff --git a/apps/src/screens/Events.tsx b/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',
         ]}
       />
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/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`
diff --git a/ios/RNSConvert.mm b/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;
diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
@@ -1557,6 +1557,8 @@ @implementation RCTConvert (RNSScreen)
       @"slide_from_right" : @(RNSScreenStackAnimationDefault),
       @"slide_from_left" : @(RNSScreenStackAnimationSlideFromLeft),
       @"ios" : @(RNSScreenStackAnimationDefault),
+      @"ios_from_right" : @(RNSScreenStackAnimationDefault),
+      @"ios_from_left" : @(RNSScreenStackAnimationSlideFromLeft),
     }),
     RNSScreenStackAnimationDefault,
     integerValue)
diff --git a/native-stack/README.md b/native-stack/README.md
@@ -302,7 +302,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`.
diff --git a/src/fabric/ScreenNativeComponent.ts b/src/fabric/ScreenNativeComponent.ts
@@ -51,7 +51,9 @@ type StackAnimation =
   | 'slide_from_left'
   | 'slide_from_bottom'
   | 'fade_from_bottom'
-  | 'ios';
+  | 'ios'
+  | 'ios_from_right'
+  | 'ios_from_left';
 
 type SwipeDirection = 'vertical' | 'horizontal';
 
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
@@ -418,7 +418,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'];
diff --git a/src/types.tsx b/src/types.tsx
@@ -38,7 +38,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'
@@ -340,7 +342,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;
diff --git a/windows/RNScreens/Screen.h b/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 };

Original file line number	Diff line number	Diff line change
`@@ -348,6 +348,8 @@ class Screen(`
`348`	`348`	`SLIDE_FROM_LEFT,`
`349`	`349`	`FADE_FROM_BOTTOM,`
`350`	`350`	`IOS,`
	`351`	`+ IOS_FROM_RIGHT,`
	`352`	`+ IOS_FROM_LEFT,`
`351`	`353`	`}`
`352`	`354`
`353`	`355`	`enum class ReplaceAnimation {`
Original file line number	Diff line number	Diff line change
`@@ -160,7 +160,9 @@ class ScreenStack(`
`160`	`160`	`R.anim.rns_no_animation_medium,`
`161`	`161`	`)`
`162`	`162`	`StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_fade_from_bottom, R.anim.rns_no_animation_350)`
`163`		`- StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_slide_in_from_right_ios, R.anim.rns_slide_out_to_left_ios)`
	`163`	`+ StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_open, R.anim.rns_ios_from_right_background_open)`
	`164`	`+ StackAnimation.IOS_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_open, R.anim.rns_ios_from_right_background_open)`
	`165`	`+ StackAnimation.IOS_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_ios_from_left_foreground_open, R.anim.rns_ios_from_left_background_open)`
`164`	`166`	`}`
`165`	`167`	`} else {`
`166`	`168`	`when (stackAnimation) {`
`@@ -183,7 +185,9 @@ class ScreenStack(`
`183`	`185`	`R.anim.rns_slide_out_to_bottom,`
`184`	`186`	`)`
`185`	`187`	`StackAnimation.FADE_FROM_BOTTOM -> it.setCustomAnimations(R.anim.rns_no_animation_250, R.anim.rns_fade_to_bottom)`
`186`		`- StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_slide_in_from_left_ios, R.anim.rns_slide_out_to_right_ios)`
	`188`	`+ StackAnimation.IOS -> it.setCustomAnimations(R.anim.rns_ios_from_right_foreground_close, R.anim.rns_ios_from_right_background_close)`
	`189`	`+ StackAnimation.IOS_FROM_RIGHT -> it.setCustomAnimations(R.anim.rns_ios_from_right_background_close, R.anim.rns_ios_from_right_foreground_close)`
	`190`	`+ StackAnimation.IOS_FROM_LEFT -> it.setCustomAnimations(R.anim.rns_ios_from_left_background_close, R.anim.rns_ios_from_left_foreground_close)`
`187`	`191`	`}`
`188`	`192`	`}`
`189`	`193`	`}`
`@@ -370,6 +374,8 @@ class ScreenStack(`
`370`	`374`	`Build.VERSION.SDK_INT >= 33 \|\|`
`371`	`375`	`fragmentWrapper.screen.stackAnimation === StackAnimation.SLIDE_FROM_BOTTOM \|\|`
`372`	`376`	`fragmentWrapper.screen.stackAnimation === StackAnimation.FADE_FROM_BOTTOM \|\|`
`373`		`- fragmentWrapper.screen.stackAnimation === StackAnimation.IOS`
	`377`	`+ fragmentWrapper.screen.stackAnimation === StackAnimation.IOS \|\|`
	`378`	`+ fragmentWrapper.screen.stackAnimation === StackAnimation.IOS_FROM_RIGHT \|\|`
	`379`	`+ fragmentWrapper.screen.stackAnimation === StackAnimation.IOS_FROM_LEFT`
`374`	`380`	`}`
`375`	`381`	`}`
Original file line number	Diff line number	Diff line change
`@@ -103,6 +103,8 @@ open class ScreenViewManager :`
`103`	`103`	`"slide_from_bottom" -> Screen.StackAnimation.SLIDE_FROM_BOTTOM`
`104`	`104`	`"fade_from_bottom" -> Screen.StackAnimation.FADE_FROM_BOTTOM`
`105`	`105`	`"ios" -> Screen.StackAnimation.IOS`
	`106`	`+ "ios_from_right" -> Screen.StackAnimation.IOS_FROM_RIGHT`
	`107`	`+ "ios_from_left" -> Screen.StackAnimation.IOS_FROM_LEFT`
`106`	`108`	`else -> throw JSApplicationIllegalArgumentException("Unknown animation type $animation")`
`107`	`109`	`}`
`108`	`110`	`}`