Added styling options for navigation components

Navigation views such as ToolBar, StatusBar, NavigationBar can now be
customized through a static JSON defined in each screen component.

Styling options introduced in this commit:

 - ToolBar color
 - StatusBar color
 - NavigationBar color
 - Buttons tint color
 - Title color
 - Tab normal text color
 - Tab Selected text color
 - Selected tab inidicator color

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

@@ -29,6 +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.views.RnnToolBar;
 
 import java.util.Arrays;
@@ -169,6 +170,26 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
         setContentView(mReactRootView);
     }
 
+    public void setNavigationColors(Screen screen) {
+        if (screen.toolBarColor != null) {
+            mToolbar.setBackgroundColor(screen.toolBarColor);
+        }
+
+        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);
+            }
+        }
+    }
+
     @Override
     protected void onResume() {
         super.onResume();
@@ -209,7 +230,7 @@ public abstract class BaseReactActivity extends AppCompatActivity implements Def
         if (mToolbar != null &&
             getCurrentNavigatorId().equals(screen.navigatorId) &&
             getScreenStackSize() >= 1) {
-            mToolbar.showBackButton();
+            mToolbar.showBackButton(screen);
         }
     }
 

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

@@ -1,11 +1,11 @@
 package com.reactnativenavigation.activities;
 
-import android.support.v7.widget.Toolbar;
 import android.widget.FrameLayout;
 
 import com.reactnativenavigation.R;
 import com.reactnativenavigation.core.RctManager;
 import com.reactnativenavigation.core.objects.Screen;
+import com.reactnativenavigation.views.RnnToolBar;
 import com.reactnativenavigation.views.ScreenStack;
 
 /**
@@ -15,7 +15,6 @@ public class SingleScreenActivity extends BaseReactActivity {
 
     public static final String EXTRA_SCREEN = "extraScreen";
 
-    private Toolbar mToolbar;
     private ScreenStack mScreenStack;
     private String mNavigatorId;
 
@@ -24,11 +23,11 @@ public class SingleScreenActivity extends BaseReactActivity {
         mReactInstanceManager = RctManager.getInstance().getReactInstanceManager();
 
         setContentView(R.layout.single_screen_activity);
-        mToolbar = (Toolbar) findViewById(R.id.toolbar);
+        mToolbar = (RnnToolBar) findViewById(R.id.toolbar);
 
         Screen screen = (Screen) getIntent().getSerializableExtra(EXTRA_SCREEN);
         mNavigatorId = screen.navigatorId;
-        setupToolbar(screen.title);
+        setupToolbar(screen);
 
         mScreenStack = new ScreenStack(this);
         FrameLayout contentFrame = (FrameLayout) findViewById(R.id.contentFrame);
@@ -36,8 +35,9 @@ public class SingleScreenActivity extends BaseReactActivity {
         mScreenStack.push(screen);
     }
 
-    private void setupToolbar(String title) {
-        mToolbar.setTitle(title);
+    protected void setupToolbar(Screen screen) {
+        setNavigationColors(screen);
+        mToolbar.setTitle(screen.title);
         setSupportActionBar(mToolbar);
     }
     

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

@@ -38,8 +38,25 @@ public class TabActivity extends BaseReactActivity {
     }
 
     private void setupToolbar(ArrayList<Screen> screens) {
-        setSupportActionBar(mToolbar);
+        setNavigationColors(screens.get(0));
         mToolbar.setScreens(screens);
+        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);
+        }
     }
 
     private void setupViewPager(ArrayList<Screen> screens) {

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

@@ -21,7 +21,7 @@ import java.util.Map;
 /**
  * Created by guyc on 02/04/16.
  */
