From 6d110d64356309ebac4d64e22d5b1f16b98c36bb Mon Sep 17 00:00:00 2001
From: jiong-shen-cb <70784786+jiong-shen-cb@users.noreply.github.com>
Date: Mon, 23 Nov 2020 06:04:12 -0800
Subject: [PATCH] feat: add slide animations on Android (#648)
Added `slide_from_left` and `slide_from_right` to the list of available transition animations on Android. They are mapped to default transition on iOS. Also, the ordering of the screens adding/removing in `ScreenStack.java` was changed because the custom animations need to be set first before any screens are added/removed.
---
README.md | 2 +
TestsExample/src/Test648.js | 46 +++++++++++
.../java/com/swmansion/rnscreens/Screen.java | 4 +-
.../com/swmansion/rnscreens/ScreenStack.java | 81 ++++++++++++-------
.../rnscreens/ScreenViewManager.java | 4 +
.../main/res/anim/rns_slide_in_from_left.xml | 5 ++
.../main/res/anim/rns_slide_in_from_right.xml | 5 ++
.../main/res/anim/rns_slide_out_to_left.xml | 5 ++
.../main/res/anim/rns_slide_out_to_right.xml | 5 ++
createNativeStackNavigator/README.md | 2 +
ios/RNSScreen.m | 2 +
native-stack/README.md | 2 +
src/index.d.ts | 10 ++-
src/native-stack/types.tsx | 2 +
14 files changed, 145 insertions(+), 30 deletions(-)
create mode 100644 TestsExample/src/Test648.js
create mode 100644 android/src/main/res/anim/rns_slide_in_from_left.xml
create mode 100644 android/src/main/res/anim/rns_slide_in_from_right.xml
create mode 100644 android/src/main/res/anim/rns_slide_out_to_left.xml
create mode 100644 android/src/main/res/anim/rns_slide_out_to_right.xml
diff --git a/README.md b/README.md
index f57e7db5a..43172103e 100644
--- a/README.md
+++ b/README.md
@@ -128,6 +128,8 @@ Allows for the customization of how the given screen should appear/disappear whe
- `"default"` – uses a platform default animation
- `"fade"` – fades screen in or out
- `"flip"` – flips the screen, requires `stackPresentation: "modal"` (iOS only)
+- `"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)
- `"none"` – the screen appears/disappears without an animation
#### `stackPresentation`
diff --git a/TestsExample/src/Test648.js b/TestsExample/src/Test648.js
new file mode 100644
index 000000000..c8def6500
--- /dev/null
+++ b/TestsExample/src/Test648.js
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Button, ScrollView } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+
+const AppStack = createNativeStackNavigator();
+
+export default function App() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+function First({navigation}) {
+ return (
+
+
+ );
+}
+
+function Second({navigation}) {
+ return (
+
+
+ );
+}
diff --git a/android/src/main/java/com/swmansion/rnscreens/Screen.java b/android/src/main/java/com/swmansion/rnscreens/Screen.java
index e9ee6b14d..ae2353385 100644
--- a/android/src/main/java/com/swmansion/rnscreens/Screen.java
+++ b/android/src/main/java/com/swmansion/rnscreens/Screen.java
@@ -28,7 +28,9 @@ public enum StackPresentation {
public enum StackAnimation {
DEFAULT,
NONE,
- FADE
+ FADE,
+ SLIDE_FROM_RIGHT,
+ SLIDE_FROM_LEFT
}
public enum ReplaceAnimation {
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java
index 81f0e5da4..7d18d5880 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java
@@ -143,12 +143,6 @@ protected boolean hasScreen(ScreenFragment screenFragment) {
@Override
protected void performUpdate() {
- // remove all screens previously on stack
- for (ScreenStackFragment screen : mStack) {
- if (!mScreenFragments.contains(screen) || mDismissed.contains(screen)) {
- getOrCreateTransaction().remove(screen);
- }
- }
// When going back from a nested stack with a single screen on it, we may hit an edge case
// when all screens are dismissed and no screen is to be displayed on top. We need to gracefully
@@ -171,26 +165,7 @@ protected void performUpdate() {
}
}
- for (ScreenStackFragment screen : mScreenFragments) {
- // detach all screens that should not be visible
- if (screen != newTop && screen != belowTop && !mDismissed.contains(screen)) {
- getOrCreateTransaction().remove(screen);
- }
- }
- // attach "below top" screen if set
- if (belowTop != null && !belowTop.isAdded()) {
- final ScreenStackFragment top = newTop;
- getOrCreateTransaction().add(getId(), belowTop).runOnCommit(new Runnable() {
- @Override
- public void run() {
- top.getScreen().bringToFront();
- }
- });
- }
-
- if (newTop != null && !newTop.isAdded()) {
- getOrCreateTransaction().add(getId(), newTop);
- }
+ boolean customAnimation = false;
if (!mStack.contains(newTop)) {
// if new top screen wasn't on stack we do "open animation" so long it is not the very first screen on stack
@@ -209,12 +184,24 @@ public void run() {
case FADE:
transition = FragmentTransaction.TRANSIT_FRAGMENT_FADE;
break;
+ case SLIDE_FROM_RIGHT:
+ customAnimation = true;
+ getOrCreateTransaction().setCustomAnimations(R.anim.rns_slide_in_from_right, R.anim.rns_slide_out_to_left);
+ break;
+ case SLIDE_FROM_LEFT:
+ customAnimation = true;
+ getOrCreateTransaction().setCustomAnimations(R.anim.rns_slide_in_from_left, R.anim.rns_slide_out_to_right);
+ break;
+ }
+
+ if (!customAnimation) {
+ getOrCreateTransaction().setTransition(transition);
}
- getOrCreateTransaction().setTransition(transition);
}
} else if (mTopScreen != null && !mTopScreen.equals(newTop)) {
// otherwise if we are performing top screen change we do "back animation"
int transition = FragmentTransaction.TRANSIT_FRAGMENT_CLOSE;
+
switch (mTopScreen.getScreen().getStackAnimation()) {
case NONE:
transition = FragmentTransaction.TRANSIT_NONE;
@@ -222,8 +209,46 @@ public void run() {
case FADE:
transition = FragmentTransaction.TRANSIT_FRAGMENT_FADE;
break;
+ case SLIDE_FROM_RIGHT:
+ customAnimation = true;
+ getOrCreateTransaction().setCustomAnimations(R.anim.rns_slide_in_from_left, R.anim.rns_slide_out_to_right);
+ break;
+ case SLIDE_FROM_LEFT:
+ customAnimation = true;
+ getOrCreateTransaction().setCustomAnimations(R.anim.rns_slide_in_from_right, R.anim.rns_slide_out_to_left);
+ break;
+ }
+
+ if (!customAnimation) {
+ getOrCreateTransaction().setTransition(transition);
+ }
+ }
+
+ // remove all screens previously on stack
+ for (ScreenStackFragment screen : mStack) {
+ if (!mScreenFragments.contains(screen) || mDismissed.contains(screen)) {
+ getOrCreateTransaction().remove(screen);
+ }
+ }
+
+ for (ScreenStackFragment screen : mScreenFragments) {
+ // detach all screens that should not be visible
+ if (screen != newTop && screen != belowTop && !mDismissed.contains(screen)) {
+ getOrCreateTransaction().remove(screen);
}
- getOrCreateTransaction().setTransition(transition);
+ }
+ // attach "below top" screen if set
+ if (belowTop != null && !belowTop.isAdded()) {
+ final ScreenStackFragment top = newTop;
+ getOrCreateTransaction().add(getId(), belowTop).runOnCommit(new Runnable() {
+ @Override
+ public void run() {
+ top.getScreen().bringToFront();
+ }
+ });
+ }
+ if (newTop != null && !newTop.isAdded()) {
+ getOrCreateTransaction().add(getId(), newTop);
}
mTopScreen = newTop;
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.java b/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.java
index b3df81e15..bc02485b4 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.java
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.java
@@ -67,6 +67,10 @@ public void setStackAnimation(Screen view, String animation) {
view.setStackAnimation(Screen.StackAnimation.NONE);
} else if ("fade".equals(animation)) {
view.setStackAnimation(Screen.StackAnimation.FADE);
+ } else if ("slide_from_right".equals(animation)) {
+ view.setStackAnimation(Screen.StackAnimation.SLIDE_FROM_RIGHT);
+ } else if ("slide_from_left".equals(animation)) {
+ view.setStackAnimation(Screen.StackAnimation.SLIDE_FROM_LEFT);
}
}
diff --git a/android/src/main/res/anim/rns_slide_in_from_left.xml b/android/src/main/res/anim/rns_slide_in_from_left.xml
new file mode 100644
index 000000000..939110f54
--- /dev/null
+++ b/android/src/main/res/anim/rns_slide_in_from_left.xml
@@ -0,0 +1,5 @@
+
+
diff --git a/android/src/main/res/anim/rns_slide_in_from_right.xml b/android/src/main/res/anim/rns_slide_in_from_right.xml
new file mode 100644
index 000000000..428eb9b71
--- /dev/null
+++ b/android/src/main/res/anim/rns_slide_in_from_right.xml
@@ -0,0 +1,5 @@
+
+
diff --git a/android/src/main/res/anim/rns_slide_out_to_left.xml b/android/src/main/res/anim/rns_slide_out_to_left.xml
new file mode 100644
index 000000000..400a202c3
--- /dev/null
+++ b/android/src/main/res/anim/rns_slide_out_to_left.xml
@@ -0,0 +1,5 @@
+
+
diff --git a/android/src/main/res/anim/rns_slide_out_to_right.xml b/android/src/main/res/anim/rns_slide_out_to_right.xml
new file mode 100644
index 000000000..a00332bcd
--- /dev/null
+++ b/android/src/main/res/anim/rns_slide_out_to_right.xml
@@ -0,0 +1,5 @@
+
+
diff --git a/createNativeStackNavigator/README.md b/createNativeStackNavigator/README.md
index 6e3e41954..e265f8ef4 100644
--- a/createNativeStackNavigator/README.md
+++ b/createNativeStackNavigator/README.md
@@ -125,6 +125,8 @@ How the given screen should appear/disappear when pushed or popped at the top of
- `default` - Uses a platform default animation.
- `fade` - Fades screen in or out.
- `flip` – Flips the screen, requires stackPresentation: `modal` (iOS only).
+- `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)
- `none` - The screen appears/disappears without an animation.
Defaults to `default`.
diff --git a/ios/RNSScreen.m b/ios/RNSScreen.m
index 1eca1c11b..9ac4ce461 100644
--- a/ios/RNSScreen.m
+++ b/ios/RNSScreen.m
@@ -517,6 +517,8 @@ @implementation RCTConvert (RNSScreen)
@"none": @(RNSScreenStackAnimationNone),
@"fade": @(RNSScreenStackAnimationFade),
@"flip": @(RNSScreenStackAnimationFlip),
+ @"slide_from_right": @(RNSScreenStackAnimationDefault),
+ @"slide_from_left": @(RNSScreenStackAnimationDefault),
}), RNSScreenStackAnimationDefault, integerValue)
RCT_ENUM_CONVERTER(RNSScreenReplaceAnimation, (@{
diff --git a/native-stack/README.md b/native-stack/README.md
index 45305c747..5caa17db8 100644
--- a/native-stack/README.md
+++ b/native-stack/README.md
@@ -158,6 +158,8 @@ How the given screen should appear/disappear when pushed or popped at the top of
- `default` - Uses a platform default animation.
- `fade` - Fades screen in or out.
- `flip` – Flips the screen, requires stackPresentation: `modal` (iOS only).
+- `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)
- `none` - The screen appears/disappears without an animation.
Defaults to `default`.
diff --git a/src/index.d.ts b/src/index.d.ts
index a1f17e522..2d513c2ba 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -22,7 +22,13 @@ declare module 'react-native-screens' {
| 'containedTransparentModal'
| 'fullScreenModal'
| 'formSheet';
- export type StackAnimationTypes = 'default' | 'fade' | 'flip' | 'none';
+ export type StackAnimationTypes =
+ | 'default'
+ | 'fade'
+ | 'flip'
+ | 'none'
+ | 'slide_from_right'
+ | 'slide_from_left';
export type BlurEffectTypes =
| 'extraLight'
| 'light'
@@ -90,6 +96,8 @@ declare module 'react-native-screens' {
* @type "default" – uses a platform default animation
* @type "fade" – fades screen in or out
* @type "flip" – flips the screen, requires stackPresentation: "modal" (iOS only)
+ * @type "slide_from_right" - slide in the new screen from right to left (Android only, resolves to default transition on iOS)
+ * @type "slide_from_left" - slide in the new screen from left to right (Android only, resolves to default transition on iOS)
* @type "none" – the screen appears/dissapears without an animation
*/
stackAnimation?: StackAnimationTypes;
diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
index f91d56a60..6831eb7aa 100644
--- a/src/native-stack/types.tsx
+++ b/src/native-stack/types.tsx
@@ -222,6 +222,8 @@ export type NativeStackNavigationOptions = {
* - "default" – uses a platform default animation
* - "fade" – fades screen in or out
* - "flip" – flips the screen, requires stackPresentation: "modal" (iOS only)
+ * - "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)
* - "none" – the screen appears/dissapears without an animation
*/
stackAnimation?: ScreenProps['stackAnimation'];