Initial LightBox implementation on Android (#978)

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

@@ -10,12 +10,14 @@ import com.facebook.react.bridge.ReadableMap;
 import com.reactnativenavigation.controllers.NavigationCommandsHandler;
 import com.reactnativenavigation.params.ContextualMenuParams;
 import com.reactnativenavigation.params.FabParams;
+import com.reactnativenavigation.params.LightBoxParams;
 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.LightBoxParamsParser;
 import com.reactnativenavigation.params.parsers.SlidingOverlayParamsParser;
 import com.reactnativenavigation.params.parsers.SnackbarParamsParser;
 import com.reactnativenavigation.params.parsers.TitleBarButtonParamsParser;
@@ -169,6 +171,17 @@ public class NavigationReactModule extends ReactContextBaseJavaModule {
         NavigationCommandsHandler.showModal(BundleConverter.toBundle(params));
     }
 
+    @ReactMethod
+    public void showLightBox(final ReadableMap params) {
+        LightBoxParams lbp = new LightBoxParamsParser(BundleConverter.toBundle(params)).parse();
+        NavigationCommandsHandler.showLightBox(lbp);
+    }
+
+    @ReactMethod
+    public void dismissLightBox() {
+        NavigationCommandsHandler.dismissLightBox();
+    }
+
     @ReactMethod
     public void dismissAllModals() {
         NavigationCommandsHandler.dismissAllModals();

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

@@ -26,6 +26,7 @@ import com.reactnativenavigation.params.ActivityParams;
 import com.reactnativenavigation.params.AppStyle;
 import com.reactnativenavigation.params.ContextualMenuParams;
 import com.reactnativenavigation.params.FabParams;
+import com.reactnativenavigation.params.LightBoxParams;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.SnackbarParams;
@@ -243,6 +244,14 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
         modalController.dismissAllModals();
     }
 
+    public void showLightBox(LightBoxParams params) {
+        layout.showLightBox(params);
+    }
+
+    public void dismissLightBox() {
+        layout.dismissLightBox();
+    }
+
     //TODO all these setters should be combined to something like setStyle
     void setTopBarVisible(String screenInstanceId, boolean hidden, boolean animated) {
         layout.setTopBarVisible(screenInstanceId, hidden, animated);

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

@@ -9,6 +9,7 @@ import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.params.ActivityParams;
 import com.reactnativenavigation.params.ContextualMenuParams;
 import com.reactnativenavigation.params.FabParams;
+import com.reactnativenavigation.params.LightBoxParams;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.SnackbarParams;
@@ -159,18 +160,44 @@ public class NavigationCommandsHandler {
         });
     }
 
-    public static void showModal(Bundle params) {
+    public static void showModal(final Bundle params) {
         final NavigationActivity currentActivity = NavigationActivity.currentActivity;
         if (currentActivity == null) {
             return;
         }
 
-        final ScreenParams screenParams = ScreenParamsParser.parse(params);
+        NavigationApplication.instance.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                currentActivity.showModal(ScreenParamsParser.parse(params));
+            }
+        });
+    }
+
+    public static void showLightBox(final LightBoxParams params) {
+        final NavigationActivity currentActivity = NavigationActivity.currentActivity;
+        if (currentActivity == null) {
+            return;
+        }
+
+        NavigationApplication.instance.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                currentActivity.showLightBox(params);
+            }
+        });
+    }
+
+    public static void dismissLightBox() {
+        final NavigationActivity currentActivity = NavigationActivity.currentActivity;
+        if (currentActivity == null) {
+            return;
+        }
 
         NavigationApplication.instance.runOnMainThread(new Runnable() {
             @Override
             public void run() {
-                currentActivity.showModal(screenParams);
+                currentActivity.dismissLightBox();
             }
         });
     }

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

@@ -16,6 +16,7 @@ import com.reactnativenavigation.events.ScreenChangedEvent;
 import com.reactnativenavigation.params.ActivityParams;
 import com.reactnativenavigation.params.ContextualMenuParams;
 import com.reactnativenavigation.params.FabParams;
+import com.reactnativenavigation.params.LightBoxParams;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.SideMenuParams;
 import com.reactnativenavigation.params.SlidingOverlayParams;
@@ -25,6 +26,7 @@ import com.reactnativenavigation.params.TitleBarLeftButtonParams;
 import com.reactnativenavigation.screens.Screen;
 import com.reactnativenavigation.screens.ScreenStack;
 import com.reactnativenavigation.views.BottomTabs;
