Sliding overlay (#651)

* WIP

* Core function works e2e

* Queued overlays support

* Remove unneeded activity ref

* Add post-PR changes

android/app/src/main/java/com/reactnativenavigation/animation/PeekingAnimator.java

+package com.reactnativenavigation.animation;
+
+import android.animation.Animator;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
+import android.view.View;
+import android.view.animation.OvershootInterpolator;
+
+import static android.view.View.TRANSLATION_Y;
+
+public class PeekingAnimator {
+
+    private static final int SLIDE_OUT_DURATION = 300;
+    private static final int SLIDE_IN_DURATION = 600;
+    private static final int SUSTAIN_DURATION = 3000;
+
+    private final Animator animator;
+
+    public PeekingAnimator(View view) {
+        this.animator = createAnimator(view);
+    }
+
+    public void addListener(Animator.AnimatorListener listener) {
+        this.animator.addListener(listener);
+    }
+
+    public void animate() {
+        animator.start();
+    }
+
+    private Animator createAnimator(View view) {
+        final int heightPixels = view.getLayoutParams().height;
+
+        view.setTranslationY(-heightPixels);
+
+        ObjectAnimator slideIn = createSlideInAnimator(view);
+        ObjectAnimator slideOut = createSlideOutAnimator(view, heightPixels, slideIn);
+        AnimatorSet animatorSet = createAnimatorSet(slideIn, slideOut);
+        return animatorSet;
+    }
+
+    private ObjectAnimator createSlideInAnimator(View view) {
+        ObjectAnimator slideIn = ObjectAnimator.ofFloat(view, TRANSLATION_Y, 0);
+        slideIn.setDuration(SLIDE_IN_DURATION);
+        slideIn.setInterpolator(new OvershootInterpolator(0.8f));
+        return slideIn;
+    }
+
+    private ObjectAnimator createSlideOutAnimator(View view, int heightPixels, ObjectAnimator slideIn) {
+        ObjectAnimator slideOut = ObjectAnimator.ofFloat(view, TRANSLATION_Y, -heightPixels);
+        slideIn.setDuration(SLIDE_OUT_DURATION);
+        return slideOut;
+    }
+
+    private AnimatorSet createAnimatorSet(ObjectAnimator slideIn, ObjectAnimator slideOut) {
+        AnimatorSet animatorSet = new AnimatorSet();
+        animatorSet.play(slideOut).after(SUSTAIN_DURATION).after(slideIn);
+        return animatorSet;
+    }
+}

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

 import com.reactnativenavigation.controllers.NavigationCommandsHandler;
 import com.reactnativenavigation.params.ContextualMenuParams;
 import com.reactnativenavigation.params.FabParams;
+import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.SnackbarParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
 import com.reactnativenavigation.params.parsers.ContextualMenuParamsParser;
 import com.reactnativenavigation.params.parsers.FabParamsParser;
+import com.reactnativenavigation.params.parsers.SlidingOverlayParamsParser;
 import com.reactnativenavigation.params.parsers.SnackbarParamsParser;
 import com.reactnativenavigation.params.parsers.TitleBarButtonParamsParser;
 import com.reactnativenavigation.params.parsers.TitleBarLeftButtonParamsParser;
         NavigationCommandsHandler.dismissTopModal();
     }
 
+    @ReactMethod
+    public void showSlidingOverlay(final ReadableMap params) {
+        SlidingOverlayParams slidingOverlayParams = new SlidingOverlayParamsParser().parse(BundleConverter.toBundle(params));
+        NavigationCommandsHandler.showSlidingOverlay(slidingOverlayParams);
+    }
+
     @ReactMethod
     public void showSnackbar(final ReadableMap params) {
         SnackbarParams snackbarParams = new SnackbarParamsParser().parse(BundleConverter.toBundle(params));

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

 import com.reactnativenavigation.params.ContextualMenuParams;
 import com.reactnativenavigation.params.FabParams;
 import com.reactnativenavigation.params.ScreenParams;
+import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.SnackbarParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
         }
     }
 
