Set Modal style from screen

This commit also fixes issue where style was not cleared when changing
tabs, and when pushing or popping screens.

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/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

@@ -7,6 +7,7 @@ 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;
 
@@ -14,7 +15,10 @@ 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;
 
 /**
@@ -23,8 +27,8 @@ import com.reactnativenavigation.views.ScreenStack;
 public class RnnModal extends Dialog implements DialogInterface.OnDismissListener {
 
     private ScreenStack mScreenStack;
-    private Screen mScreen;
     private View mContentView;
+    private Screen mScreen;
 
     public RnnModal(BaseReactActivity context, Screen screen) {
         super(context, R.style.Modal);
@@ -37,8 +41,13 @@ public class RnnModal extends Dialog implements DialogInterface.OnDismissListene
     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() {
@@ -47,6 +56,13 @@ public class RnnModal extends Dialog implements DialogInterface.OnDismissListene
                 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) {

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

@@ -133,7 +133,6 @@ public class RctActivityModule extends ReactContextBaseJavaModule {
                 context.pop(navigatorId);
             }
         });
-
     }
 
     @ReactMethod

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/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();
@@ -62,7 +98,6 @@ public class RnnToolBar extends Toolbar {
     @SuppressWarnings({"ConstantConditions"})
     public void showBackButton(Screen screen) {
         ActionBar actionBar = ContextProvider.getActivityContext().getSupportActionBar();
-
         Drawable backButton = setupBackButton(screen);
         actionBar.setHomeAsUpIndicator(backButton);
         actionBar.setDisplayHomeAsUpEnabled(true);

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

@@ -1,8 +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:interpolator="@android:anim/accelerate_interpolator"
+    android:shareInterpolator="true"
+    android:duration="190">
     <translate
         android:fromYDelta="0"
-        android:toYDelta="100%"
-        android:duration="190"/>
+        android:toYDelta="100%"/>
+    <alpha
+        android:fromAlpha="1"
+        android:toAlpha="0"/>
 </set>

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"

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);
 }
 
@@ -52,7 +52,9 @@ function navigatorPop(navigator, params) {
 }
 
 function showModal(params) {
-  addNavigatorParams(params)
+  addNavigatorParams(params);
+  addNavigatorButtons(params);
+  addNavigationStyleParams(params);
   RctActivity.showModal(params);
 }
 
@@ -79,7 +81,7 @@ function addNavigatorButtons(screen) {
   }
 }
 
-function addToolbarStyleParams(screen) {
+function addNavigationStyleParams(screen) {
   const Screen = Navigation.getRegisteredScreen(screen.screen);
   screen.navigatorStyle = Screen.navigatorStyle;
 }