Add Modal implementation

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

@@ -0,0 +1,54 @@
+package com.reactnativenavigation.controllers;
+
+import android.support.annotation.Nullable;
+
+import com.reactnativenavigation.modal.RnnModal;
+import com.reactnativenavigation.utils.RefUtils;
+
+import java.lang.ref.WeakReference;
+import java.util.HashMap;
+import java.util.Map;
+
+/**
+ * Created by guyc on 06/05/16.
+ */
+public class ModalController {
+    private static ModalController sInstance;
+
+    private final Map<String, WeakReference<RnnModal>> mModals;
+
+    private ModalController() {
+        mModals = new HashMap<>();
+    }
+
+    public static synchronized ModalController getInstance() {
+        if (sInstance == null) {
+            sInstance = new ModalController();
+        }
+
+        return sInstance;
+    }
+
+    public void add(RnnModal modal, String navigatorId) {
+        mModals.put(navigatorId, new WeakReference<>(modal));
+    }
+
+    public boolean isModalDisplayed(String navigatorId) {
+        return mModals.size() != 0 && mModals.containsKey(navigatorId);
+    }
+
+    @Nullable
+    public RnnModal get(String navigatorId) {
+        if (mModals.containsKey(navigatorId)) {
+            return RefUtils.get(mModals.get(navigatorId));
+        }
+
+        return null;
+    }
+
+    public void remove(String navigatorId) {
+        if (mModals.containsKey(navigatorId)) {
+            mModals.remove(navigatorId);
+        }
+    }
+}

android/app/src/main/java/com/reactnativenavigation/modal/RnnModal.java