+    public void showSlidingOverlay(SlidingOverlayParams params) {
+        layout.showSlidingOverlay(params);
+    }
+
     public void showSnackbar(SnackbarParams params) {
         layout.showSnackbar(params);
     }

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

 import com.reactnativenavigation.params.ContextualMenuParams;
 import com.reactnativenavigation.params.FabParams;
 import com.reactnativenavigation.params.ScreenParams;
+import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.SnackbarParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
         });
     }
 
+    public static void showSlidingOverlay(final SlidingOverlayParams params) {
+        final NavigationActivity currentActivity = NavigationActivity.currentActivity;
+        if (currentActivity == null) {
+            return;
+        }
+
+        NavigationApplication.instance.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                currentActivity.showSlidingOverlay(params);
+            }
+        });
+    }
+
     public static void showSnackbar(final SnackbarParams params) {
         final NavigationActivity currentActivity = NavigationActivity.currentActivity;
         if (currentActivity == null) {

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

+package com.reactnativenavigation.layouts;
+
+import android.support.v7.app.AppCompatActivity;
+import android.widget.RelativeLayout;
+
+public abstract class BaseLayout extends RelativeLayout implements Layout {
+
+    public BaseLayout(AppCompatActivity activity) {
+        super(activity);
+    }
+
+    protected AppCompatActivity getActivity() {
+        return (AppCompatActivity) getContext();
+    }
+}

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

 import com.reactnativenavigation.params.FabParams;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.SideMenuParams;
+import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.SnackbarParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
 import com.reactnativenavigation.views.SideMenu;
 import com.reactnativenavigation.views.SideMenu.Side;
 import com.reactnativenavigation.views.SnackbarAndFabContainer;
+import com.reactnativenavigation.views.slidingOverlay.SlidingOverlay;
+import com.reactnativenavigation.views.slidingOverlay.SlidingOverlaysQueue;
 
 import java.util.List;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
 
-public class BottomTabsLayout extends RelativeLayout implements Layout, AHBottomNavigation.OnTabSelectedListener {
+public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.OnTabSelectedListener {
 
-    private final AppCompatActivity activity;
     private ActivityParams params;
     private SnackbarAndFabContainer snackbarAndFabContainer;
     private BottomTabs bottomTabs;
     private ScreenStack[] screenStacks;
     private final SideMenuParams leftSideMenuParams;
     private final SideMenuParams rightSideMenuParams;
+    private final SlidingOverlaysQueue slidingOverlaysQueue = new SlidingOverlaysQueue();
     private @Nullable SideMenu sideMenu;
     private int currentStackIndex = 0;
 
     public BottomTabsLayout(AppCompatActivity activity, ActivityParams params) {
         super(activity);
-        this.activity = activity;
         this.params = params;
         leftSideMenuParams = params.leftSideMenuParams;
         rightSideMenuParams = params.rightSideMenuParams;
 
     private void createAndAddScreens(int position) {
         ScreenParams screenParams = params.tabParams.get(position);
-        ScreenStack newStack = new ScreenStack(activity, getScreenStackParent(), screenParams.getNavigatorId(), this);
+        ScreenStack newStack = new ScreenStack(getActivity(), getScreenStackParent(), screenParams.getNavigatorId(), this);
         newStack.pushInitialScreen(screenParams, createScreenLayoutParams(screenParams));
         screenStacks[position] = newStack;
     }
         snackbarAndFabContainer.showSnackbar(eventId, params);
     }
 
+    @Override
+    public void showSlidingOverlay(final SlidingOverlayParams params) {
+        slidingOverlaysQueue.add(new SlidingOverlay(this, params));
+    }
+
     @Override
     public void onModalDismissed() {
         EventBus.instance.post(new ScreenChangedEvent(getCurrentScreenStack().peek().getScreenParams()));
         removeView(currentScreenStack.peek());
         currentScreenStack.destroy();
 
-        ScreenStack newStack = new ScreenStack(activity, getScreenStackParent(), params.getNavigatorId(), this);
+        ScreenStack newStack = new ScreenStack(getActivity(), getScreenStackParent(), params.getNavigatorId(), this);
         LayoutParams lp = createScreenLayoutParams(params);
         newStack.pushInitialScreenWithAnimation(params, lp);
         screenStacks[currentStackIndex] = newStack;

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

 import com.facebook.react.bridge.Callback;
 import com.reactnativenavigation.params.ContextualMenuParams;
 import com.reactnativenavigation.params.FabParams;
+import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.SnackbarParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
 
     void showSnackbar(SnackbarParams params);
 
+    void showSlidingOverlay(SlidingOverlayParams params);
+
     void onModalDismissed();
 
     boolean containsNavigator(String navigatorId);

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

 import com.reactnativenavigation.params.FabParams;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.SideMenuParams;
+import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.SnackbarParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
 import com.reactnativenavigation.views.SideMenu;
 import com.reactnativenavigation.views.SideMenu.Side;
 import com.reactnativenavigation.views.SnackbarAndFabContainer;
+import com.reactnativenavigation.views.slidingOverlay.SlidingOverlay;
+import com.reactnativenavigation.views.slidingOverlay.SlidingOverlaysQueue;
 
 import java.util.List;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 
-public class SingleScreenLayout extends RelativeLayout implements Layout {
+public class SingleScreenLayout extends BaseLayout {
 
-    private final AppCompatActivity activity;
     protected final ScreenParams screenParams;
     private final SideMenuParams leftSideMenuParams;
     private final SideMenuParams rightSideMenuParams;
     private SnackbarAndFabContainer snackbarAndFabContainer;
     protected LeftButtonOnClickListener leftButtonOnClickListener;
     private @Nullable SideMenu sideMenu;
+    private final SlidingOverlaysQueue slidingOverlaysQueue = new SlidingOverlaysQueue();
 
     public SingleScreenLayout(AppCompatActivity activity, SideMenuParams leftSideMenuParams,
                               SideMenuParams rightSideMenuParams, ScreenParams screenParams) {
         super(activity);
-        this.activity = activity;
         this.screenParams = screenParams;
         this.leftSideMenuParams = leftSideMenuParams;
         this.rightSideMenuParams = rightSideMenuParams;
         if (stack != null) {
             stack.destroy();
         }
-        stack = new ScreenStack(activity, parent, screenParams.getNavigatorId(), this);
+        stack = new ScreenStack(getActivity(), parent, screenParams.getNavigatorId(), this);
         LayoutParams lp = new LayoutParams(MATCH_PARENT, MATCH_PARENT);
         pushInitialScreen(lp);
     }
         removeView(stack.peek());
         stack.destroy();
 
-        ScreenStack newStack = new ScreenStack(activity, getScreenStackParent(), params.getNavigatorId(), this);
+        ScreenStack newStack = new ScreenStack(getActivity(), getScreenStackParent(), params.getNavigatorId(), this);
         LayoutParams lp = new LayoutParams(MATCH_PARENT, MATCH_PARENT);
         newStack.pushInitialScreenWithAnimation(params, lp);
         stack = newStack;
         snackbarAndFabContainer.showSnackbar(navigatorEventId, params);
     }
 
+    @Override
+    public void showSlidingOverlay(final SlidingOverlayParams params) {
+        slidingOverlaysQueue.add(new SlidingOverlay(this, params));
+    }
+
     @Override
     public void onModalDismissed() {
         EventBus.instance.post(new ScreenChangedEvent(stack.peek().getScreenParams()));

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

+package com.reactnativenavigation.params;
+
+public class SlidingOverlayParams {
+    public String screenInstanceId;
+    public NavigationParams navigationParams;
+}

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

+package com.reactnativenavigation.params.parsers;
+
+import android.os.Bundle;
+
+import com.reactnativenavigation.params.NavigationParams;
+import com.reactnativenavigation.params.SlidingOverlayParams;
+
+public class SlidingOverlayParamsParser extends Parser {
+
+    public SlidingOverlayParams parse(Bundle bundle) {
+        final SlidingOverlayParams result = new SlidingOverlayParams();
+        result.screenInstanceId = bundle.getString("screen");
+        result.navigationParams = new NavigationParams(bundle.getBundle("navigationParams"));
+        return result;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/slidingOverlay/SlidingOverlay.java

+package com.reactnativenavigation.views.slidingOverlay;
+
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.view.View;
+import android.widget.RelativeLayout;
+
+import com.reactnativenavigation.animation.PeekingAnimator;
+import com.reactnativenavigation.params.SlidingOverlayParams;
+import com.reactnativenavigation.screens.Screen;
+import com.reactnativenavigation.utils.ViewUtils;
+import com.reactnativenavigation.views.ContentView;
+
+public class SlidingOverlay {
+
+    private final RelativeLayout parent;
+    private final SlidingOverlayParams params;
+
+    private SlidingListener listener;
+
+    public interface SlidingListener {
+        void onSlidingOverlayGone();
+    }
+
+    public SlidingOverlay(RelativeLayout parent, SlidingOverlayParams params) {
+        this.parent = parent;
+        this.params = params;
+    }
+
+    public void setSlidingListener(SlidingListener listener) {
+        this.listener = listener;
+    }
+
+    public void show() {
+        final ContentView view = createSlidingOverlayView(params);
+        parent.addView(view);
+
+        final PeekingAnimator animator = new PeekingAnimator(view);
+        animator.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationCancel(Animator animator) {
+                onSlidingOverlayEnd(view);
+            }
+
+            @Override
+            public void onAnimationEnd(Animator animator) {
+                onSlidingOverlayEnd(view);
+            }
+        });
+        view.setOnDisplayListener(new Screen.OnDisplayListener() {
+            @Override
+            public void onDisplay() {
+                view.setVisibility(View.VISIBLE);
+                animator.animate();
+            }
+        });
+    }
+
+    protected ContentView createSlidingOverlayView(SlidingOverlayParams params) {
+        final float heightPixels = ViewUtils.convertDpToPixel(100);
+
+        final RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, (int) heightPixels);
+        lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
+
+        final ContentView view = new ContentView(parent.getContext(), params.screenInstanceId, params.navigationParams);
+        view.setLayoutParams(lp);
+        view.setVisibility(View.INVISIBLE);
+        return view;
+    }
+
+    protected void onSlidingOverlayEnd(ContentView view) {
+        view.unmountReactView();
+        parent.removeView(view);
+
+        if (listener != null) {
+            listener.onSlidingOverlayGone();
+        }
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/slidingOverlay/SlidingOverlaysQueue.java

+package com.reactnativenavigation.views.slidingOverlay;
+
+import com.reactnativenavigation.NavigationApplication;
+
+import java.util.LinkedList;
+import java.util.Queue;
+
+public class SlidingOverlaysQueue implements SlidingOverlay.SlidingListener{
+
+    protected Queue<SlidingOverlay> queue = new LinkedList<>();
+
+    public void add(final SlidingOverlay slidingOverlay) {
+        NavigationApplication.instance.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                queue.add(slidingOverlay);
+                if (queue.size() == 1) {
+                    dispatchNextSlidingOverlay();
+                }
+            }
+        });
+    }
+
+    @Override
+    public void onSlidingOverlayGone() {
+        queue.poll();
+        dispatchNextSlidingOverlay();
+    }
+
+    protected void dispatchNextSlidingOverlay() {
+        NavigationApplication.instance.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                final SlidingOverlay nextSlidingOverlay = queue.peek();
+                if (nextSlidingOverlay != null) {
+                    nextSlidingOverlay.setSlidingListener(SlidingOverlaysQueue.this);
+                    nextSlidingOverlay.show();
+                }
+            }
+        });
+    }
+}

example/src/screens/InAppNotification.js

+import React, {Component} from 'react';
+import {
+  Text,
+  View,
+  TouchableHighlight,
+  StyleSheet,
+  Alert
+} from 'react-native';
+
+const styleSheet = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 10,
+    marginRight: 10,
+    marginTop: 18,
+    marginBottom: 18
+  }
+});
+
+let globalCounter = 0;
+export default class InAppNotification extends Component {
+
+  constructor(props) {
+    super(props);
+    this._counter = globalCounter++;
+  }
+
+  render() {
+    const message = `I'm notification #${this._counter}!`;
+    return (
+      <View style={styleSheet.container}>
+          <Text style={{color: 'black', fontSize: 20}}>{message}</Text>
+          <TouchableHighlight onPress={() => Alert.alert(`You've tapped on notification #${this._counter}`, 'We hope you had fun!')}>
+            <Text>Tap Me</Text>
+          </TouchableHighlight>
+      </View>
+    );
+  }
+}

