Modal animations (#1856)

This commit adds support for fade and slide-horizontal animations for modals and a few other animation related changes:

* Support defining animationType when calling dismissModal
* Support fade and slide horizontal animations for modals
* Slightly reworked current screen animations timings
* Fixed slide-horizontal x offset and removed alpha

android/app/src/main/java/com/reactnativenavigation/bridge/NavigationReactModule.java

@@ -18,6 +18,7 @@ import com.reactnativenavigation.params.TitleBarLeftButtonParams;
 import com.reactnativenavigation.params.parsers.ContextualMenuParamsParser;
 import com.reactnativenavigation.params.parsers.FabParamsParser;
 import com.reactnativenavigation.params.parsers.LightBoxParamsParser;
+import com.reactnativenavigation.params.parsers.ScreenParamsParser;
 import com.reactnativenavigation.params.parsers.SlidingOverlayParamsParser;
 import com.reactnativenavigation.params.parsers.SnackbarParamsParser;
 import com.reactnativenavigation.params.parsers.TitleBarButtonParamsParser;
@@ -216,8 +217,8 @@ public class NavigationReactModule extends ReactContextBaseJavaModule {
     }
 
     @ReactMethod
-    public void dismissTopModal() {
-        NavigationCommandsHandler.dismissTopModal();
+    public void dismissTopModal(final ReadableMap params) {
+        NavigationCommandsHandler.dismissTopModal(ScreenParamsParser.parse(BundleConverter.toBundle(params)));
     }
 
     @ReactMethod

android/app/src/main/java/com/reactnativenavigation/controllers/Modal.java

@@ -21,11 +21,12 @@ import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
+import com.reactnativenavigation.params.parsers.ModalAnimationFactory;
 import com.reactnativenavigation.screens.NavigationType;
 
 import java.util.List;
 
-public class Modal extends Dialog implements DialogInterface.OnDismissListener, ScreenStackContainer {
+class Modal extends Dialog implements DialogInterface.OnDismissListener, ScreenStackContainer {
 
     private final AppCompatActivity activity;
     private final OnModalDismissedListener onModalDismissedListener;
@@ -104,13 +105,13 @@ public class Modal extends Dialog implements DialogInterface.OnDismissListener,
         void onModalDismissed(Modal modal);
     }
 
-    public Modal(AppCompatActivity activity, OnModalDismissedListener onModalDismissedListener, ScreenParams screenParams) {
+    Modal(AppCompatActivity activity, OnModalDismissedListener onModalDismissedListener, ScreenParams screenParams) {
         super(activity, R.style.Modal);
         this.activity = activity;
         this.onModalDismissedListener = onModalDismissedListener;
         this.screenParams = screenParams;
         createContent();
-        setAnimation();
+        setAnimation(screenParams);
     }
 
     public AppCompatActivity getActivity() {
@@ -128,18 +129,19 @@ public class Modal extends Dialog implements DialogInterface.OnDismissListener,
     }
 
     private void setWindowFlags() {
-        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
+        Window window = getWindow();
+        if (window == null) return;
+        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-            getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
+            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
         }
     }
 
-    private void setAnimation() {
-        if (!screenParams.animateScreenTransitions) {
-            if (getWindow() != null) {
-                getWindow().setWindowAnimations(android.R.style.Animation);
-            }
-        }
+    private void setAnimation(ScreenParams screenParams) {
+        if (getWindow() == null) return;
+        final WindowManager.LayoutParams attributes = getWindow().getAttributes();
+        attributes.windowAnimations = ModalAnimationFactory.create(screenParams);
+        getWindow().setAttributes(attributes);
     }
 
     @Override
@@ -179,6 +181,16 @@ public class Modal extends Dialog implements DialogInterface.OnDismissListener,
         }
     }
 
+    void dismiss(ScreenParams params) {
+        setAnimation(params);
+        NavigationApplication.instance.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                dismiss();
+            }
+        });
+    }
+
     @Override
     public void dismiss() {
         if (!isDestroyed) {

android/app/src/main/java/com/reactnativenavigation/controllers/ModalController.java

@@ -41,9 +41,9 @@ class ModalController implements ScreenStackContainer, Modal.OnModalDismissedLis
         stack.add(modal);
     }
 
-    void dismissTopModal() {
+    void dismissTopModal(ScreenParams params) {
         if (isShowing()) {
-            stack.pop().dismiss();
+            stack.pop().dismiss(params);
         }
     }
 

android/app/src/main/java/com/reactnativenavigation/controllers/NavigationActivity.java

@@ -244,8 +244,8 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
         modalController.showModal(screenParams);
     }
 
-    void dismissTopModal() {
-        modalController.dismissTopModal();
+    void dismissTopModal(ScreenParams params) {
+        modalController.dismissTopModal(params);
     }
 
     void dismissAllModals() {

android/app/src/main/java/com/reactnativenavigation/controllers/NavigationCommandsHandler.java

@@ -263,7 +263,7 @@ public class NavigationCommandsHandler {
         });
     }
 
-    public static void dismissTopModal() {
+    public static void dismissTopModal(final ScreenParams params) {
         final NavigationActivity currentActivity = NavigationActivity.currentActivity;
         if (currentActivity == null) {
             return;
@@ -272,7 +272,7 @@ public class NavigationCommandsHandler {
         NavigationApplication.instance.runOnMainThread(new Runnable() {
             @Override
             public void run() {
-                currentActivity.dismissTopModal();
+                currentActivity.dismissTopModal(params);
             }
         });
     }

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

@@ -0,0 +1,18 @@
+package com.reactnativenavigation.params.parsers;
+
+import com.reactnativenavigation.R;
+import com.reactnativenavigation.params.ScreenParams;
+
+public class ModalAnimationFactory {
+    public static int create(ScreenParams params) {
+        if (!params.animateScreenTransitions) return R.style.ModalNoAnimation;
+        switch (params.animationType) {
+            case "fade":
+                return R.style.ModalFadeAnimation;
+            case "slide-horizontal":
+                return R.style.ModalSlideHorizontal;
+            default:
+                return R.style.ModalDefaultAnimations;
+        }
+    }
+}

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

@@ -55,7 +55,7 @@ public class ScreenParamsParser extends Parser {
         result.animateScreenTransitions = new AnimationParser(params).parse();
         result.sharedElementsTransitions = getSharedElementsTransitions(params);
 
-        result.animationType = params.getString(ANIMATION_TYPE);
+        result.animationType = params.getString(ANIMATION_TYPE, "slide-up");
 
         return result;
     }

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

@@ -5,18 +5,28 @@ import android.animation.AnimatorListenerAdapter;
 import android.animation.AnimatorSet;
 import android.animation.ObjectAnimator;
 import android.view.View;
+import android.view.animation.AccelerateDecelerateInterpolator;
 import android.view.animation.AccelerateInterpolator;
 import android.view.animation.DecelerateInterpolator;
 import android.view.animation.LinearInterpolator;
+
 import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.views.sharedElementTransition.SharedElementsAnimator;
 
-import javax.annotation.Nullable;
 import java.util.ArrayList;
 import java.util.List;
 
+import javax.annotation.Nullable;
+
 class ScreenAnimator {
+    private static final int DURATION = 250;
+    private static final int ALPHA_START_DELAY = 100;
+    private static final int ALPHA_SHORT_DURATION = 150;
+    private static final LinearInterpolator LINEAR_INTERPOLATOR = new LinearInterpolator();
+    private static final DecelerateInterpolator DECELERATE_INTERPOLATOR = new DecelerateInterpolator();
+    private static final AccelerateDecelerateInterpolator ACCELERATE_DECELERATE_INTERPOLATOR = new AccelerateDecelerateInterpolator();
+    private static final AccelerateInterpolator ACCELERATE_INTERPOLATOR = new AccelerateInterpolator();
     private final float translationY;
     private final float translationX;
     private Screen screen;
@@ -24,7 +34,7 @@ class ScreenAnimator {
     ScreenAnimator(Screen screen) {
         this.screen = screen;
         translationY = 0.08f * ViewUtils.getWindowHeight(screen.activity);
-        translationX = 0.08f * ViewUtils.getWindowWidth(screen.activity);
+        translationX = ViewUtils.getWindowWidth(screen.activity);
     }
 
     public void show(boolean animate, final Runnable onAnimationEnd) {
@@ -32,7 +42,7 @@ class ScreenAnimator {
             createShowAnimator(onAnimationEnd).start();
         } else {
             screen.setVisibility(View.VISIBLE);
-            NavigationApplication.instance.runOnMainThread(onAnimationEnd, 200);
+            NavigationApplication.instance.runOnMainThread(onAnimationEnd, DURATION);
         }
     }
 
@@ -55,28 +65,27 @@ class ScreenAnimator {
 
     private Animator createShowAnimator(final @Nullable Runnable onAnimationEnd) {
         ObjectAnimator alpha = ObjectAnimator.ofFloat(screen, View.ALPHA, 0, 1);
-        alpha.setInterpolator(new DecelerateInterpolator());
-        alpha.setDuration(200);
+        alpha.setInterpolator(DECELERATE_INTERPOLATOR);
 
         AnimatorSet set = new AnimatorSet();
         switch (String.valueOf(this.screen.screenParams.animationType)) {
             case "fade": {
+                alpha.setDuration(DURATION);
                 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);
+                translationX.setInterpolator(ACCELERATE_DECELERATE_INTERPOLATOR);
+                translationX.setDuration(DURATION);
+                set.play(translationX);
                 break;
             }
             default: {
                 ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY, 0);
-                translationY.setInterpolator(new DecelerateInterpolator());
-                translationY.setDuration(280);
-
+                translationY.setInterpolator(DECELERATE_INTERPOLATOR);
+                translationY.setDuration(DURATION);
+                alpha.setDuration(ALPHA_SHORT_DURATION);
                 set.playTogether(translationY, alpha);
                 break;
             }
@@ -100,29 +109,28 @@ class ScreenAnimator {
 
     private Animator createHideAnimator(final Runnable onAnimationEnd) {
         ObjectAnimator alpha = ObjectAnimator.ofFloat(screen, View.ALPHA, 0);
-        alpha.setInterpolator(new LinearInterpolator());
-        alpha.setStartDelay(100);
-        alpha.setDuration(150);
+        alpha.setInterpolator(DECELERATE_INTERPOLATOR);
 
         AnimatorSet set = new AnimatorSet();
         switch (String.valueOf(this.screen.screenParams.animationType)) {
             case "fade": {
+                alpha.setDuration(DURATION);
                 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);
+                translationX.setInterpolator(ACCELERATE_INTERPOLATOR);
+                translationX.setDuration(DURATION);
+                set.play(translationX);
                 break;
             }
             default: {
                 ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY);
-                translationY.setInterpolator(new AccelerateInterpolator());
-                translationY.setDuration(250);
-
+                translationY.setInterpolator(ACCELERATE_INTERPOLATOR);
+                translationY.setDuration(DURATION);
+                alpha.setStartDelay(ALPHA_START_DELAY);
+                alpha.setDuration(ALPHA_SHORT_DURATION);
                 set.playTogether(translationY, alpha);
                 break;
             }

android/app/src/main/res/anim/no_animation.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<alpha xmlns:android="http://schemas.android.com/apk/res/android"
+       android:fromAlpha="0"
+       android:toAlpha="0"
+       android:duration="0"
+    />

android/app/src/main/res/anim/slide_down.xml

@@ -1,12 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android"
-    android:interpolator="@android:anim/accelerate_interpolator"
-    android:shareInterpolator="true"
-    android:duration="190">
+     android:duration="@integer/config_activityDefaultDur"
+     android:interpolator="@android:anim/accelerate_interpolator"
+     android:shareInterpolator="true">
     <translate
         android:fromYDelta="0"
         android:toYDelta="100%"/>
     <alpha
+        android:startOffset="100"
+        android:duration="150"
         android:fromAlpha="1"
         android:toAlpha="0"/>
 </set>

android/app/src/main/res/anim/slide_in_right.xml

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

android/app/src/main/res/anim/slide_out_right.xml

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

android/app/src/main/res/anim/slide_up.xml

@@ -5,5 +5,5 @@
     <translate
         android:fromYDelta="100%"
         android:toYDelta="0"
-        android:duration="250"/>
+        android:duration="@integer/config_activityDefaultDur"/>
 </set>

android/app/src/main/res/values/config.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <integer name="config_activityDefaultDur">250</integer>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -1,16 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:tools="http://schemas.android.com/tools">
     <style name="Modal" parent="@android:style/Theme.Translucent.NoTitleBar">
-        <item name="android:windowAnimationStyle">@style/modalAnimations</item>
         <item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent</item>
     </style>
 
     <style name="LightBox" parent="@android:style/Theme.Translucent.NoTitleBar">
-        <item name="android:windowAnimationStyle">@style/modalAnimations</item>
+        <item name="android:windowAnimationStyle">@style/ModalDefaultAnimations</item>
         <item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent</item>
     </style>
 
-    <style name="modalAnimations">
+    <style name="ModalDefaultAnimations">
+        <item name="android:windowEnterAnimation">@anim/slide_up</item>
         <item name="android:windowExitAnimation">@anim/slide_down</item>
     </style>
+
+    <style name="ModalFadeAnimation">
+        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
+    </style>
+
+    <style name="ModalNoAnimation">
+        <item name="android:windowEnterAnimation">@anim/no_animation</item>
+        <item name="android:windowExitAnimation">@anim/no_animation</item>
+    </style>
+
+    <style name="ModalSlideHorizontal">
+        <item name="android:windowExitAnimation">@anim/slide_out_right</item>
+    </style>
 </resources>

src/deprecated/platformSpecificDeprecated.android.js

@@ -478,8 +478,11 @@ function dismissLightBox() {
   newPlatformSpecific.dismissLightBox();
 }
 
-function dismissModal() {
-  newPlatformSpecific.dismissTopModal();
+function dismissModal(params) {
+  newPlatformSpecific.dismissTopModal({
+    ...params,
+    navigationParams: {}
+  });
 }
 
 function dismissAllModals(params) {

src/platformSpecific.android.js

@@ -62,8 +62,8 @@ function dismissLightBox() {
   NativeReactModule.dismissLightBox();
 }
 
-function dismissTopModal() {
-  NativeReactModule.dismissTopModal();
+function dismissTopModal(params) {
+  NativeReactModule.dismissTopModal(params);
 }
 
 function dismissAllModals() {