@@ -0,0 +1,74 @@
+package com.reactnativenavigation.modal;
+
+import android.annotation.SuppressLint;
+import android.app.Dialog;
+import android.content.Context;
+import android.content.DialogInterface;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.Window;
+import android.view.animation.Animation;
+import android.view.animation.AnimationUtils;
+
+import com.reactnativenavigation.R;
+import com.reactnativenavigation.activities.BaseReactActivity;
+import com.reactnativenavigation.controllers.ModalController;
+import com.reactnativenavigation.core.objects.Screen;
+import com.reactnativenavigation.views.RctView;
+import com.reactnativenavigation.views.ScreenStack;
+
+/**
+ * Created by guyc on 02/05/16.
+ */
+public class RnnModal extends Dialog implements DialogInterface.OnDismissListener {
+
+    private ScreenStack mScreenStack;
+    private Screen mScreen;
+    private View mContentView;
+
+    public RnnModal(BaseReactActivity context, Screen screen) {
+        super(context, R.style.Modal);
+        mScreen = screen;
+        ModalController.getInstance().add(this, screen.navigatorId);
+        init(context);
+    }
+
+    @SuppressLint("InflateParams")
+    private void init(final Context context) {
+        requestWindowFeature(Window.FEATURE_NO_TITLE);
+        mContentView = LayoutInflater.from(context).inflate(R.layout.modal_layout, null, false);
+        mScreenStack = (ScreenStack) mContentView.findViewById(R.id.screenStack);
+        setContentView(mContentView);
+        mScreenStack.push(mScreen, new RctView.OnDisplayedListener() {
+            @Override
+            public void onDisplayed() {
+                Animation animation = AnimationUtils.loadAnimation(context, R.anim.slide_up);
+                mContentView.setAnimation(animation);
+                mContentView.animate();
+            }
+        });
+    }
+
+    public void push(Screen screen) {
+        mScreenStack.push(screen);
+    }
+
+    public Screen pop() {
+        return mScreenStack.pop();
+    }
+
+    @Override
+    public void onBackPressed() {
+        if (mScreenStack.getStackSize() > 1) {
+            mScreenStack.pop();
+        } else {
+            ModalController.getInstance().remove(mScreen.navigatorId);
+            super.onBackPressed();
+        }
+    }
+
+    @Override
+    public void onDismiss(DialogInterface dialog) {
+        ModalController.getInstance().remove(mScreen.navigatorId);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/modules/RctActivityModule.java

@@ -12,7 +12,9 @@ import com.facebook.react.bridge.ReadableMap;
 import com.reactnativenavigation.activities.BaseReactActivity;
 import com.reactnativenavigation.activities.SingleScreenActivity;
 import com.reactnativenavigation.activities.TabActivity;
+import com.reactnativenavigation.controllers.ModalController;
 import com.reactnativenavigation.core.objects.Screen;
+import com.reactnativenavigation.modal.RnnModal;
 import com.reactnativenavigation.utils.ContextProvider;
 
 import java.util.ArrayList;
@@ -71,27 +73,77 @@ public class RctActivityModule extends ReactContextBaseJavaModule {
     }
 
     @ReactMethod
-    public void navigatorPush(final ReadableMap screen) {
+    public void navigatorPush(final ReadableMap skreen) {
+        final Screen screen = new Screen(skreen);
         final BaseReactActivity context = ContextProvider.getActivityContext();
-         if (context != null && !context.isFinishing()) {
-             context.runOnUiThread(new Runnable() {
+        if (context == null || context.isFinishing()) {
+            return;
+        }
+
+        // First, check is the screen should be displayed in a Modal
+        ModalController modalController = ModalController.getInstance();
+        if (modalController.isModalDisplayed(screen.navigatorId)) {
+            final RnnModal modal = modalController.get(screen.navigatorId);
+            if (modal != null) {
+                context.runOnUiThread(new Runnable() {
+                    @Override
+                    public void run() {
+                        modal.push(screen);
+                    }
+                });
+            }
+            return;
+        }
+
+        // No Modal is displayed, Push to activity
+         context.runOnUiThread(new Runnable() {
                  @Override
                  public void run() {
-                     context.push(new Screen(screen));
+                     context.push(screen);
                  }
              });
-        }
     }
 
     @ReactMethod
     public void navigatorPop(final ReadableMap navigator) {
-        final String navID = navigator.getString("navigatorID");
+        final String navigatorId = navigator.getString("navigatorID");
+        final BaseReactActivity context = ContextProvider.getActivityContext();
+        if (context == null || context.isFinishing()) {
+            return;
+        }
+
+        // First, check if the screen should be popped from a Modal
+        ModalController modalController = ModalController.getInstance();
+        if (modalController.isModalDisplayed(navigatorId)) {
+            final RnnModal modal = modalController.get(navigatorId);
+            if (modal != null) {
+                context.runOnUiThread(new Runnable() {
+                    @Override
+                    public void run() {
+                        modal.pop();
+                    }
+                });
+            }
+            return;
+        }
+
+        context.runOnUiThread(new Runnable() {
+            @Override
+            public void run() {
+                context.pop(navigatorId);
+            }
+        });
+
+    }
+
+    @ReactMethod
+    public void showModal(final ReadableMap screen) {
         final BaseReactActivity context = ContextProvider.getActivityContext();
         if (context != null && !context.isFinishing()) {
             context.runOnUiThread(new Runnable() {
                 @Override
                 public void run() {
-                    context.pop(navID);
+                    new RnnModal(context, new Screen(screen)).show();
                 }
             });
         }

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

@@ -0,0 +1,20 @@
+package com.reactnativenavigation.utils;
+
+import java.lang.ref.WeakReference;
+
+/**
+ * Created by guyc on 06/05/16.
+ */
+public class RefUtils {
+    /**
+     * Extract the object within a WeakReference object
+     * @param wr the WeakReference to extract
+     * @return the object within the WR or null when object not available.
+     */
+    public static <T> T get(WeakReference<T> wr) {
+        if (wr != null) {
+            return wr.get();
+        }
+        return null;
+    }
+}

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

@@ -1,6 +1,7 @@
 package com.reactnativenavigation.views;
 
 import android.os.Bundle;
+import android.view.ViewTreeObserver;
 import android.widget.FrameLayout;
 
 import com.facebook.react.ReactInstanceManager;
@@ -15,11 +16,26 @@ public class RctView extends FrameLayout {
 
     private ReactRootView mReactRootView;
 
+    /**
+     * Interface used to run some code when the {@link ReactRootView} is visible.
+     */
+    public interface OnDisplayedListener {
+        /**
+         * This method will be invoked when the {@link ReactRootView} is visible.
+         */
+        public void onDisplayed();
+    }
+
     public ReactRootView getReactRootView() {
         return mReactRootView;
     }
 
     public RctView(BaseReactActivity ctx, ReactInstanceManager rctInstanceManager, Screen screen) {
+        this(ctx, rctInstanceManager, screen, null);
+    }
+
+    public RctView(BaseReactActivity ctx, ReactInstanceManager rctInstanceManager, Screen screen,
+                   final OnDisplayedListener onDisplayedListener) {
         super(ctx);
         setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
 
@@ -34,6 +50,16 @@ public class RctView extends FrameLayout {
 
         mReactRootView.startReactApplication(rctInstanceManager, componentName, passProps);
 
+        if (onDisplayedListener != null) {
+            mReactRootView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
+                @Override
+                public void onGlobalLayout() {
+                    onDisplayedListener.onDisplayed();
+                    mReactRootView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
+                }
+            });
+        }
+
         addView(mReactRootView);
     }
 }

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

@@ -60,10 +60,17 @@ public class RnnToolBar extends Toolbar {
     }
 
     @SuppressWarnings({"ConstantConditions"})
-    @SuppressLint("PrivateResource")
     public void showBackButton(Screen screen) {
         ActionBar actionBar = ContextProvider.getActivityContext().getSupportActionBar();
 
+        Drawable backButton = setupBackButton(screen);
+        actionBar.setHomeAsUpIndicator(backButton);
+        actionBar.setDisplayHomeAsUpEnabled(true);
+    }
+
+    @SuppressLint("PrivateResource")
+    @SuppressWarnings({"ConstantConditions"})
+    private Drawable setupBackButton(Screen screen) {
         Resources resources = getResources();
         final Drawable backButton;
         if (screen.buttonsTintColor != null) {
@@ -76,8 +83,7 @@ public class RnnToolBar extends Toolbar {
                     R.drawable.abc_ic_ab_back_mtrl_am_alpha,
                     ContextProvider.getActivityContext().getTheme());
         }
-        actionBar.setHomeAsUpIndicator(backButton);
-        actionBar.setDisplayHomeAsUpEnabled(true);
+        return backButton;
     }
 
     @SuppressWarnings({"ConstantConditions"})

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

@@ -1,6 +1,8 @@
 package com.reactnativenavigation.views;
 
 import android.animation.LayoutTransition;
+import android.content.Context;
+import android.util.AttributeSet;
 import android.widget.FrameLayout;
 
 import com.facebook.react.ReactInstanceManager;
@@ -29,20 +31,33 @@ public class ScreenStack extends FrameLayout {
     private final Stack<ScreenView> mStack = new Stack<>();
     private final ReactInstanceManager mReactInstanceManager =
             RctManager.getInstance().getReactInstanceManager();
-    private final BaseReactActivity mReactActivity;
+    private BaseReactActivity mReactActivity;
 
     public ScreenStack(BaseReactActivity context) {
         super(context);
-        mReactActivity = context;
+        init(context);
+    }
+
+    public ScreenStack(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        init(context);
+    }
+
+    private void init(Context context) {
+        mReactActivity = (BaseReactActivity) context;
         setLayoutTransition(new LayoutTransition());
     }
 
     public void push(Screen screen) {
+        push(screen, null);
+    }
+
+    public void push(Screen screen, RctView.OnDisplayedListener onDisplayed) {
         RctView oldView = null;
         if (!mStack.isEmpty()) {
             oldView = mStack.peek().view;
         }
-        RctView view = new RctView(mReactActivity, mReactInstanceManager, screen);
+        RctView view = new RctView(mReactActivity, mReactInstanceManager, screen, onDisplayed);
         addView(view, MATCH_PARENT, MATCH_PARENT);
         if (oldView != null) {
             ReactRootView reactRootView = oldView.getReactRootView();

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

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android"
+     android:interpolator="@android:anim/accelerate_interpolator">
+    <translate
+        android:fromYDelta="0"
+        android:toYDelta="100%"
+        android:duration="190"/>
+</set>

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<set xmlns:android="http://schemas.android.com/apk/res/android"
+    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
+    android:shareInterpolator="true">
+    <translate
+        android:fromYDelta="100%"
+        android:toYDelta="0"
+        android:duration="350"/>
+</set>

android/app/src/main/res/layout/modal_layout.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:background="@android:color/transparent"
+    android:orientation="vertical"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <android.support.design.widget.AppBarLayout
+        android:id="@+id/appbar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:fitsSystemWindows="true">
+        <com.reactnativenavigation.views.RnnToolBar
+            android:id="@+id/toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="?attr/actionBarSize"
+            app:layout_scrollFlags="scroll|enterAlways"/>
+    </android.support.design.widget.AppBarLayout>
+
+    <com.reactnativenavigation.views.ScreenStack
+        android:id="@+id/screenStack"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"/>
+</LinearLayout>

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

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="Modal" 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>
+</resources>

example-redux/src/screens/FirstTabScreen.js

@@ -72,18 +72,30 @@ class FirstTabScreen extends Component {
           <Text style={styles.button}>Push Screen</Text>
         </TouchableOpacity>
 
+        <TouchableOpacity onPress={ this.onShowModalPress.bind(this) }>
+          <Text style={styles.button}>Modal Screen</Text>
+        </TouchableOpacity>
       </View>
     );
   }
+
   onIncrementPress() {
     this.props.dispatch(counterActions.increment());
   }
+
   onPushPress() {
     this.props.navigator.push({
       title: "More",
       screen: "example.PushedScreen"
     });
   }
+
+  onShowModalPress() {
+    this.props.navigator.showModal({
+      title: "Modal Screen",
+      screen: "example.PushedScreen"
+    });
+  }
 }
 
 const styles = StyleSheet.create({

src/platformSpecific.android.js

@@ -51,6 +51,11 @@ function navigatorPop(navigator, params) {
   RctActivity.navigatorPop(navigator);
 }
 
+function showModal(params) {
+  addNavigatorParams(params)
+  RctActivity.showModal(params);
+}
+
 function addNavigatorParams(screen, navigator = null, idx = '') {
   screen.navigatorID = navigator ? navigator.navigatorID : utils.getRandomId() + '_nav' + idx;
   screen.screenInstanceID = utils.getRandomId();
@@ -80,8 +85,9 @@ function addToolbarStyleParams(screen) {
 }
 
 export default {
-  startSingleScreenApp,
   startTabBasedApp,
+  startSingleScreenApp,
   navigatorPush,
-  navigatorPop
+  navigatorPop,
+  showModal
 }