Add push and pop screen transition

This commit is the first step in adding proper screen transition
animations to push and pop actions.

android/app/src/main/java/com/reactnativenavigation/layouts/BottomTabsLayout.java

@@ -9,6 +9,7 @@ import com.reactnativenavigation.params.ActivityParams;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
+import com.reactnativenavigation.screens.ScreenAnimator;
 import com.reactnativenavigation.screens.ScreenStack;
 import com.reactnativenavigation.views.BottomTabs;
 
@@ -24,6 +25,7 @@ public class BottomTabsLayout extends RelativeLayout implements Layout, AHBottom
     private BottomTabs bottomTabs;
     private ScreenStack[] screenStacks;
     private int currentStackIndex = 0;
+    private ScreenAnimator screenAnimator;
 
     public BottomTabsLayout(AppCompatActivity activity, ActivityParams params) {
         super(activity);
@@ -35,6 +37,7 @@ public class BottomTabsLayout extends RelativeLayout implements Layout, AHBottom
 
     private void createLayout() {
         createBottomTabs();
+        createScreenAnimator();
         addBottomTabsToScreen();
         addScreenStacks();
         showInitialScreenStack();
@@ -47,7 +50,7 @@ public class BottomTabsLayout extends RelativeLayout implements Layout, AHBottom
     }
 
     private void createAndAddScreenStack(int position) {
-        ScreenStack newStack = new ScreenStack(activity, params.tabParams.get(position), this);
+        ScreenStack newStack = new ScreenStack(activity, params.tabParams.get(position), this, screenAnimator);
         screenStacks[position] = newStack;
         newStack.setVisibility(INVISIBLE);
         addScreenStack(newStack);
@@ -70,6 +73,10 @@ public class BottomTabsLayout extends RelativeLayout implements Layout, AHBottom
         bottomTabs.addTabs(params.tabParams, this);
     }
 
+    private void createScreenAnimator() {
+        screenAnimator = new ScreenAnimator(bottomTabs);
+    }
+
     private void addBottomTabsToScreen() {
         LayoutParams lp = new LayoutParams(MATCH_PARENT, WRAP_CONTENT);
         lp.addRule(ALIGN_PARENT_BOTTOM);
@@ -88,7 +95,7 @@ public class BottomTabsLayout extends RelativeLayout implements Layout, AHBottom
     @Override
     public boolean onBackPressed() {
         if (getCurrentScreenStack().canPop()) {
-            getCurrentScreenStack().pop();
+            getCurrentScreenStack().pop(screenAnimator);
             setBottomTabsStyleFromCurrentScreen();
             return true;
         } else {
@@ -130,19 +137,19 @@ public class BottomTabsLayout extends RelativeLayout implements Layout, AHBottom
 
     @Override
     public void push(ScreenParams screenParams) {
-        getCurrentScreenStack().push(screenParams);
+        getCurrentScreenStack().push(screenAnimator, screenParams);
         bottomTabs.setStyleFromScreen(screenParams.styleParams);
     }
 
     @Override
     public void pop(ScreenParams screenParams) {
-        getCurrentScreenStack().pop();
+        getCurrentScreenStack().pop(screenAnimator);
         setBottomTabsStyleFromCurrentScreen();
     }
 
     @Override
     public void popToRoot(ScreenParams params) {
-        getCurrentScreenStack().popToRoot();
+        getCurrentScreenStack().popToRoot(screenAnimator);
         setBottomTabsStyleFromCurrentScreen();
     }
 
@@ -152,7 +159,7 @@ public class BottomTabsLayout extends RelativeLayout implements Layout, AHBottom
         currentScreenStack.destroy();
         removeView(currentScreenStack);
 
-        ScreenStack newStack = new ScreenStack(activity, params, this);
+        ScreenStack newStack = new ScreenStack(activity, params, this, screenAnimator);
         screenStacks[currentStackIndex] = newStack;
         addView(newStack, 0, new RelativeLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT));
 
@@ -198,7 +205,7 @@ public class BottomTabsLayout extends RelativeLayout implements Layout, AHBottom
     @Override
     public boolean onTitleBarBackPress() {
         if (getCurrentScreenStack().canPop()) {
-            getCurrentScreenStack().pop();
+            getCurrentScreenStack().pop(screenAnimator);
             setBottomTabsStyleFromCurrentScreen();
             return true;
         }

android/app/src/main/java/com/reactnativenavigation/layouts/SingleScreenLayout.java

@@ -7,6 +7,7 @@ import android.widget.FrameLayout;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
+import com.reactnativenavigation.screens.ScreenAnimator;
 import com.reactnativenavigation.screens.ScreenStack;
 import com.reactnativenavigation.views.TitleBarBackButtonListener;
 
@@ -19,6 +20,7 @@ public class SingleScreenLayout extends FrameLayout implements Layout {
     private final AppCompatActivity activity;
     private final ScreenParams screenParams;
     private ScreenStack stack;
+    private ScreenAnimator screenAnimator;
     private TitleBarBackButtonListener titleBarBackButtonListener;
 
     public SingleScreenLayout(AppCompatActivity activity, ScreenParams screenParams, TitleBarBackButtonListener titleBarBackButtonListener) {
@@ -30,22 +32,27 @@ public class SingleScreenLayout extends FrameLayout implements Layout {
         super(activity);
         this.activity = activity;
         this.screenParams = screenParams;
+        createScreenAnimator();
         createStack();
     }
 
+    private void createScreenAnimator() {
+        screenAnimator = new ScreenAnimator();
+    }
+
     private void createStack() {
         if (stack != null) {
             stack.destroy();
             removeView(stack);
         }
-        stack = new ScreenStack(activity, screenParams, this);
+        stack = new ScreenStack(activity, screenParams, this, screenAnimator);
         addView(stack, new LayoutParams(MATCH_PARENT, MATCH_PARENT));
     }
 
     @Override
     public boolean onBackPressed() {
         if (stack.canPop()) {
-            stack.pop();
+            stack.pop(screenAnimator);
             return true;
         } else {
             return false;
@@ -60,17 +67,17 @@ public class SingleScreenLayout extends FrameLayout implements Layout {
 
     @Override
     public void push(ScreenParams params) {
-        stack.push(params);
+        stack.push(screenAnimator, params);
     }
 
     @Override
     public void pop(ScreenParams params) {
-        stack.pop();
+        stack.pop(screenAnimator);
     }
 
     @Override
     public void popToRoot(ScreenParams params) {
-        stack.popToRoot();
+        stack.popToRoot(screenAnimator);
     }
 
     @Override

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

@@ -0,0 +1,110 @@
+package com.reactnativenavigation.screens;
+
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
+import android.view.View;
+import android.view.animation.AccelerateInterpolator;
+import android.view.animation.DecelerateInterpolator;
+import android.view.animation.LinearInterpolator;
+
+import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.BottomTabs;
+
+public class ScreenAnimator {
+    private static final String TAG = "ScreenAnimator";
+    private BottomTabs bottomTabs;
+
+    public ScreenAnimator() {
+
+    }
+
+    public ScreenAnimator(BottomTabs bottomTabs) {
+        this.bottomTabs = bottomTabs;
+    }
+
+    public void show(Screen screenToShow, Runnable onScreenRemoved) {
+        createPushAnimator(screenToShow, onScreenRemoved).start();
+    }
+
+    public void show(Screen screenToShow) {
+        createPushAnimator(screenToShow).start();
+    }
+
+    public void hide(Screen screenToHide, Runnable onScreenRemoved) {
+        createPopAnimator(screenToHide, onScreenRemoved).start();
+    }
+
+    private Animator createPushAnimator(final Screen screen) {
+        ObjectAnimator alpha = ObjectAnimator.ofFloat(screen, View.ALPHA, 0.7f, 1);
+        alpha.setStartDelay(100);
+        alpha.setInterpolator(new LinearInterpolator());
+        alpha.setDuration(150);
+
+        final float delta = 0.08f * ViewUtils.getScreenHeight();
+        ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, delta, 0);
+        translationY.setInterpolator(new AccelerateInterpolator());
+        translationY.setDuration(250);
+
+        AnimatorSet set = new AnimatorSet();
+        set.playTogether(translationY, alpha);
+        set.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationStart(Animator animation) {
+                screen.setVisibility(View.VISIBLE);
+            }
+        });
+        return set;
+    }
+
+    private Animator createPushAnimator(final Screen screenToShow, final Runnable onScreenRemoved) {
+        final float translationYValue = 0.08f * ViewUtils.getScreenHeight();
+
+        ObjectAnimator alpha = ObjectAnimator.ofFloat(screenToShow, View.ALPHA, 0, 1);
+        alpha.setInterpolator(new DecelerateInterpolator());
+        alpha.setDuration(200);
+
+        ObjectAnimator translationY = ObjectAnimator.ofFloat(screenToShow, View.TRANSLATION_Y, translationYValue, 0);
+        translationY.setInterpolator(new DecelerateInterpolator());
+        translationY.setDuration(280);
+
+        AnimatorSet set = new AnimatorSet();
+        set.playTogether(translationY, alpha);
+        set.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationStart(Animator animation) {
+                screenToShow.setVisibility(View.VISIBLE);
+            }
+
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                onScreenRemoved.run();
+            }
+        });
+        return set;
+    }
+
+    private Animator createPopAnimator(final Screen screenToHide, final Runnable onScreenRemoved) {
+        final float translationYValue = 0.08f * ViewUtils.getScreenHeight();
+
+        ObjectAnimator alpha = ObjectAnimator.ofFloat(screenToHide, View.ALPHA, 0);
+        alpha.setInterpolator(new LinearInterpolator());
+        alpha.setStartDelay(100);
+        alpha.setDuration(150);
+
+        ObjectAnimator translationY = ObjectAnimator.ofFloat(screenToHide, View.TRANSLATION_Y, translationYValue);
+        translationY.setInterpolator(new AccelerateInterpolator());
+        translationY.setDuration(250);
+
+        AnimatorSet set = new AnimatorSet();
+        set.playTogether(translationY, alpha);
+        set.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                onScreenRemoved.run();
+            }
+        });
+        return set;
+    }
+}

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