-public class ViewPagerAdapter extends PagerAdapter implements TabLayout.OnTabSelectedListener {
+public class ViewPagerAdapter extends PagerAdapter implements TabLayout.OnTabSelectedListener, ViewPager.OnPageChangeListener {
 
     private static final String EVENT_ON_TAB_SELECTED = "OnTabSelected";
 
@@ -30,7 +30,7 @@ public class ViewPagerAdapter extends PagerAdapter implements TabLayout.OnTabSel
     private final ArrayList<ScreenStack> mScreenStacks;
     private final ArrayList<String> mNavigatorIds;
     private final Map<String, ScreenStack> mStackByNavigatorId;
-
+    private int mCurrentPage = 0;
 
     public ViewPagerAdapter(BaseReactActivity context, ViewPager viewPager, RnnToolBar toolbar,
                             ArrayList<Screen> screens) {
@@ -50,12 +50,17 @@ public class ViewPagerAdapter extends PagerAdapter implements TabLayout.OnTabSel
 
     public void push(Screen screen) {
         ScreenStack stack = mStackByNavigatorId.get(screen.navigatorId);
+        Screen prevScreen = mScreenStacks.get(mCurrentPage).peek();
+        mToolbar.setupToolbarButtonsAsync(prevScreen, screen);
         stack.push(screen);
     }
 
     public Screen pop(String navigatorId) {
         ScreenStack stack = mStackByNavigatorId.get(navigatorId);
-        return stack != null ? stack.pop() : null;
+        Screen oldScreen =  stack != null ? stack.pop() : null;
+        Screen newScreen = stack.peek();
+        mToolbar.setupToolbarButtonsAsync(oldScreen, newScreen);
+        return oldScreen;
     }
 
     public Screen peek(String navigatorId) {
@@ -96,7 +101,9 @@ public class ViewPagerAdapter extends PagerAdapter implements TabLayout.OnTabSel
         int position = tab.getPosition();
         mViewPager.setCurrentItem(position);
 
-        mToolbar.setupToolbarButtonsAsync(mScreenStacks.get(position).peek());
+        Screen prevScreen = mScreenStacks.get(mCurrentPage).peek();
+        Screen newScreen = mScreenStacks.get(position).peek();
+        mToolbar.setupToolbarButtonsAsync(prevScreen, newScreen);
 
         // Send tab selected event
         WritableMap params = Arguments.createMap();
@@ -121,4 +128,19 @@ public class ViewPagerAdapter extends PagerAdapter implements TabLayout.OnTabSel
     public int getStackSizeForNavigatorId(String activeNavigatorID) {
         return mStackByNavigatorId.get(activeNavigatorID).getStackSize();
     }
+
+    @Override
+    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
+
+    }
+
+    @Override
+    public void onPageSelected(int position) {
+        mCurrentPage = position;
+    }
+
+    @Override
+    public void onPageScrollStateChanged(int state) {
+
+    }
 }

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

@@ -35,8 +35,8 @@ public class Button extends JsonObject implements Serializable {
     public String title;
     private String mIconSource;
 
-    private static AtomicInteger sAtomicIdGenerator = new AtomicInteger();
-    private static Map<String, Integer> sStringToNumericId = new HashMap<>();
+    private static final AtomicInteger sAtomicIdGenerator = new AtomicInteger();
+    private static final Map<String, Integer> sStringToNumericId = new HashMap<>();
 
     public Button(ReadableMap button) {
         id = getString(button, KEY_ID);

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

@@ -1,5 +1,7 @@
 package com.reactnativenavigation.core.objects;
 
+import android.graphics.Color;
+
 import com.facebook.react.bridge.ReadableMap;
 
 /**
@@ -18,4 +20,12 @@ public class JsonObject {
     protected int getInt(ReadableMap map, String key) {
         return map.hasKey(key) ? map.getInt(key) : -1;
     }
+
+    protected ReadableMap getMap(ReadableMap map, String key) {
+        return map.hasKey(key) ? map.getMap(key) : null;
+    }
+
+    protected Integer getColor(ReadableMap map, String key) {
+        return map.hasKey(key) ? Color.parseColor(map.getString(key)) : null;
+    }
 }

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

@@ -1,10 +1,15 @@
 package com.reactnativenavigation.core.objects;
 
+import android.support.annotation.ColorInt;
+import android.support.annotation.NonNull;
+import android.support.annotation.Nullable;
+
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 
 import java.io.Serializable;
 import java.util.ArrayList;
+import java.util.Collections;
 import java.util.List;
 
 /**
@@ -20,6 +25,15 @@ public class Screen extends JsonObject implements Serializable {
     public static final String KEY_NAVIGATOR_EVENT_ID = "navigatorEventID";
     private static final String KEY_ICON = "icon";
     private static final String KEY_RIGHT_BUTTONS = "rightButtons";
+    private static final String KEY_TOOL_BAR_STYLE = "navigatorStyle";
+    private static final String KEY_STATUS_BAR_COLOR = "statusBarColor";
+    private static final String KEY_TOOL_BAR_COLOR = "toolBarColor";
+    private static final String KEY_NAVIGATION_BAR_COLOR = "navigationBarColor";
+    private static final String KEY_BUTTONS_TINT_COLOR = "buttonsTint";
+    private static final String KEY_TITLE_COLOR = "titleColor";
+    private static final String KEY_TAB_NORMAL_TEXT_COLOR = "tabNormalTextColor";
+    private static final String KEY_TAB_SELECTED_TEXT_COLOR = "tabSelectedTextColor";
+    private static final String KEY_TAB_INDICATOR_COLOR = "tabIndicatorColor";
 
     public String title;
     public String screenId;
@@ -27,7 +41,22 @@ public class Screen extends JsonObject implements Serializable {
     public String navigatorId;
     public String navigatorEventId;
     public int icon;
-    public List<Button> buttons;
+    public ArrayList<Button> buttons;
+
+    // Navigation styling
+    @Nullable @ColorInt public Integer toolBarColor;
+    @Nullable @ColorInt public Integer statusBarColor;
+    @Nullable @ColorInt public Integer navigationBarColor;
+    @Nullable @ColorInt public Integer buttonsTintColor;
+    @Nullable @ColorInt public Integer titleColor;
+    @Nullable @ColorInt public Integer tabNormalTextColor;
+    @Nullable @ColorInt public Integer tabSelectedTextColor;
+    @Nullable @ColorInt public Integer tabIndicatorColor;
+
+    @NonNull
+    public List<Button> getButtons() {
+        return buttons == null ? Collections.EMPTY_LIST : buttons;
+    }
 
     public Screen(ReadableMap screen) {
         title = getString(screen, KEY_TITLE);
@@ -37,6 +66,11 @@ public class Screen extends JsonObject implements Serializable {
         navigatorEventId = getString(screen, KEY_NAVIGATOR_EVENT_ID);
         icon = getInt(screen, KEY_ICON);
 
+        setButtons(screen);
+        setToolbarStyle(screen);
+    }
+
+    private void setButtons(ReadableMap screen) {
         if (screen.hasKey(KEY_RIGHT_BUTTONS)) {
             buttons = new ArrayList<>();
             ReadableArray rightButtons = screen.getArray(KEY_RIGHT_BUTTONS);
@@ -45,4 +79,18 @@ public class Screen extends JsonObject implements Serializable {
             }
         }
     }
+
+    public void setToolbarStyle(ReadableMap screen) {
+        ReadableMap style = getMap(screen, KEY_TOOL_BAR_STYLE);
+        if (style != null) {
+            toolBarColor = getColor(style, KEY_TOOL_BAR_COLOR);
+            statusBarColor = getColor(style, KEY_STATUS_BAR_COLOR);
+            navigationBarColor = getColor(style, KEY_NAVIGATION_BAR_COLOR);
+            buttonsTintColor = getColor(style, KEY_BUTTONS_TINT_COLOR);
+            titleColor = getColor(style, KEY_TITLE_COLOR);
+            tabNormalTextColor = getColor(style, KEY_TAB_NORMAL_TEXT_COLOR);
+            tabSelectedTextColor = getColor(style, KEY_TAB_SELECTED_TEXT_COLOR);
+            tabIndicatorColor = getColor(style, KEY_TAB_INDICATOR_COLOR);
+        }
+    }
 }

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

@@ -0,0 +1,16 @@
+package com.reactnativenavigation.utils;
+
+import android.graphics.PorterDuff;
+import android.graphics.PorterDuffColorFilter;
+import android.graphics.drawable.Drawable;
+
+/**
+ * Created by guyc on 23/04/16.
+ */
+public class ImageUtils {
+
+    public static void tint(Drawable drawable, int tint) {
+        drawable.setColorFilter(new PorterDuffColorFilter(tint, PorterDuff.Mode.SRC_IN));
+    }
+
+}

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

@@ -0,0 +1,13 @@
+package com.reactnativenavigation.utils;
+
+import android.os.Build;
+
+/**
+ * Created by guyc on 23/04/16.
+ */
+public class SdkSupports {
+
+    public static boolean lollipop() {
+        return Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP;
+    }
+}

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

@@ -1,17 +1,23 @@
 package com.reactnativenavigation.views;
 
+import android.annotation.SuppressLint;
 import android.content.Context;
+import android.content.res.Resources;
 import android.graphics.drawable.Drawable;
 import android.os.AsyncTask;
+import android.support.v4.content.res.ResourcesCompat;
+import android.support.v7.app.ActionBar;
 import android.support.v7.widget.Toolbar;
 import android.util.AttributeSet;
 import android.view.Menu;
 import android.view.MenuItem;
 
+import com.reactnativenavigation.R;
 import com.reactnativenavigation.activities.BaseReactActivity;
 import com.reactnativenavigation.core.objects.Button;
 import com.reactnativenavigation.core.objects.Screen;
 import com.reactnativenavigation.utils.ContextProvider;
+import com.reactnativenavigation.utils.ImageUtils;
 
 import java.lang.ref.WeakReference;
 import java.util.Collections;
@@ -44,18 +50,34 @@ public class RnnToolBar extends Toolbar {
     }
 
     public void handleOnCreateOptionsMenuAsync() {
-        setupToolbarButtonsAsync(mScreens.get(0));
+        setupToolbarButtonsAsync(null, mScreens.get(0));
     }
 
-    public void setupToolbarButtonsAsync(Screen screen) {
+    public void setupToolbarButtonsAsync(Screen oldScreen, Screen newScreen) {
         if (mSetupToolbarTask == null) {
-            mSetupToolbarTask = new SetupToolbarButtonsTask(this, screen).execute();
+            mSetupToolbarTask = new SetupToolbarButtonsTask(this, oldScreen, newScreen).execute();
         }
     }
 
     @SuppressWarnings({"ConstantConditions"})
-    public void showBackButton() {
-        ContextProvider.getActivityContext().getSupportActionBar().setDisplayHomeAsUpEnabled(true);
+    @SuppressLint("PrivateResource")
+    public void showBackButton(Screen screen) {
+        ActionBar actionBar = ContextProvider.getActivityContext().getSupportActionBar();
+
+        Resources resources = getResources();
+        final Drawable backButton;
+        if (screen.buttonsTintColor != null) {
+            backButton = ResourcesCompat.getDrawable(resources,
+                    R.drawable.abc_ic_ab_back_mtrl_am_alpha,
+                    null);
+            ImageUtils.tint(backButton, screen.buttonsTintColor);
+        } else {
+            backButton = ResourcesCompat.getDrawable(resources,
+                    R.drawable.abc_ic_ab_back_mtrl_am_alpha,
+                    ContextProvider.getActivityContext().getTheme());
+        }
+        actionBar.setHomeAsUpIndicator(backButton);
+        actionBar.setDisplayHomeAsUpEnabled(true);
     }
 
     @SuppressWarnings({"ConstantConditions"})
@@ -64,12 +86,16 @@ public class RnnToolBar extends Toolbar {
     }
 
     private static class SetupToolbarButtonsTask extends AsyncTask<Void, Void, Map<String, Drawable>> {
-        private final List<Button> mButtons;
+        private final List<Button> mOldButtons;
+        private final List<Button> mNewButtons;
         private final WeakReference<RnnToolBar> mToolbarWR;
+        private final Integer mTintColor;
 
-        public SetupToolbarButtonsTask(RnnToolBar toolBar, Screen newScreen) {
+        public SetupToolbarButtonsTask(RnnToolBar toolBar, Screen oldScreen, Screen newScreen) {
             mToolbarWR = new WeakReference<>(toolBar);
-            mButtons = newScreen.buttons == null ? Collections.EMPTY_LIST : newScreen.buttons;
+            mOldButtons = oldScreen == null ? Collections.EMPTY_LIST : oldScreen.getButtons();
+            mNewButtons = newScreen.getButtons();
+            mTintColor = newScreen.buttonsTintColor;
         }
 
         @Override
@@ -80,7 +106,7 @@ public class RnnToolBar extends Toolbar {
             }
 
             Map<String, Drawable> icons = new HashMap<>();
-            for (Button button : mButtons) {
+            for (Button button : mNewButtons) {
                 if (button.hasIcon()) {
                     icons.put(button.id, button.getIcon(context));
                 }
@@ -97,24 +123,31 @@ public class RnnToolBar extends Toolbar {
 
             Menu menu = ((BaseReactActivity) context).getMenu();
 
+            // Remove prev screen buttons
+            for (Button btn : mOldButtons) {
+                menu.removeItem(btn.getItemId());
+            }
+
             // Add new screen buttons
             int i;
-            for (i = 0; i < mButtons.size(); i++) {
-                Button button = mButtons.get(i);
+            for (i = 0; i < mNewButtons.size(); i++) {
+                Button button = mNewButtons.get(i);
                 MenuItem item = menu.add(Menu.NONE, button.getItemId(), i, button.title);
                 if (icons.containsKey(button.id)) {
                     Drawable icon = icons.get(button.id);
+                    if (mTintColor != null) {
+                        ImageUtils.tint(icon, mTintColor);
+                    }
                     item.setIcon(icon).setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
                 }
             }
 
-            // Remove prev screen buttons
-            for (int j = i; j < menu.size(); j++) {
-                menu.removeItem(j);
-            }
-
             RnnToolBar toolBar = mToolbarWR.get();
             if (toolBar != null) {
+                if (mTintColor != null) {
+                    ImageUtils.tint(toolBar.getOverflowIcon(), mTintColor);
+                }
+
                 toolBar.mSetupToolbarTask = null;
                 mToolbarWR.clear();
             }

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

@@ -10,7 +10,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:fitsSystemWindows="true">
-        <android.support.v7.widget.Toolbar
+        <com.reactnativenavigation.views.RnnToolBar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"

example-redux/src/screens/FirstTabScreen.js

@@ -12,6 +12,17 @@ import * as counterActions from '../reducers/counter/actions';
 
 // this is a traditional React component connected to the redux store
 class FirstTabScreen extends Component {
+  static navigatorStyle = {
+    statusBarColor: '#303F9F',
+    toolBarColor: '#3F51B5',
+    navigationBarColor: '#303F9F',
+    buttonsTint: '#FFFFFF',
+    titleColor: '#FFFFFF',
+    tabSelectedTextColor: '#FFA000',
+    tabNormalTextColor: '#FFC107',
+    tabIndicatorColor: '#FFA000'
+  };
+
   static navigatorButtons = {
     rightButtons: [
       {

example-redux/src/screens/PushedScreen.js

@@ -12,6 +12,17 @@ import * as counterActions from '../reducers/counter/actions';
 
 // this is a traditional React component connected to the redux store
 class PushedScreen extends Component {
+  static navigatorStyle = {
+    statusBarColor: '#303F9F',
+    toolBarColor: '#3F51B5',
+    navigationBarColor: '#303F9F',
+    buttonsTint: '#FFFFFF',
+    titleColor: '#FFFFFF',
+    tabSelectedTextColor: '#FFA000',
+    tabNormalTextColor: '#FFC107',
+    tabIndicatorColor: '#FF4081'
+  };
+
   constructor(props) {
     super(props);
     this.bgColor = this.getRandomColor();
@@ -70,7 +81,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontSize: 18,
     marginBottom: 10,
-    marginTop:10,
+    marginTop:10
   },
   button: {
     textAlign: 'center',

src/platformSpecific.android.js

@@ -21,6 +21,7 @@ function startSingleScreenApp(params) {
 
   addNavigatorParams(screen);
   addNavigatorButtons(screen);
+  addToolbarStyleParams(screen);
   RctActivity.startSingleScreenApp(screen);
 }
 
@@ -33,6 +34,7 @@ function startTabBasedApp(params) {
   params.tabs.forEach(function (tab, idx) {
     addNavigatorParams(tab, null, idx)
     addNavigatorButtons(tab);
+    addToolbarStyleParams(tab);
   });
 
   RctActivity.startTabBasedApp(params.tabs);
@@ -41,6 +43,7 @@ function startTabBasedApp(params) {
 function navigatorPush(navigator, params) {
   addNavigatorParams(params, navigator)
   addNavigatorButtons(params);
+  addToolbarStyleParams(params);
   RctActivity.navigatorPush(params);
 }
 
@@ -71,6 +74,11 @@ function addNavigatorButtons(screen) {
   }
 }
 
+function addToolbarStyleParams(screen) {
+  const Screen = Navigation.getRegisteredScreen(screen.screen);
+  screen.navigatorStyle = Screen.navigatorStyle;
+}
+
 export default {
   startSingleScreenApp,
   startTabBasedApp,