+import com.reactnativenavigation.views.LightBox;
 import com.reactnativenavigation.views.SideMenu;
 import com.reactnativenavigation.views.SideMenu.Side;
 import com.reactnativenavigation.views.SnackbarAndFabContainer;
@@ -47,6 +49,7 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
     private final SlidingOverlaysQueue slidingOverlaysQueue = new SlidingOverlaysQueue();
     private @Nullable SideMenu sideMenu;
     private int currentStackIndex = 0;
+    private LightBox lightBox;
 
     public BottomTabsLayout(AppCompatActivity activity, ActivityParams params) {
         super(activity);
@@ -216,6 +219,27 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
         snackbarAndFabContainer.dismissSnackbar();
     }
 
+    @Override
+    public void showLightBox(LightBoxParams params) {
+        if (lightBox == null) {
+            lightBox = new LightBox(getActivity(), new Runnable() {
+                @Override
+                public void run() {
+                    lightBox = null;
+                }
+            }, params);
+            lightBox.show();
+        }
+    }
+
+    @Override
+    public void dismissLightBox() {
+        if (lightBox != null) {
+            lightBox.hide();
+            lightBox = null;
+        }
+    }
+
     @Override
     public void showSlidingOverlay(final SlidingOverlayParams params) {
         slidingOverlaysQueue.add(new SlidingOverlay(this, params));
@@ -311,6 +335,10 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
         if (sideMenu != null) {
             sideMenu.destroy();
         }
+        if (lightBox != null) {
+            lightBox.destroy();
+            lightBox = null;
+        }
         slidingOverlaysQueue.destroy();
     }
 

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

@@ -5,6 +5,7 @@ import android.view.View;
 import com.facebook.react.bridge.Callback;
 import com.reactnativenavigation.params.ContextualMenuParams;
 import com.reactnativenavigation.params.FabParams;
+import com.reactnativenavigation.params.LightBoxParams;
 import com.reactnativenavigation.params.SlidingOverlayParams;
 import com.reactnativenavigation.params.SnackbarParams;
 import com.reactnativenavigation.params.TitleBarButtonParams;
@@ -52,4 +53,8 @@ public interface Layout extends ScreenStackContainer {
     Screen getCurrentScreen();
 
     void dismissSnackbar();
+
+    void showLightBox(LightBoxParams params);
+
+    void dismissLightBox();
 }

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

@@ -11,6 +11,7 @@ import com.reactnativenavigation.events.EventBus;
 import com.reactnativenavigation.events.ScreenChangedEvent;
 import com.reactnativenavigation.params.ContextualMenuParams;
 import com.reactnativenavigation.params.FabParams;
+import com.reactnativenavigation.params.LightBoxParams;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.SideMenuParams;
 import com.reactnativenavigation.params.SlidingOverlayParams;
@@ -20,6 +21,7 @@ import com.reactnativenavigation.params.TitleBarLeftButtonParams;
 import com.reactnativenavigation.screens.Screen;
 import com.reactnativenavigation.screens.ScreenStack;
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
+import com.reactnativenavigation.views.LightBox;
 import com.reactnativenavigation.views.SideMenu;
 import com.reactnativenavigation.views.SideMenu.Side;
 import com.reactnativenavigation.views.SnackbarAndFabContainer;