@@ -1,6 +1,5 @@
 package com.reactnativenavigation.screens;
 
-import android.animation.LayoutTransition;
 import android.support.v7.app.AppCompatActivity;
 import android.view.ViewManager;
 import android.widget.FrameLayout;
@@ -24,26 +23,37 @@ public class ScreenStack extends FrameLayout {
     private TitleBarBackButtonListener titleBarBackButtonListener;
     private Stack<Screen> stack = new Stack<>();
 
-    public ScreenStack(AppCompatActivity activity, ScreenParams initialScreenParams, TitleBarBackButtonListener titleBarBackButtonListener) {
+    public ScreenStack(AppCompatActivity activity,
+                       ScreenParams initialScreenParams,
+                       TitleBarBackButtonListener titleBarBackButtonListener,
+                       ScreenAnimator screenAnimator) {
         super(activity);
         this.activity = activity;
         this.titleBarBackButtonListener = titleBarBackButtonListener;
-        setLayoutTransition(new LayoutTransition());
-        pushInitialScreen(initialScreenParams);
+//        setLayoutTransition(new LayoutTransition());
+        pushInitialScreen(screenAnimator, initialScreenParams);
     }
 
-    private void pushInitialScreen(ScreenParams initialScreenParams) {
-        addScreen(initialScreenParams);
+    private void pushInitialScreen(ScreenAnimator screenAnimator, ScreenParams initialScreenParams) {
+        Screen initialScreen = ScreenFactory.create(activity, initialScreenParams, titleBarBackButtonListener);
+        addScreen(initialScreen);
+        screenAnimator.show(initialScreen);
     }
 
-    public void push(ScreenParams screenParams) {
-        Screen previous = stack.peek();
-        addScreen(screenParams);
-        removePreviousWithoutUnmount(previous);
+    public void push(ScreenAnimator screenAnimator, ScreenParams params) {
+        Screen nextScreen = ScreenFactory.create(activity, params, titleBarBackButtonListener);
+        final Screen previousScreen = stack.peek();
+        addScreen(nextScreen);
+        screenAnimator.show(nextScreen, new Runnable() {
+            @Override
+            public void run() {
+                removePreviousWithoutUnmount(previousScreen);
+            }
+        });
     }
 
-    private void addScreen(ScreenParams screenParams) {
-        Screen screen = ScreenFactory.create(activity, screenParams, titleBarBackButtonListener);
+    private void addScreen(Screen screen) {
+        screen.setVisibility(INVISIBLE);
         addView(screen, new FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT));
         stack.push(screen);
     }
@@ -53,28 +63,32 @@ public class ScreenStack extends FrameLayout {
         removeView(previous);
     }
 
-    public void pop() {
+    public void pop(ScreenAnimator screenAnimator) {
         if (!canPop()) {
             return;
         }
 
-        Screen toRemove = stack.pop();
+        final Screen toRemove = stack.pop();
         Screen previous = stack.peek();
 
         readdPrevious(previous);
-
-        toRemove.ensureUnmountOnDetachedFromWindow();
-        removeView(toRemove);
+        screenAnimator.hide(toRemove, new Runnable() {
+            @Override
+            public void run() {
+                toRemove.ensureUnmountOnDetachedFromWindow();
+                removeView(toRemove);
+            }
+        });
     }
 
     private void readdPrevious(Screen previous) {
-        addView(previous, new LayoutParams(MATCH_PARENT, MATCH_PARENT));
+        addView(previous, 0, new LayoutParams(MATCH_PARENT, MATCH_PARENT));
         previous.preventMountAfterReattachedToWindow();
     }
 
-    public void popToRoot() {
+    public void popToRoot(ScreenAnimator screenAnimator) {
         while (canPop()) {
-            pop();
+            pop(screenAnimator);
         }
     }
 

android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java

@@ -1,11 +1,14 @@
 package com.reactnativenavigation.utils;
 
+import android.content.Context;
 import android.graphics.Color;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffColorFilter;
 import android.graphics.drawable.Drawable;
+import android.util.DisplayMetrics;
 import android.view.View;
 import android.view.ViewTreeObserver;
+import android.view.WindowManager;
 
 import com.reactnativenavigation.NavigationApplication;
 
@@ -40,5 +43,12 @@ public class ViewUtils {
     public static int generateViewId() {
         return viewId.incrementAndGet();
     }
+
+    public static float getScreenHeight() {
+        WindowManager wm = (WindowManager) NavigationApplication.instance.getSystemService(Context.WINDOW_SERVICE);
+        DisplayMetrics metrics = new DisplayMetrics();
+        wm.getDefaultDisplay().getMetrics(metrics);
+        return metrics.heightPixels;
+    }
 }