feat(Android): add ios like slide animation (software-mansion#1945)

## Description This PR adds iOS like slide in animation to Android. But why? iOS like slide in animations are extremely popular in Android apps. Twitter, Telegram, Slack and many other apps stack navigation resembles or flat out copies iOS behaviour. `react-navigation` non native stack gives us ability to have reimplementation of iOS slide in behavior. However, `expo-router` doesn't support non native stack. Besides that if you want native performance and iOS like behavior you are kinda stuck 🤷. ## Changes   - [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
WiseOwlTech · Oct 9, 2024 · b1b85e4 · b1b85e4
1 parent 9729f74
commit b1b85e4
Show file tree

Hide file tree

Showing 17 changed files with 43 additions and 6 deletions.
diff --git a/Example/src/screens/Animations.tsx b/Example/src/screens/Animations.tsx
@@ -52,6 +52,7 @@ const MainScreen = ({
           'slide_from_bottom',
           'slide_from_right',
           'slide_from_left',
+          'ios',
           'none',
         ]}
       />

diff --git a/Example/src/screens/Events.tsx b/Example/src/screens/Events.tsx
@@ -83,6 +83,7 @@ const MainScreen = ({
           'slide_from_bottom',
           'slide_from_right',
           'slide_from_left',
+          'ios',
           'none',
         ]}
       />

diff --git a/android/src/main/java/com/swmansion/rnscreens/Screen.kt b/android/src/main/java/com/swmansion/rnscreens/Screen.kt
@@ -272,7 +272,7 @@ class Screen constructor(context: ReactContext?) : FabricEnabledViewGroup(contex
     }
 
     enum class StackAnimation {
-        DEFAULT, NONE, FADE, SLIDE_FROM_BOTTOM, SLIDE_FROM_RIGHT, SLIDE_FROM_LEFT, FADE_FROM_BOTTOM
+        DEFAULT, NONE, FADE, SLIDE_FROM_BOTTOM, SLIDE_FROM_RIGHT, SLIDE_FROM_LEFT, FADE_FROM_BOTTOM, IOS
     }
 
     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
@@ -144,6 +144,7 @@ class ScreenStack(context: Context?) : ScreenContainer(context) {
                             R.anim.rns_slide_in_from_bottom, 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)
                     }
                 } else {
                     when (stackAnimation) {
@@ -156,6 +157,7 @@ class ScreenStack(context: Context?) : ScreenContainer(context) {
                             R.anim.rns_no_animation_medium, 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)
                     }
                 }
             }
@@ -331,6 +333,7 @@ class ScreenStack(context: Context?) : ScreenContainer(context) {
 
         private fun needsDrawReordering(fragmentWrapper: ScreenFragmentWrapper): Boolean =
             fragmentWrapper.screen.stackAnimation === StackAnimation.SLIDE_FROM_BOTTOM ||
-                fragmentWrapper.screen.stackAnimation === StackAnimation.FADE_FROM_BOTTOM
+                fragmentWrapper.screen.stackAnimation === StackAnimation.FADE_FROM_BOTTOM ||
+                  fragmentWrapper.screen.stackAnimation === StackAnimation.IOS
     }
 }
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt
@@ -87,6 +87,7 @@ class ScreenViewManager : ViewGroupManager<Screen>(), RNSScreenManagerInterface<
             "slide_from_left" -> Screen.StackAnimation.SLIDE_FROM_LEFT
             "slide_from_bottom" -> Screen.StackAnimation.SLIDE_FROM_BOTTOM
             "fade_from_bottom" -> Screen.StackAnimation.FADE_FROM_BOTTOM
+            "ios" -> Screen.StackAnimation.IOS
             else -> throw JSApplicationIllegalArgumentException("Unknown animation type $animation")
         }
     }

diff --git a/android/src/main/res/base/anim/rns_slide_in_from_left_ios.xml b/android/src/main/res/base/anim/rns_slide_in_from_left_ios.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_slide_in_from_right_ios.xml b/android/src/main/res/base/anim/rns_slide_in_from_right_ios.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_slide_out_to_left_ios.xml b/android/src/main/res/base/anim/rns_slide_out_to_left_ios.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_slide_out_to_right_ios.xml b/android/src/main/res/base/anim/rns_slide_out_to_right_ios.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/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -203,6 +203,7 @@ 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 (Android only, resolves to default transition on iOS)
+- `"ios"` - iOS like slide in animation (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
@@ -27,9 +27,10 @@ + (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::Slide_from_left:
+    case react::RNSScreenStackAnimation::Ios:
     case react::RNSScreenStackAnimation::Default:
       return RNSScreenStackAnimationDefault;
     case react::RNSScreenStackAnimation::Flip:

diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
@@ -1543,6 +1543,7 @@ @implementation RCTConvert (RNSScreen)
       @"slide_from_bottom" : @(RNSScreenStackAnimationSlideFromBottom),
       @"slide_from_right" : @(RNSScreenStackAnimationDefault),
       @"slide_from_left" : @(RNSScreenStackAnimationDefault),
+      @"ios" : @(RNSScreenStackAnimationDefault),
     }),
     RNSScreenStackAnimationDefault,
     integerValue)

diff --git a/native-stack/README.md b/native-stack/README.md
@@ -287,6 +287,7 @@ 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 (Android only, resolves to default transition on iOS)
+- `ios` - iOS like slide in animation (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
@@ -50,7 +50,8 @@ type StackAnimation =
   | 'slide_from_right'
   | 'slide_from_left'
   | 'slide_from_bottom'
-  | 'fade_from_bottom';
+  | 'fade_from_bottom'
+  | 'ios';
 
 type SwipeDirection = 'vertical' | 'horizontal';
 

diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
@@ -391,6 +391,7 @@ 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 (Android only, resolves to default transition on iOS)
+   * - "ios" - iOS like slide in animation (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
@@ -33,7 +33,8 @@ export type StackAnimationTypes =
   | 'simple_push'
   | 'slide_from_bottom'
   | 'slide_from_right'
-  | 'slide_from_left';
+  | 'slide_from_left'
+  | 'ios';
 export type BlurEffectTypes =
   | 'extraLight'
   | 'light'
@@ -319,6 +320,7 @@ 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 (Android only, resolves to default transition on iOS)
+   * - "ios" - iOS like slide in animation (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
@@ -10,7 +10,8 @@ enum class StackAnimation {
   FADE,
   SIMPLE_FROM_BOTTOM,
   SLIDE_FROM_RIGHT,
-  SLIDE_FROM_LEFT
+  SLIDE_FROM_LEFT,
+  IOS
 };
 
 enum class ReplaceAnimation { PUSH, POP };
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,6 +52,7 @@ const MainScreen = ({ @@
               'slide_from_bottom',
               'slide_from_right',
               'slide_from_left',
+              'ios',
               'none',
             ]}
           />
@@ Expand Down @@