@@ -40,6 +42,7 @@ public class SingleScreenLayout extends BaseLayout {
     protected LeftButtonOnClickListener leftButtonOnClickListener;
     private @Nullable SideMenu sideMenu;
     private final SlidingOverlaysQueue slidingOverlaysQueue = new SlidingOverlaysQueue();
+    private LightBox lightBox;
 
     public SingleScreenLayout(AppCompatActivity activity, SideMenuParams leftSideMenuParams,
                               SideMenuParams rightSideMenuParams, ScreenParams screenParams) {
@@ -124,6 +127,12 @@ public class SingleScreenLayout extends BaseLayout {
         if (sideMenu != null) {
             sideMenu.destroy();
         }
+        if (sideMenu != null) {
+            sideMenu.destroy();
+        }
+        if (lightBox != null) {
+            lightBox.destroy();
+        }
         slidingOverlaysQueue.destroy();
     }
 
@@ -220,6 +229,27 @@ public class SingleScreenLayout extends BaseLayout {
         snackbarAndFabContainer.dismissSnackbar();
     }
 
+    @Override
+    public void showLightBox(LightBoxParams params) {
+        if (lightBox == null) {
+            lightBox = new LightBox(getActivity(), new Runnable() {
+                @Override
+                public void run() {
+                    lightBox = null;
+                }
+            }, params);
+            lightBox.show();
+        }
+    }
+
+    @Override
+    public void dismissLightBox() {
+        if (lightBox != null) {
+            lightBox.hide();
+            lightBox = null;
+        }
+    }
+
     @Override
     public void showSlidingOverlay(final SlidingOverlayParams params) {
         slidingOverlaysQueue.add(new SlidingOverlay(this, params));

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

@@ -0,0 +1,7 @@
+package com.reactnativenavigation.params;
+
+public class LightBoxParams {
+    public String screenId;
+    public NavigationParams navigationParams;
+    public StyleParams.Color backgroundColor;
+}

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

@@ -0,0 +1,25 @@
+package com.reactnativenavigation.params.parsers;
+
+import android.os.Bundle;
+
+import com.reactnativenavigation.params.LightBoxParams;
+import com.reactnativenavigation.params.NavigationParams;
+
+public class LightBoxParamsParser extends Parser {
+    private Bundle params;
+
+    public LightBoxParamsParser(Bundle params) {
+        this.params = params;
+    }
+
+    public LightBoxParams parse() {
+        LightBoxParams result = new LightBoxParams();
+        if (params.isEmpty()) {
+            return result;
+        }
+        result.screenId = params.getString("screenId");
+        result.navigationParams = new NavigationParams(params.getBundle("navigationParams"));
+        result.backgroundColor = getColor(params, "backgroundColor");
+        return result;
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/LightBox.java

@@ -0,0 +1,126 @@
+package com.reactnativenavigation.views;
+
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
+import android.app.Dialog;
+import android.content.Context;
+import android.content.DialogInterface;
+import android.graphics.Color;
+import android.support.v4.view.animation.FastOutSlowInInterpolator;
+import android.support.v7.app.AppCompatActivity;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.Window;
+import android.widget.RelativeLayout;
+
+import com.reactnativenavigation.R;
+import com.reactnativenavigation.params.LightBoxParams;
+import com.reactnativenavigation.screens.Screen;
+import com.reactnativenavigation.utils.ViewUtils;
+
+import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
+
+public class LightBox extends Dialog implements DialogInterface.OnDismissListener {
+
+    private Runnable onDismissListener;
+    private ContentView content;
+    private RelativeLayout lightBox;
+
+    public LightBox(AppCompatActivity activity, Runnable onDismissListener, LightBoxParams params) {
+        super(activity, R.style.LightBox);
+        this.onDismissListener = onDismissListener;
+        setOnDismissListener(this);
+        requestWindowFeature(Window.FEATURE_NO_TITLE);
+        createContent(activity, params);
+        getWindow().setWindowAnimations(android.R.style.Animation);
+    }
+
+    private void createContent(final Context context, LightBoxParams params) {
+        lightBox = new RelativeLayout(context);
+        lightBox.setAlpha(0);
+        content = new ContentView(context, params.screenId, params.navigationParams);
+        content.setAlpha(0);
+        content.setId(ViewUtils.generateViewId());
+        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
+        lp.addRule(RelativeLayout.CENTER_IN_PARENT, content.getId());
+        lightBox.setBackgroundColor(params.backgroundColor.getColor());
+        lightBox.addView(content, lp);
+
+        content.setOnDisplayListener(new Screen.OnDisplayListener() {
+            @Override
+            public void onDisplay() {
+                content.getLayoutParams().height = content.getChildAt(0).getHeight();
+                content.getLayoutParams().width = content.getChildAt(0).getWidth();
+                content.setBackgroundColor(Color.TRANSPARENT);
+                ViewUtils.runOnPreDraw(content, new Runnable() {
+                    @Override
+                    public void run() {
+                        animateShow();
+
+                    }
+                });
+            }
+        });
+        setContentView(lightBox, new ViewGroup.LayoutParams(MATCH_PARENT, MATCH_PARENT));
+    }
+
+    @Override
+    public void show() {
+        super.show();
+    }
+
+    @Override
+    public void hide() {
+        animateHide();
+    }
+
+    @Override
+    public void onDismiss(DialogInterface dialogInterface) {
+        onDismissListener.run();
+    }
+
+    public void destroy() {
+        content.unmountReactView();
+        dismiss();
+    }
+
+    private void animateShow() {
+        ObjectAnimator yTranslation = ObjectAnimator.ofFloat(content, View.TRANSLATION_Y, 80, 0).setDuration(400);
+        yTranslation.setInterpolator(new FastOutSlowInInterpolator());
+        yTranslation.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationStart(Animator animation) {
+                content.setAlpha(1);
+            }
+        });
+
+        ObjectAnimator lightBoxAlpha = ObjectAnimator.ofFloat(lightBox, View.ALPHA, 0, 1).setDuration(70);
+
+        AnimatorSet animatorSet = new AnimatorSet();
+        animatorSet.playTogether(lightBoxAlpha, yTranslation);
+        animatorSet.start();
+    }
+
+    private void animateHide() {
+        ObjectAnimator alpha = ObjectAnimator.ofFloat(content, View.ALPHA, 0);
+        ObjectAnimator yTranslation = ObjectAnimator.ofFloat(content, View.TRANSLATION_Y, 60);
+        AnimatorSet contentAnimators = new AnimatorSet();
+        contentAnimators.playTogether(alpha, yTranslation);
+        contentAnimators.setDuration(150);
+
+        ObjectAnimator lightBoxAlpha = ObjectAnimator.ofFloat(lightBox, View.ALPHA, 0).setDuration(100);
+
+        AnimatorSet allAnimators = new AnimatorSet();
+        allAnimators.playSequentially(contentAnimators, lightBoxAlpha);
+        allAnimators.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationEnd(Animator animation) {
+                dismiss();
+            }
+        });
+        allAnimators.start();
+    }
+}

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

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<translate xmlns:android="http://schemas.android.com/apk/res/android"
+           android:duration="@android:integer/config_shortAnimTime"/>

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

@@ -4,6 +4,10 @@
         <item name="android:windowAnimationStyle">@style/modalAnimations</item>
     </style>
 
+    <style name="LightBox" parent="@android:style/Theme.Translucent.NoTitleBar">
+        <item name="android:windowAnimationStyle">@style/modalAnimations</item>
+    </style>
+
     <style name="modalAnimations">
         <item name="android:windowExitAnimation">@anim/slide_down</item>
     </style>

src/Screen.js

@@ -44,6 +44,10 @@ class Navigator {
     return Navigation.showModal(params);
   }
 
+  showLightBox(params = {}) {
+    return Navigation.showLightBox(params);
+  }
+
   dismissModal(params = {}) {
     return Navigation.dismissModal(params);
   }

src/deprecated/platformSpecificDeprecated.android.js

@@ -394,6 +394,28 @@ function showModal(params) {
   newPlatformSpecific.showModal(adapted);
 }
 
+function showLightBox(params) {
+  params.navigationParams = {};
+  addNavigatorParams(params.navigationParams);
+  params.screenId = params.screen;
+  const backgroundBlur = _.get(params, 'style.backgroundBlur');
+  const backgroundColor = _.get(params, 'style.backgroundColor');
+  if (backgroundColor) {
+    params.backgroundColor = processColor(params.backgroundColor);
+  } else {
+    if (backgroundBlur === 'dark') {
+      params.backgroundColor = processColor('rgba(0, 0, 0, 0.5)');
+    } else {
+      params.backgroundColor = processColor('transparent');
+    }
+  }
+  newPlatformSpecific.showLightBox(params);
+}
+
+function dismissLightBox() {
+  newPlatformSpecific.dismissLightBox();
+}
+
 function dismissModal() {
   newPlatformSpecific.dismissTopModal();
 }
@@ -625,6 +647,8 @@ export default {
   dismissModal,
   dismissAllModals,
   showInAppNotification,
+  showLightBox,
+  dismissLightBox,
   dismissInAppNotification,
   navigatorSetButtons,
   navigatorSetTabBadge,

src/platformSpecific.android.js

@@ -53,6 +53,15 @@ function showModal(screenParams) {
   NativeReactModule.showModal(screenParams);
 }
 
+function showLightBox(params) {
+  savePassProps(params);
+  NativeReactModule.showLightBox(params);
+}
+
+function dismissLightBox() {
+  NativeReactModule.dismissLightBox();
+}
+
 function dismissTopModal() {
   NativeReactModule.dismissTopModal();
 }
@@ -158,6 +167,8 @@ module.exports = {
   showModal,
   dismissTopModal,
   dismissAllModals,
+  showLightBox,
+  dismissLightBox,
   showInAppNotification,
   dismissInAppNotification,
   toggleSideMenuVisible,