[Android] Added fade & horizontal transition animations between screens (#1371)

android/app/src/main/java/com/reactnativenavigation/params/BaseScreenParams.java

@@ -20,6 +20,7 @@ public class BaseScreenParams {
     public String fragmentCreatorClassName;
     public Bundle fragmentCreatorPassProps;
     public boolean animateScreenTransitions;
+    public String animationType;
 
     public boolean isFragmentScreen() {
         return fragmentCreatorClassName != null;

android/app/src/main/java/com/reactnativenavigation/params/parsers/ScreenParamsParser.java

@@ -21,6 +21,7 @@ public class ScreenParamsParser extends Parser {
     private static final String FRAGMENT_CREATOR_CLASS_NAME = "fragmentCreatorClassName";
     private static final String FRAGMENT_CREATOR_PASS_PROPS = "fragmentCreatorPassProps";
     private static final String OVERRIDE_BACK_PRESS = "overrideBackPress";
+    private static final String ANIMATION_TYPE = "animationType";
 
     @SuppressWarnings("ConstantConditions")
     public static ScreenParams parse(Bundle params) {
@@ -52,6 +53,8 @@ public class ScreenParamsParser extends Parser {
         result.animateScreenTransitions = new AnimationParser(params).parse();
         result.sharedElementsTransitions = getSharedElementsTransitions(params);
 
+        result.animationType = params.getString(ANIMATION_TYPE);
+
         return result;
     }
 

android/app/src/main/java/com/reactnativenavigation/screens/ScreenAnimator.java

@@ -20,11 +20,13 @@ import javax.annotation.Nullable;
 
 class ScreenAnimator {
     private final float translationY;
+    private final float translationX;
     private Screen screen;
 
     ScreenAnimator(Screen screen) {
         this.screen = screen;
         translationY = 0.08f * ViewUtils.getScreenHeight();
+        translationX = 0.08f * ViewUtils.getScreenWidth();
     }
 
     public void show(boolean animate, final Runnable onAnimationEnd) {
@@ -58,12 +60,30 @@ class ScreenAnimator {
         alpha.setInterpolator(new DecelerateInterpolator());
         alpha.setDuration(200);
 
-        ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY, 0);
-        translationY.setInterpolator(new DecelerateInterpolator());
-        translationY.setDuration(280);
-
         AnimatorSet set = new AnimatorSet();
-        set.playTogether(translationY, alpha);
+        switch (String.valueOf(this.screen.screenParams.animationType)) {
+            case "fade": {
+                set.play(alpha);
+                break;
+            }
+            case "slide-horizontal": {
+                ObjectAnimator translationX = ObjectAnimator.ofFloat(screen, View.TRANSLATION_X, this.translationX, 0);
+                translationX.setInterpolator(new DecelerateInterpolator());
+                translationX.setDuration(280);
+
+                set.playTogether(translationX, alpha);
+                break;
+            }
+            default: {
+                ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY, 0);
+                translationY.setInterpolator(new DecelerateInterpolator());
+                translationY.setDuration(280);
+
+                set.playTogether(translationY, alpha);
+                break;
+            }
+        }
+
         set.addListener(new AnimatorListenerAdapter() {
             @Override
             public void onAnimationStart(Animator animation) {
@@ -86,12 +106,30 @@ class ScreenAnimator {
         alpha.setStartDelay(100);
         alpha.setDuration(150);
 
-        ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY);
-        translationY.setInterpolator(new AccelerateInterpolator());
-        translationY.setDuration(250);
-
         AnimatorSet set = new AnimatorSet();
-        set.playTogether(translationY, alpha);
+        switch (String.valueOf(this.screen.screenParams.animationType)) {
+            case "fade": {
+                set.play(alpha);
+                break;
+            }
+            case "slide-horizontal": {
+                ObjectAnimator translationX = ObjectAnimator.ofFloat(screen, View.TRANSLATION_X, this.translationX);
+                translationX.setInterpolator(new AccelerateInterpolator());
+                translationX.setDuration(250);
+
+                set.playTogether(translationX, alpha);
+                break;
+            }
+            default: {
+                ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY);
+                translationY.setInterpolator(new AccelerateInterpolator());
+                translationY.setDuration(250);
+
+                set.playTogether(translationY, alpha);
+                break;
+            }
+        }
+
         set.addListener(new AnimatorListenerAdapter() {
             @Override
             public void onAnimationEnd(Animator animation) {

docs/screen-api.md

@@ -13,7 +13,7 @@ this.props.navigator.push({
   titleImage: require('../../img/my_image.png'), //navigation bar title image instead of the title text of the pushed screen (optional)
   passProps: {}, // Object that will be passed as props to the pushed screen (optional)
   animated: true, // does the push have transition animation or does it happen immediately (optional)
-  animationType: 'fade', // does the push have fade transition animation, iOS only (optional)
+  animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the push have different transition animation (optional)
   backButtonTitle: undefined, // override the back button title (optional)
   backButtonHidden: false, // hide the back button altogether (optional)
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
@@ -28,7 +28,7 @@ Pop the top screen from this screen's navigation stack.
 ```js
 this.props.navigator.pop({
   animated: true, // does the pop have transition animation or does it happen immediately (optional)
-  animationType: 'fade', // does the pop have fade transition animation, iOS only (optional)
+  animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the pop have different transition animation (optional)
 });
 ```
 
@@ -39,7 +39,7 @@ Pop all the screens until the root from this screen's navigation stack.
 ```js
 this.props.navigator.popToRoot({
   animated: true, // does the popToRoot have transition animation or does it happen immediately (optional)
-  animationType: 'fade', // does the popToRoot have fade transition animation, iOS only (optional)
+  animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the popToRoot have different transition animation (optional)
 });
 ```
 
@@ -53,7 +53,7 @@ this.props.navigator.resetTo({
   title: undefined, // navigation bar title of the pushed screen (optional)
   passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
   animated: true, // does the resetTo have transition animation or does it happen immediately (optional)
-  animationType: 'fade', // does the resetTo have fade transition animation, iOS only (optional)
+  animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the resetTo have different transition animation (optional)
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
   navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
 });