example/src/screens/SideMenu.js

         <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
           <Text style={styles.button}>Show Modal Screen</Text>
         </TouchableOpacity>
-      </View>
+
+        <TouchableOpacity onPress={ this.onShowInAppNotification.bind(this) }>
+          <Text style={styles.button}>Show In-App Notification</Text>
+        </TouchableOpacity>
+
+    </View>
     );
   }
   onReplaceTab2Press() {
     });
   }
 
+  onShowInAppNotification() {
+    this._toggleDrawer();
+    this.props.navigator.showInAppNotification({
+      screen: "example.InAppNotification"
+    });
+  }
+
   _toggleDrawer() {
     this.props.navigator.toggleDrawer({
       to: 'closed',

example/src/screens/index.android.js

 import SideMenu from './SideMenu';
 import ModalScreen from './ModalScreen';
 import CollapsingTopBarScreen from './CollapsingTopBarScreen';
+import InAppNotification from './InAppNotification';
 
 // register all screens of the app (including internal ones)
 export function registerScreens() {
   Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
   Navigation.registerComponent('example.SideMenu', () => SideMenu);
   Navigation.registerComponent('example.CollapsingTopBarScreen', () => CollapsingTopBarScreen);
+  Navigation.registerComponent('example.InAppNotification', () => InAppNotification);
 }

src/deprecated/platformSpecificDeprecated.android.js

   newPlatformSpecific.dismissAllModals();
 }
 
+function showInAppNotification(params) {
+  params.navigationParams = {};
+  addNavigatorParams(params.navigationParams);
+  newPlatformSpecific.showInAppNotification(params);
+}
+
 function addNavigatorParams(screen, navigator = null, idx = '') {
   screen.navigatorID = navigator ? navigator.navigatorID : _.uniqueId('navigatorID') + '_nav' + idx;
   screen.screenInstanceID = _.uniqueId('screenInstanceID');
   showModal,
   dismissModal,
   dismissAllModals,
+  showInAppNotification,
   navigatorSetButtons,
   navigatorSetTabBadge,
   navigatorSetTitle,

src/platformSpecific.android.js

   NativeReactModule.dismissAllModals();
 }
 
+function showInAppNotification(params) {
+  NativeReactModule.showSlidingOverlay(params);
+}
+
 function savePassProps(params) {
   if (params.navigationParams && params.passProps) {
     PropRegistry.save(params.navigationParams.screenInstanceID, params.passProps);
   showModal,
   dismissTopModal,
   dismissAllModals,
+  showInAppNotification,
   toggleSideMenuVisible,
   setSideMenuVisible,
   selectBottomTabByNavigatorId,