Merge branch 'modal'

android/app/src/main/java/com/reactnativenavigation/activities/BaseReactActivity.java

@@ -29,7 +29,7 @@ import com.reactnativenavigation.core.objects.Button;
 import com.reactnativenavigation.core.objects.Screen;
 import com.reactnativenavigation.packages.RnnPackage;
 import com.reactnativenavigation.utils.ContextProvider;
-import com.reactnativenavigation.utils.SdkSupports;
+import com.reactnativenavigation.utils.StyleHelper;
 import com.reactnativenavigation.views.RnnToolBar;
 
 import java.util.Arrays;
@@ -170,24 +170,12 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
         setContentView(mReactRootView);
     }
 
-    public void setNavigationColors(Screen screen) {
-        if (screen.toolBarColor != null) {
-            mToolbar.setBackgroundColor(screen.toolBarColor);
+    public void setNavigationStyle(Screen screen) {
+        if (mToolbar != null) {
+            mToolbar.setStyle(screen);
         }
 
-        if (screen.titleColor != null) {
-            mToolbar.setTitleTextColor(screen.titleColor);
-        }
-
-        if (SdkSupports.lollipop()) {
-            if (screen.statusBarColor != null) {
-                getWindow().setStatusBarColor(screen.statusBarColor);
-            }
-
-            if (screen.navigationBarColor != null) {
-                getWindow().setNavigationBarColor(screen.navigationBarColor);
-            }
-        }
+        StyleHelper.setWindowStyle(getWindow(), this, screen);
     }
 
     @Override
@@ -227,6 +215,7 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
 
     @CallSuper
     public void push(Screen screen) {
+        setNavigationStyle(screen);
         if (mToolbar != null &&
             getCurrentNavigatorId().equals(screen.navigatorId) &&
             getScreenStackSize() >= 1) {

android/app/src/main/java/com/reactnativenavigation/activities/SingleScreenActivity.java

@@ -36,7 +36,7 @@ public class SingleScreenActivity extends BaseReactActivity {
     }
 
     protected void setupToolbar(Screen screen) {
-        setNavigationColors(screen);
+        setNavigationStyle(screen);
         mToolbar.setTitle(screen.title);
         setSupportActionBar(mToolbar);
     }
@@ -44,13 +44,16 @@ public class SingleScreenActivity extends BaseReactActivity {
     @Override
     public void push(Screen screen) {
         super.push(screen);
+        setNavigationStyle(screen);
         mScreenStack.push(screen);
     }
 
     @Override
     public Screen pop(String navigatorId) {
         super.pop(navigatorId);
-        return mScreenStack.pop();
+        Screen screen = mScreenStack.pop();
+        setNavigationStyle(screen);
+        return screen;
     }
 
     @Override

android/app/src/main/java/com/reactnativenavigation/activities/TabActivity.java

@@ -1,6 +1,5 @@
 package com.reactnativenavigation.activities;
 
-import android.support.design.widget.TabLayout;
 import android.support.v4.view.ViewPager;
 import android.view.Menu;
 
@@ -8,6 +7,7 @@ import com.reactnativenavigation.R;
 import com.reactnativenavigation.adapters.ViewPagerAdapter;
 import com.reactnativenavigation.core.RctManager;
 import com.reactnativenavigation.core.objects.Screen;
+import com.reactnativenavigation.views.RnnTabLayout;
 import com.reactnativenavigation.views.RnnToolBar;
 
 import java.util.ArrayList;
@@ -18,7 +18,7 @@ import java.util.ArrayList;
 public class TabActivity extends BaseReactActivity {
     public static final String EXTRA_SCREENS = "extraScreens";
 
-    private TabLayout mTabLayout;
+    private RnnTabLayout mTabLayout;
     private ViewPager mViewPager;
     private ViewPagerAdapter mAdapter;
 
@@ -28,7 +28,7 @@ public class TabActivity extends BaseReactActivity {
 
         setContentView(R.layout.tab_activity);
         mToolbar = (RnnToolBar) findViewById(R.id.toolbar);
-        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
+        mTabLayout = (RnnTabLayout) findViewById(R.id.tabLayout);
         mViewPager = (ViewPager) findViewById(R.id.viewPager);
 
         ArrayList<Screen> screens = (ArrayList<Screen>) getIntent().getSerializableExtra(EXTRA_SCREENS);
@@ -39,26 +39,16 @@ public class TabActivity extends BaseReactActivity {
 
     private void setupToolbar(ArrayList<Screen> screens) {
         Screen initialScreen = screens.get(0);
-        setNavigationColors(initialScreen);
+        setNavigationStyle(initialScreen);
         mToolbar.setScreens(screens);
-        mToolbar.setTitle(initialScreen.title == null ? "" : initialScreen.title);
+        mToolbar.setTitle(initialScreen.title);
         setSupportActionBar(mToolbar);
     }
 
     @Override
-    public void setNavigationColors(Screen screen) {
-        super.setNavigationColors(screen);
-        if (screen.toolBarColor != null) {
-            mTabLayout.setBackgroundColor(screen.toolBarColor);
-        }
-
-        if (screen.tabNormalTextColor != null && screen.tabSelectedTextColor != null) {
-            mTabLayout.setTabTextColors(screen.tabNormalTextColor, screen.tabSelectedTextColor);
-        }
-
-        if (screen.tabIndicatorColor != null) {
-            mTabLayout.setSelectedTabIndicatorColor(screen.tabIndicatorColor);
-        }
+    public void setNavigationStyle(Screen screen) {
+        super.setNavigationStyle(screen);
+        mTabLayout.setStyle(screen);
     }
 
     private void setupViewPager(ArrayList<Screen> screens) {
@@ -85,7 +75,9 @@ public class TabActivity extends BaseReactActivity {
     @Override
     public Screen pop(String navigatorId) {
         super.pop(navigatorId);
-        return mAdapter.pop(navigatorId);
+        Screen screen = mAdapter.pop(navigatorId);
+        setNavigationStyle(screen);
+        return screen;
     }
 
     @Override

android/app/src/main/java/com/reactnativenavigation/adapters/ViewPagerAdapter.java

@@ -11,6 +11,7 @@ import com.facebook.react.bridge.WritableMap;
 import com.reactnativenavigation.activities.BaseReactActivity;
 import com.reactnativenavigation.core.RctManager;
 import com.reactnativenavigation.core.objects.Screen;
+import com.reactnativenavigation.utils.ContextProvider;
 import com.reactnativenavigation.views.RnnToolBar;
 import com.reactnativenavigation.views.ScreenStack;
 
@@ -109,6 +110,9 @@ public class ViewPagerAdapter extends PagerAdapter implements TabLayout.OnTabSel
         // Set title
         mToolbar.setTitle(newScreen.title == null ? "" : newScreen.title);
 
+        // Set navigation color
+        ContextProvider.getActivityContext().setNavigationStyle(newScreen);
+
         // Send tab selected event
         WritableMap params = Arguments.createMap();
         Screen screen = mScreenStacks.get(position).peek();

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

@@ -0,0 +1,70 @@
+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.Iterator;
+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() {
+        return mModals.size() != 0;
+    }
+
+    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);
+        }
+    }
+
+    public void dismissAllModals() {
+        Iterator<String> iterator = mModals.keySet().iterator();
+        while (iterator.hasNext()) {
+            WeakReference<RnnModal> ref = mModals.get(iterator.next());
+            RnnModal modal = RefUtils.get(ref);
+            if (modal != null) {
+                modal.dismiss();
+            }
+        }
+    }
+}

android/app/src/main/java/com/reactnativenavigation/core/objects/Screen.java

@@ -36,14 +36,14 @@ public class Screen extends JsonObject implements Serializable {
     private static final String KEY_TAB_SELECTED_TEXT_COLOR = "tabSelectedTextColor";
     private static final String KEY_TAB_INDICATOR_COLOR = "tabIndicatorColor";
 
-    public String title;
-    public String label;
-    public String screenId;
-    public String screenInstanceId;
-    public String navigatorId;
-    public String navigatorEventId;
-    public int icon;
-    public ArrayList<Button> buttons;
+    public final String title;
+    public final String label;
+    public final String screenId;
+    public final String screenInstanceId;
+    public final String navigatorId;
+    public final String navigatorEventId;
+    public final int icon;
+    public final ArrayList<Button> buttons;
 
     // Navigation styling
     @Nullable @ColorInt public Integer toolBarColor;
@@ -69,18 +69,20 @@ public class Screen extends JsonObject implements Serializable {
         navigatorEventId = getString(screen, KEY_NAVIGATOR_EVENT_ID);
         icon = getInt(screen, KEY_ICON);
 
-        setButtons(screen);
+        buttons = getButtons(screen);
         setToolbarStyle(screen);
     }
 
-    private void setButtons(ReadableMap screen) {
+    private ArrayList<Button> getButtons(ReadableMap screen) {
+        ArrayList<Button> ret = null;
         if (screen.hasKey(KEY_RIGHT_BUTTONS)) {
-            buttons = new ArrayList<>();
+            ret = new ArrayList<>();
             ReadableArray rightButtons = screen.getArray(KEY_RIGHT_BUTTONS);
             for (int i = 0; i < rightButtons.size(); i++) {
-                buttons.add(new Button(rightButtons.getMap(i)));
+                ret.add(new Button(rightButtons.getMap(i)));
             }
         }
+        return ret;
     }
 
     public void setToolbarStyle(ReadableMap screen) {

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

@@ -0,0 +1,90 @@
+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.WindowManager;
+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.utils.SdkSupports;
+import com.reactnativenavigation.utils.StyleHelper;
+import com.reactnativenavigation.views.RctView;
+import com.reactnativenavigation.views.RnnToolBar;
+import com.reactnativenavigation.views.ScreenStack;
+
+/**
+ * Created by guyc on 02/05/16.
+ */
+public class RnnModal extends Dialog implements DialogInterface.OnDismissListener {
+
+    private ScreenStack mScreenStack;
+    private View mContentView;
+    private Screen mScreen;
+
+    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);
+        RnnToolBar toolBar = (RnnToolBar) mContentView.findViewById(R.id.toolbar);
+        mScreenStack = (ScreenStack) mContentView.findViewById(R.id.screenStack);
+
+        setContentView(mContentView);
+        toolBar.setStyle(mScreen);
+        toolBar.setTitle(mScreen.title);
+        toolBar.setupToolbarButtonsAsync(mScreen);
+        mScreenStack.push(mScreen, new RctView.OnDisplayedListener() {
+            @Override
+            public void onDisplayed() {
+                Animation animation = AnimationUtils.loadAnimation(context, R.anim.slide_up);
+                mContentView.setAnimation(animation);
+                mContentView.animate();
+            }
+        });
+
+        // Set navigation colors
+        if (SdkSupports.lollipop()) {
+            Window window = getWindow();
+            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
+            StyleHelper.setWindowStyle(window, context.getApplicationContext(), mScreen);
+        }
+    }
+
+    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,29 +73,94 @@ 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();
                 }
             });
         }
     }
+
+    @ReactMethod
+    public void dismissAllModals(final ReadableMap params) {
+        final BaseReactActivity context = ContextProvider.getActivityContext();
+        if (context != null && !context.isFinishing()) {
+        context.runOnUiThread(new Runnable() {
+            @Override
+            public void run() {
+                ModalController modalController = ModalController.getInstance();
+                if (modalController.isModalDisplayed()) {
+                    modalController.dismissAllModals();
+                }
+            }
+        });
+        }
+    }
 }

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/utils/StyleHelper.java

@@ -0,0 +1,30 @@
+package com.reactnativenavigation.utils;
+
+import android.content.Context;
+import android.support.v4.content.ContextCompat;
+import android.view.Window;
+
+import com.reactnativenavigation.core.objects.Screen;
+
+/**
+ * Created by guyc on 07/05/16.
+ */
+public class StyleHelper {
+    public static void setWindowStyle(Window window, Context context, Screen screen) {
+        if (SdkSupports.lollipop()) {
+            final int black = ContextCompat.getColor(context, android.R.color.black);
+            if (screen.statusBarColor != null) {
+                window.setStatusBarColor(screen.statusBarColor);
+            } else {
+                window.setStatusBarColor(black);
+            }
+
+            if (screen.navigationBarColor != null) {
+                window.setNavigationBarColor(screen.navigationBarColor);
+            } else {
+                window.setNavigationBarColor(black);
+            }
+        }
+
+    }
+}

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/RnnTabLayout.java

@@ -0,0 +1,77 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+import android.content.res.ColorStateList;
+import android.content.res.TypedArray;
+import android.graphics.drawable.Drawable;
+import android.support.design.widget.TabLayout;
+import android.util.AttributeSet;
+import android.util.TypedValue;
+
+import com.reactnativenavigation.R;
+import com.reactnativenavigation.core.objects.Screen;
+
+/**
+ * Created by guyc on 07/05/16.
+ */
+public class RnnTabLayout extends TabLayout {
+    private Drawable mBackground;
+    private ColorStateList mTabTextColors;
+    private int mSelectedTabIndicatorColor;
+
+    public RnnTabLayout(Context context) {
+        this(context, null);
+    }
+
+    public RnnTabLayout(Context context, AttributeSet attrs) {
+        this(context, attrs, 0);
+    }
+
+    public RnnTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        init(context);
+    }
+
+    private void init(Context ctx) {
+        mBackground = getBackground();
+        mTabTextColors = getTabTextColors();
+
+        // Get default accent color which is used as the selected tab indicator color
+        TypedValue typedValue = new TypedValue();
+        TypedArray a = ctx.obtainStyledAttributes(typedValue.data, new int[]{R.attr.colorAccent});
+        mSelectedTabIndicatorColor = a.getColor(0, 0);
+        a.recycle();
+    }
+
+    public void setStyle(Screen screen) {
+        if (screen.toolBarColor != null) {
+            setBackgroundColor(screen.toolBarColor);
+        } else {
+            resetBackground();
+        }
+
+        if (screen.tabNormalTextColor != null && screen.tabSelectedTextColor != null) {
+            setTabTextColors(screen.tabNormalTextColor, screen.tabSelectedTextColor);
+        } else {
+            resetTextColors();
+        }
+
+        if (screen.tabIndicatorColor != null) {
+            setSelectedTabIndicatorColor(screen.tabIndicatorColor);
+        } else {
+            resetSelectedTabIndicatorColor();
+        }
+    }
+
+    public void resetBackground() {
+        setBackground(mBackground);
+    }
+
+    public void resetTextColors() {
+        setTabTextColors(mTabTextColors);
+    }
+
+    public void resetSelectedTabIndicatorColor() {
+        setSelectedTabIndicatorColor(mSelectedTabIndicatorColor);
+    }
+}

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

@@ -5,6 +5,7 @@ import android.content.Context;
 import android.content.res.Resources;
 import android.graphics.drawable.Drawable;
 import android.os.AsyncTask;
+import android.support.v4.content.ContextCompat;
 import android.support.v4.content.res.ResourcesCompat;
 import android.support.v7.app.ActionBar;
 import android.support.v7.widget.Toolbar;
@@ -32,27 +33,62 @@ public class RnnToolBar extends Toolbar {
 
     private List<Screen> mScreens;
     private AsyncTask mSetupToolbarTask;
+    private Drawable mBackground;
 
     public RnnToolBar(Context context) {
         super(context);
+        init();
     }
 
     public RnnToolBar(Context context, AttributeSet attrs) {
         super(context, attrs);
+        init();
     }
 
     public RnnToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
+        init();
+    }
+
+    private void init() {
+        mBackground = getBackground();
     }
 
     public void setScreens(List<Screen> screens) {
         mScreens = screens;
     }
 
+    public void setStyle(Screen screen) {
+        if (screen.toolBarColor != null) {
+            setBackgroundColor(screen.toolBarColor);
+        } else {
+            resetBackground();
+        }
+
+        if (screen.titleColor != null) {
+            setTitleTextColor(screen.titleColor);
+        } else {
+            resetTitleTextColor();
+        }
+    }
+
+    private void resetBackground() {
+        setBackground(mBackground);
+    }
+
+    private void resetTitleTextColor() {
+        setTitleTextColor(ContextCompat.getColor(getContext(), android.R.color.primary_text_light));
+    }
+
     public void handleOnCreateOptionsMenuAsync() {
         setupToolbarButtonsAsync(null, mScreens.get(0));
     }
 
+    public void setupToolbarButtonsAsync(Screen newScreen) {
+        this.setupToolbarButtonsAsync(null, newScreen);
+    }
+
+
     public void setupToolbarButtonsAsync(Screen oldScreen, Screen newScreen) {
         if (mSetupToolbarTask == null) {
             mSetupToolbarTask = new SetupToolbarButtonsTask(this, oldScreen, newScreen).execute();
@@ -60,10 +96,16 @@ 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 +118,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,12 @@
+<?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">
+    <translate
+        android:fromYDelta="0"
+        android:toYDelta="100%"/>
+    <alpha
+        android:fromAlpha="1"
+        android:toAlpha="0"/>
+</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="250"/>
+</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/layout/tab_activity.xml

@@ -17,7 +17,7 @@
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
             app:layout_scrollFlags="scroll|enterAlways"/>
-        <android.support.design.widget.TabLayout
+        <com.reactnativenavigation.views.RnnTabLayout
             android:id="@+id/tabLayout"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"

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({

example-redux/src/screens/index.js

@@ -1,4 +1,4 @@
-import { Navigation } from 'react-native-navigation';
+import {Navigation} from 'react-native-navigation';
 
 import LoginScreen from './LoginScreen';
 import FirstTabScreen from './FirstTabScreen';

src/platformSpecific.android.js

@@ -21,7 +21,7 @@ function startSingleScreenApp(params) {
 
   addNavigatorParams(screen);
   addNavigatorButtons(screen);
-  addToolbarStyleParams(screen);
+  addNavigationStyleParams(screen);
   RctActivity.startSingleScreenApp(screen);
 }
 
@@ -34,7 +34,7 @@ function startTabBasedApp(params) {
   params.tabs.forEach(function (tab, idx) {
     addNavigatorParams(tab, null, idx)
     addNavigatorButtons(tab);
-    addToolbarStyleParams(tab);
+    addNavigationStyleParams(tab);
   });
 
   RctActivity.startTabBasedApp(params.tabs);
@@ -43,7 +43,7 @@ function startTabBasedApp(params) {
 function navigatorPush(navigator, params) {
   addNavigatorParams(params, navigator)
   addNavigatorButtons(params);
-  addToolbarStyleParams(params);
+  addNavigationStyleParams(params);
   RctActivity.navigatorPush(params);
 }
 
@@ -51,6 +51,17 @@ function navigatorPop(navigator, params) {
   RctActivity.navigatorPop(navigator);
 }
 
+function showModal(params) {
+  addNavigatorParams(params);
+  addNavigatorButtons(params);
+  addNavigationStyleParams(params);
+  RctActivity.showModal(params);
+}
+
+function dismissAllModals(params) {
+  RctActivity.dismissAllModals(params.animationType);
+}
+
 function addNavigatorParams(screen, navigator = null, idx = '') {
   screen.navigatorID = navigator ? navigator.navigatorID : utils.getRandomId() + '_nav' + idx;
   screen.screenInstanceID = utils.getRandomId();
@@ -74,14 +85,16 @@ function addNavigatorButtons(screen) {
   }
 }
 
-function addToolbarStyleParams(screen) {
+function addNavigationStyleParams(screen) {
   const Screen = Navigation.getRegisteredScreen(screen.screen);
   screen.navigatorStyle = Screen.navigatorStyle;
 }
 
 export default {
-  startSingleScreenApp,
   startTabBasedApp,
+  startSingleScreenApp,
   navigatorPush,
-  navigatorPop
+  navigatorPop,
+  showModal,
+  dismissAllModals
 }