From 96c070495d8065e8d58beba4cd511262e3d7f940 Mon Sep 17 00:00:00 2001
From: Yogev Ben David <yogevbd@wix.com>
Date: Thu, 9 Aug 2018 14:32:00 +0300
Subject: [PATCH] Button color (#3713)

* Revert "merging buttons fix"

This reverts commit 74077bbc5592a7fd1e718cc3bab4b1012403ad91.

* Revert "fix undefined buttons"

This reverts commit e3b4d15a06aa96f6c4995172abbe371381c2174c.

* Revert "fix e2e"

This reverts commit 05b3f5808f690e74f9ba59fae2ad92efae9e464f.

* Revert "Handle merge buttons style"

This reverts commit 9c705402ebd3eaa1a014bdbf0428fa23ff0b022e.

* Add background component with MATCH_PARENT height

* temporary solution for merging button color

This commit introduces two temporary options to control button colors
* rightButtonColor
* leftButtonColor

These options can be used to color buttons. Colors defined in buttons take
precedence over these two options.

* Get buttonColor options from resolved options

* leftButtonColor & rightButtonColor support - iOS

* Disabled color

* disabled buttons color support

* Rebase fixes

* empty commit
---
 .../parse/TopBarOptions.java                  |  30 +++-
 .../parse/params/Button.java                  |   9 +-
 .../presentation/StackOptionsPresenter.java   |  63 ++++++---
 .../TopBarButtonController.java               |   8 +-
 .../stack/StackController.java                |   2 +-
 .../views/topbar/TopBar.java                  |   8 +-
 .../StackOptionsPresenterTest.java            | 126 +++++++++++++++--
 .../views/TopBarBackgroundComponentTest.java  |   2 +-
 lib/ios/RNNNavigationButtons.m                |  12 +-
 lib/ios/RNNTopBarOptions.h                    |   5 +-
 lib/ios/RNNTopBarOptions.m                    |  23 +++-
 lib/src/commands/LayoutTreeCrawler.test.ts    | 130 ------------------
 lib/src/commands/LayoutTreeCrawler.ts         |  37 -----
 playground/src/screens/PushedScreen.js        |   3 +-
 14 files changed, 236 insertions(+), 222 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/parse/TopBarOptions.java b/lib/android/app/src/main/java/com/reactnativenavigation/parse/TopBarOptions.java
index 8b810f33df7..1e065e40172 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/parse/TopBarOptions.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/parse/TopBarOptions.java
@@ -43,6 +43,9 @@ public static TopBarOptions parse(TypefaceLoader typefaceLoader, JSONObject json
         options.elevation = FractionParser.parse(json, "elevation");
         options.buttons = TopBarButtons.parse(typefaceLoader, json);
 
+        options.rightButtonColor = ColorParser.parse(json, "rightButtonColor");
+        options.leftButtonColor = ColorParser.parse(json, "leftButtonColor");
+
         options.validate();
         return options;
     }
@@ -61,6 +64,18 @@ public static TopBarOptions parse(TypefaceLoader typefaceLoader, JSONObject json
     public Fraction borderHeight = new NullFraction();
     public Color borderColor = new NullColor();
 
+    // Deprecated
+    public Color rightButtonColor = new NullColor();
+    public Color leftButtonColor = new NullColor();
+    public Color rightButtonDisabledColor = new NullColor();
+    public Color leftButtonDisabledColor = new NullColor();
+
+    public TopBarOptions copy() {
+        TopBarOptions result = new TopBarOptions();
+        result.mergeWith(this);
+        return result;
+    }
+
     void mergeWith(final TopBarOptions other) {
         title.mergeWith(other.title);
         subtitle.mergeWith(other.subtitle);
@@ -75,10 +90,16 @@ void mergeWith(final TopBarOptions other) {
         if (other.borderHeight.hasValue()) borderHeight = other.borderHeight;
         if (other.borderColor.hasValue()) borderColor = other.borderColor;
         if (other.elevation.hasValue()) elevation = other.elevation;
+
+        if (other.rightButtonColor.hasValue()) rightButtonColor = other.rightButtonColor;
+        if (other.leftButtonColor.hasValue()) leftButtonColor = other.leftButtonColor;
+        if (other.rightButtonDisabledColor.hasValue()) rightButtonDisabledColor = other.rightButtonDisabledColor;
+        if (other.leftButtonDisabledColor.hasValue()) leftButtonDisabledColor = other.leftButtonDisabledColor;
+
         validate();
     }
 
-    void mergeWithDefault(TopBarOptions defaultOptions) {
+    public TopBarOptions mergeWithDefault(TopBarOptions defaultOptions) {
         title.mergeWithDefault(defaultOptions.title);
         subtitle.mergeWithDefault(defaultOptions.subtitle);
         background.mergeWithDefault(defaultOptions.background);
@@ -92,7 +113,14 @@ void mergeWithDefault(TopBarOptions defaultOptions) {
         if (!borderHeight.hasValue()) borderHeight = defaultOptions.borderHeight;
         if (!borderColor.hasValue()) borderColor = defaultOptions.borderColor;
         if (!elevation.hasValue()) elevation = defaultOptions.elevation;
+
+        if (!rightButtonColor.hasValue()) rightButtonColor = defaultOptions.rightButtonColor;
+        if (!leftButtonColor.hasValue()) leftButtonColor = defaultOptions.leftButtonColor;
+        if (!rightButtonDisabledColor.hasValue()) rightButtonDisabledColor = defaultOptions.rightButtonDisabledColor;
+        if (!leftButtonDisabledColor.hasValue()) leftButtonDisabledColor = defaultOptions.leftButtonDisabledColor;
+
         validate();
+        return this;
     }
 
     public void validate() {
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/parse/params/Button.java b/lib/android/app/src/main/java/com/reactnativenavigation/parse/params/Button.java
index dddcc71aa46..7db847a4df1 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/parse/params/Button.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/parse/params/Button.java
@@ -31,7 +31,7 @@ public class Button {
     public Text testId = new NullText();
     public Component component = new Component();
 
-    protected static Button parseJson(JSONObject json, TypefaceLoader typefaceManager) {
+    private static Button parseJson(JSONObject json, TypefaceLoader typefaceManager) {
         Button button = new Button();
         button.id = json.optString("id");
         button.text = TextParser.parse(json, "text");
@@ -78,6 +78,12 @@ private static ArrayList<Button> parseJsonArray(JSONArray jsonArray, TypefaceLoa
         return buttons;
     }
 
+    public Button copy() {
+        Button button = new Button();
+        button.mergeWith(this);
+        return button;
+    }
+
     public boolean hasComponent() {
         return component.hasValue();
     }
@@ -118,6 +124,7 @@ public void mergeWith(Button other) {
         if (other.component.hasValue()) component = other.component;
         if (other.showAsAction.hasValue()) showAsAction = other.showAsAction;
         if (other.icon.hasValue()) icon = other.icon;
+        if (other.id != null) id = other.id;
     }
 
     public void mergeWithDefault(Button defaultOptions) {
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/presentation/StackOptionsPresenter.java b/lib/android/app/src/main/java/com/reactnativenavigation/presentation/StackOptionsPresenter.java
index dcb75a9d68a..000f73c2bdc 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/presentation/StackOptionsPresenter.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/presentation/StackOptionsPresenter.java
@@ -3,6 +3,7 @@
 import android.app.Activity;
 import android.content.Context;
 import android.graphics.Color;
+import android.support.annotation.Nullable;
 import android.view.View;
 import android.view.ViewGroup.LayoutParams;
 
@@ -13,15 +14,20 @@
 import com.reactnativenavigation.parse.TopBarOptions;
 import com.reactnativenavigation.parse.TopTabOptions;
 import com.reactnativenavigation.parse.TopTabsOptions;
+import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.viewcontrollers.IReactView;
 import com.reactnativenavigation.views.Component;
 import com.reactnativenavigation.views.topbar.TopBar;
 
+import java.util.ArrayList;
+import java.util.List;
+
 public class StackOptionsPresenter {
     private static final int DEFAULT_TITLE_COLOR = Color.BLACK;
     private static final int DEFAULT_SUBTITLE_COLOR = Color.GRAY;
     private static final int DEFAULT_BORDER_COLOR = Color.BLACK;
+    private static final double DEFAULT_ELEVATION = 4d;
     private final double defaultTitleFontSize;
     private final double defaultSubtitleFontSize;
 
@@ -59,12 +65,12 @@ public void applyLayoutParamsOptions(Options options, View view) {
     }
 
     public void applyChildOptions(Options options, Component child) {
-        Options withDefaultOptions = options.copy().withDefaultOptions(defaultOptions);
-        applyOrientation(withDefaultOptions.layout.orientation);
-        applyButtons(withDefaultOptions.topBar.buttons);
-        applyTopBarOptions(withDefaultOptions.topBar, withDefaultOptions.animations, child, options);
-        applyTopTabsOptions(withDefaultOptions.topTabs);
-        applyTopTabOptions(withDefaultOptions.topTabOptions);
+        Options withDefault = options.copy().withDefaultOptions(defaultOptions);
+        applyOrientation(withDefault.layout.orientation);
+        applyButtons(withDefault.topBar, withDefault.topBar.rightButtonColor, withDefault.topBar.leftButtonColor, withDefault.topBar.rightButtonDisabledColor, withDefault.topBar.leftButtonDisabledColor);
+        applyTopBarOptions(withDefault.topBar, withDefault.animations, child, options);
+        applyTopTabsOptions(withDefault.topTabs);
+        applyTopTabOptions(withDefault.topTabOptions);
     }
 
     public void applyOrientation(OrientationOptions options) {
@@ -74,7 +80,7 @@ public void applyOrientation(OrientationOptions options) {
 
     private void applyTopBarOptions(TopBarOptions options, AnimationsOptions animationOptions, Component component, Options componentOptions) {
         topBar.setHeight(options.height.get(LayoutParams.WRAP_CONTENT));
-        topBar.setElevation(options.elevation.get(4d));
+        topBar.setElevation(options.elevation.get(DEFAULT_ELEVATION));
 
         topBar.setTitleHeight(options.title.height.get(LayoutParams.WRAP_CONTENT));
         topBar.setTitle(options.title.text.get(""));
@@ -128,10 +134,12 @@ private void applyTopBarVisibility(TopBarOptions options, AnimationsOptions anim
         }
     }
 
-    private void applyButtons(TopBarButtons buttons) {
-        topBar.setLeftButtons(buttons.left);
-        topBar.setRightButtons(buttons.right);
-        if (buttons.back.visible.isTrue() && !buttons.hasLeftButtons()) topBar.setBackButton(buttons.back);
+    private void applyButtons(TopBarOptions options, com.reactnativenavigation.parse.params.Color rightButtonColor, com.reactnativenavigation.parse.params.Color leftButtonColor, com.reactnativenavigation.parse.params.Color rightButtonDisabledColor, com.reactnativenavigation.parse.params.Color leftButtonDisabledColor) {
+        List<Button> rightButtons = mergeButtonsWithColor(options.buttons.right, rightButtonColor, rightButtonDisabledColor);
+        List<Button> leftButtons = mergeButtonsWithColor(options.buttons.left, leftButtonColor, leftButtonDisabledColor);
+        topBar.setRightButtons(rightButtons);
+        topBar.setLeftButtons(leftButtons);
+        if (options.buttons.back.visible.isTrue() && !options.buttons.hasLeftButtons()) topBar.setBackButton(options.buttons.back);
     }
 
     private void applyTopTabsOptions(TopTabsOptions options) {
@@ -155,9 +163,15 @@ public void onChildWillAppear(Options appearing, Options disappearing) {
         }
     }
 
-    public void mergeChildOptions(Options options, Component child) {
+    public void mergeChildOptions(Options options, Options childOptions, Component child) {
+        TopBarOptions topBar = options.copy().mergeWith(childOptions).withDefaultOptions(defaultOptions).topBar;
         mergeOrientation(options.layout.orientation);
-        mergeButtons(options.topBar.buttons);
+        mergeButtons(options.topBar.buttons,
+                topBar.rightButtonColor,
+                topBar.leftButtonColor,
+                topBar.rightButtonDisabledColor,
+                topBar.leftButtonDisabledColor
+        );
         mergeTopBarOptions(options.topBar, options.animations, child);
         mergeTopTabsOptions(options.topTabs);
         mergeTopTabOptions(options.topTabOptions);
@@ -167,12 +181,29 @@ private void mergeOrientation(OrientationOptions orientationOptions) {
         if (orientationOptions.hasValue()) applyOrientation(orientationOptions);
     }
 
-    private void mergeButtons(TopBarButtons buttons) {
-        if (buttons.left != null) topBar.setLeftButtons(buttons.left);
-        if (buttons.right != null) topBar.setRightButtons(buttons.right);
+    private void mergeButtons(TopBarButtons buttons, com.reactnativenavigation.parse.params.Color rightButtonColor, com.reactnativenavigation.parse.params.Color leftButtonColor, com.reactnativenavigation.parse.params.Color rightButtonDisabledColor, com.reactnativenavigation.parse.params.Color leftButtonDisabledColor) {
+        List<Button> rightButtons = mergeButtonsWithColor(buttons.right, rightButtonColor, rightButtonDisabledColor);
+        List<Button> leftButtons = mergeButtonsWithColor(buttons.left, leftButtonColor, leftButtonDisabledColor);
+        if (buttons.right != null) topBar.setRightButtons(rightButtons);
+        if (buttons.left != null) topBar.setLeftButtons(leftButtons);
         if (buttons.back.hasValue()) topBar.setBackButton(buttons.back);
     }
 
+    @Nullable
+    private List<Button> mergeButtonsWithColor(List<Button> buttons, com.reactnativenavigation.parse.params.Color buttonColor, com.reactnativenavigation.parse.params.Color disabledColor) {
+        List<Button> result = null;
+        if (buttons != null) {
+            result = new ArrayList<>();
+            for (Button button : buttons) {
+                Button copy = button.copy();
+                if (!button.color.hasValue()) copy.color = buttonColor;
+                if (!button.disabledColor.hasValue()) copy.disabledColor = disabledColor;
+                result.add(copy);
+            }
+        }
+        return result;
+    }
+
     private void mergeTopBarOptions(TopBarOptions options, AnimationsOptions animationsOptions, Component component) {
         if (options.height.hasValue()) topBar.setHeight(options.height.get());
         if (options.elevation.hasValue()) topBar.setElevation(options.elevation.get());
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/TopBarButtonController.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/TopBarButtonController.java
index f511389ab6d..1dcd8e8ec57 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/TopBarButtonController.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/TopBarButtonController.java
@@ -39,7 +39,13 @@ public interface OnClickListener {
     private TopBarButtonController.OnClickListener onPressListener;
     private Drawable icon;
 
-    public TopBarButtonController(Activity activity, NavigationIconResolver navigationIconResolver, ImageLoader imageLoader, ButtonOptionsPresenter optionsPresenter, Button button, ReactViewCreator viewCreator, OnClickListener onClickListener) {
+    public TopBarButtonController(Activity activity,
+                                  NavigationIconResolver navigationIconResolver,
+                                  ImageLoader imageLoader,
+                                  ButtonOptionsPresenter optionsPresenter,
+                                  Button button,
+                                  ReactViewCreator viewCreator,
+                                  OnClickListener onClickListener) {
         super(activity, button.id, new Options());
         this.navigationIconResolver = navigationIconResolver;
         this.imageLoader = imageLoader;
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackController.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackController.java
index 7c9449a57e0..7718927d2a2 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackController.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackController.java
@@ -95,7 +95,7 @@ public void applyChildOptions(Options options, Component child) {
     @Override
     public void mergeChildOptions(Options options, Component child) {
         super.mergeChildOptions(options, child);
-        presenter.mergeChildOptions(options, child);
+        presenter.mergeChildOptions(options, resolveCurrentOptions(), child);
         if (options.fabOptions.hasValue() && child instanceof ReactComponent) {
             fabOptionsPresenter.mergeOptions(options.fabOptions, (ReactComponent) child, getView());
         }
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/views/topbar/TopBar.java b/lib/android/app/src/main/java/com/reactnativenavigation/views/topbar/TopBar.java
index 71245823e72..a1d0b82be92 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/views/topbar/TopBar.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/views/topbar/TopBar.java
@@ -34,7 +34,6 @@
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.UiUtils;
-import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
 import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
 import com.reactnativenavigation.viewcontrollers.topbar.TopBarBackgroundViewController;
@@ -55,8 +54,6 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
     private TopBarAnimator animator;
     private TopTabs topTabs;
     private FrameLayout root;
-    private LinearLayout content;
-    private StackLayout parentView;
     private TopBarBackgroundViewController topBarBackgroundViewController;
     private View border;
     private ImageLoader imageLoader;
@@ -67,7 +64,6 @@ public TopBar(final Context context, ReactViewCreator buttonCreator, TitleBarRea
         this.imageLoader = imageLoader;
         collapsingBehavior = new TopBarCollapseBehavior(this);
         this.topBarBackgroundViewController = topBarBackgroundViewController;
-        this.parentView = parentView;
         topTabs = new TopTabs(getContext());
         animator = new TopBarAnimator(this, parentView.getStackId());
         createLayout(buttonCreator, titleBarReactViewCreator, onClickListener);
@@ -78,7 +74,7 @@ private void createLayout(ReactViewCreator buttonCreator, TitleBarReactViewCreat
         titleBar = createTitleBar(getContext(), buttonCreator, titleBarReactViewCreator, onClickListener, imageLoader);
         topTabs = createTopTabs();
         border = createBorder();
-        content = createContentLayout();
+        LinearLayout content = createContentLayout();
 
         root = new FrameLayout(getContext());
         root.setId(CompatUtils.generateViewId());
@@ -187,7 +183,7 @@ public void setTitleComponent(Component component) {
     public void setBackgroundComponent(Component component) {
         if (component.hasValue()) {
             topBarBackgroundViewController.setComponent(component);
-            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(MATCH_PARENT, ViewUtils.getPreferredHeight(this));
+            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT);
             root.addView(topBarBackgroundViewController.getView(), 0, lp);
         }
     }
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/StackOptionsPresenterTest.java b/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/StackOptionsPresenterTest.java
index cc771281f13..401f197f751 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/StackOptionsPresenterTest.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/StackOptionsPresenterTest.java
@@ -12,6 +12,7 @@
 import com.reactnativenavigation.parse.SubtitleOptions;
 import com.reactnativenavigation.parse.TitleOptions;
 import com.reactnativenavigation.parse.params.Bool;
+import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.Fraction;
 import com.reactnativenavigation.parse.params.Number;
@@ -22,10 +23,13 @@
 
 import org.json.JSONObject;
 import org.junit.Test;
+import org.mockito.ArgumentCaptor;
 import org.mockito.Mockito;
 
 import java.util.ArrayList;
+import java.util.List;
 
+import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.ArgumentMatchers.anyBoolean;
 import static org.mockito.ArgumentMatchers.anyDouble;
@@ -38,6 +42,7 @@
 
 public class StackOptionsPresenterTest extends BaseTest {
 
+    private static final Options EMPTY_OPTIONS = new Options();
     private StackOptionsPresenter uut;
     private TestComponentLayout child;
     private Activity activity;
@@ -55,35 +60,35 @@ public void beforeEach() {
     @Test
     public void mergeOrientation() throws Exception {
         Options options = new Options();
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
         verify(uut, times(0)).applyOrientation(any());
 
         JSONObject orientation = new JSONObject().put("orientation", "landscape");
         options.layout.orientation = OrientationOptions.parse(orientation);
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
         verify(uut, times(1)).applyOrientation(options.layout.orientation);
     }
 
     @Test
     public void mergeButtons() {
         Options options = new Options();
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
         verify(topBar, times(0)).setRightButtons(any());
         verify(topBar, times(0)).setLeftButtons(any());
 
         options.topBar.buttons.right = new ArrayList<>();
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
         verify(topBar, times(1)).setRightButtons(any());
 
         options.topBar.buttons.left = new ArrayList<>();
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
         verify(topBar, times(1)).setLeftButtons(any());
     }
 
     @Test
     public void mergeTopBarOptions() {
         Options options = new Options();
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
         assertTopBarOptions(options, 0);
 
         TitleOptions title = new TitleOptions();
@@ -105,19 +110,20 @@ public void mergeTopBarOptions() {
         options.topBar.drawBehind = new Bool(false);
         options.topBar.hideOnScroll = new Bool(false);
         options.topBar.validate();
-        uut.mergeChildOptions(options, child);
+
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
 
         assertTopBarOptions(options, 1);
 
         options.topBar.drawBehind = new Bool(true);
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
         verify(child, times(1)).drawBehindTopBar();
     }
 
     @Test
     public void mergeTopTabsOptions() {
         Options options = new Options();
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
         verify(topBar, times(0)).applyTopTabsColors(any(), any());
         verify(topBar, times(0)).applyTopTabsFontSize(any());
         verify(topBar, times(0)).setTopTabsVisible(anyBoolean());
@@ -126,7 +132,7 @@ public void mergeTopTabsOptions() {
         options.topTabs.unselectedTabColor = new Color(1);
         options.topTabs.fontSize = new Number(1);
         options.topTabs.visible = new Bool(true);
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
         verify(topBar, times(1)).applyTopTabsColors(options.topTabs.selectedTabColor, options.topTabs.unselectedTabColor);
         verify(topBar, times(1)).applyTopTabsFontSize(options.topTabs.fontSize);
         verify(topBar, times(1)).setTopTabsVisible(anyBoolean());
@@ -135,13 +141,13 @@ public void mergeTopTabsOptions() {
     @Test
     public void mergeTopTabOptions() {
         Options options = new Options();
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
 
         verify(topBar, times(0)).setTopTabFontFamily(anyInt(), any());
 
         options.topTabOptions.tabIndex = 1;
         options.topTabOptions.fontFamily = Typeface.DEFAULT_BOLD;
-        uut.mergeChildOptions(options, child);
+        uut.mergeChildOptions(options, EMPTY_OPTIONS, child);
 
         verify(topBar, times(1)).setTopTabFontFamily(1, Typeface.DEFAULT_BOLD);
     }
@@ -165,11 +171,105 @@ public void mergeOptions_defaultOptionsAreNotApplied() {
 
         Options childOptions = new Options();
         childOptions.topBar.title.text = new Text("someText");
-        uut.mergeChildOptions(childOptions, child);
+        uut.mergeChildOptions(childOptions, EMPTY_OPTIONS, child);
 
         verify(topBar, times(0)).setBackgroundColor(anyInt());
     }
 
+    public void applyButtons_buttonColorIsMergedToButtons() {
+        Options options = new Options();
+        Button rightButton1 = new Button();
+        Button rightButton2 = new Button();
+        Button leftButton = new Button();
+
+        options.topBar.rightButtonColor = new Color(10);
+        options.topBar.leftButtonColor = new Color(100);
+
+        options.topBar.buttons.right = new ArrayList<>();
+        options.topBar.buttons.right.add(rightButton1);
+        options.topBar.buttons.right.add(rightButton2);
+
+        options.topBar.buttons.left = new ArrayList<>();
+        options.topBar.buttons.left.add(leftButton);
+
+        uut.applyChildOptions(options, child);
+        ArgumentCaptor<List<Button>> rightCaptor = ArgumentCaptor.forClass(List.class);
+        verify(topBar).setRightButtons(rightCaptor.capture());
+        assertThat(rightCaptor.getValue().get(0).color.get()).isEqualTo(options.topBar.rightButtonColor.get());
+        assertThat(rightCaptor.getValue().get(1).color.get()).isEqualTo(options.topBar.rightButtonColor.get());
+        assertThat(rightCaptor.getValue().get(0)).isNotEqualTo(rightButton1);
+        assertThat(rightCaptor.getValue().get(1)).isNotEqualTo(rightButton2);
+
+        ArgumentCaptor<List<Button>> leftCaptor = ArgumentCaptor.forClass(List.class);
+        verify(topBar).setLeftButtons(leftCaptor.capture());
+        assertThat(leftCaptor.getValue().get(0).color).isEqualTo(options.topBar.leftButtonColor);
+        assertThat(leftCaptor.getValue().get(0)).isNotEqualTo(leftButton);
+    }
+
+    @Test
+    public void mergeChildOptions_buttonColorIsResolvedFromAppliedOptions() {
+        Options appliedOptions = new Options();
+        appliedOptions.topBar.rightButtonColor = new Color(10);
+        appliedOptions.topBar.leftButtonColor = new Color(100);
+
+        Options options2 = new Options();
+        Button rightButton1 = new Button();
+        Button rightButton2 = new Button();
+        Button leftButton = new Button();
+
+        options2.topBar.buttons.right = new ArrayList<>();
+        options2.topBar.buttons.right.add(rightButton1);
+        options2.topBar.buttons.right.add(rightButton2);
+
+        options2.topBar.buttons.left = new ArrayList<>();
+        options2.topBar.buttons.left.add(leftButton);
+
+        uut.mergeChildOptions(options2, appliedOptions, child);
+        ArgumentCaptor<List<Button>> rightCaptor = ArgumentCaptor.forClass(List.class);
+        verify(topBar, times(1)).setRightButtons(rightCaptor.capture());
+        assertThat(rightCaptor.getValue().get(0).color.get()).isEqualTo(appliedOptions.topBar.rightButtonColor.get());
+        assertThat(rightCaptor.getValue().get(1).color.get()).isEqualTo(appliedOptions.topBar.rightButtonColor.get());
+        assertThat(rightCaptor.getValue().get(0)).isNotEqualTo(rightButton1);
+        assertThat(rightCaptor.getValue().get(1)).isNotEqualTo(rightButton2);
+
+        ArgumentCaptor<List<Button>> leftCaptor = ArgumentCaptor.forClass(List.class);
+        verify(topBar, times(1)).setLeftButtons(leftCaptor.capture());
+        assertThat(leftCaptor.getValue().get(0).color.get()).isEqualTo(appliedOptions.topBar.leftButtonColor.get());
+        assertThat(leftCaptor.getValue().get(0)).isNotEqualTo(leftButton);
+    }
+
+    @Test
+    public void mergeChildOptions_buttonColorIsResolvedFromMergedOptions() {
+        Options resolvedOptions = new Options();
+        resolvedOptions.topBar.rightButtonColor = new Color(10);
+        resolvedOptions.topBar.leftButtonColor = new Color(100);
+
+        Options options2 = new Options();
+        Button rightButton1 = new Button();
+        Button rightButton2 = new Button();
+        Button leftButton = new Button();
+
+        options2.topBar.buttons.right = new ArrayList<>();
+        options2.topBar.buttons.right.add(rightButton1);
+        options2.topBar.buttons.right.add(rightButton2);
+
+        options2.topBar.buttons.left = new ArrayList<>();
+        options2.topBar.buttons.left.add(leftButton);
+
+        uut.mergeChildOptions(options2, resolvedOptions, child);
+        ArgumentCaptor<List<Button>> rightCaptor = ArgumentCaptor.forClass(List.class);
+        verify(topBar).setRightButtons(rightCaptor.capture());
+        assertThat(rightCaptor.getValue().get(0).color.get()).isEqualTo(resolvedOptions.topBar.rightButtonColor.get());
+        assertThat(rightCaptor.getValue().get(1).color.get()).isEqualTo(resolvedOptions.topBar.rightButtonColor.get());
+        assertThat(rightCaptor.getValue().get(0)).isNotEqualTo(rightButton1);
+        assertThat(rightCaptor.getValue().get(1)).isNotEqualTo(rightButton2);
+
+        ArgumentCaptor<List<Button>> leftCaptor = ArgumentCaptor.forClass(List.class);
+        verify(topBar).setLeftButtons(leftCaptor.capture());
+        assertThat(leftCaptor.getValue().get(0).color.get()).isEqualTo(resolvedOptions.topBar.leftButtonColor.get());
+        assertThat(leftCaptor.getValue().get(0)).isNotEqualTo(leftButton);
+    }
+
     private void assertTopBarOptions(Options options, int t) {
         if (options.topBar.title.component.hasValue()) {
             verify(topBar, times(0)).setTitle(any());
diff --git a/lib/android/app/src/test/java/com/reactnativenavigation/views/TopBarBackgroundComponentTest.java b/lib/android/app/src/test/java/com/reactnativenavigation/views/TopBarBackgroundComponentTest.java
index e1a95d2a3ef..b60b501f7f8 100644
--- a/lib/android/app/src/test/java/com/reactnativenavigation/views/TopBarBackgroundComponentTest.java
+++ b/lib/android/app/src/test/java/com/reactnativenavigation/views/TopBarBackgroundComponentTest.java
@@ -57,7 +57,7 @@ public void setBackgroundComponent() {
         TopBarBackgroundView background = (TopBarBackgroundView) ViewUtils.findChildrenByClassRecursive(uut, TopBarBackgroundView.class).get(0);
         assertThat(background).isNotNull();
         assertThat(background.getLayoutParams().width).isEqualTo(ViewGroup.LayoutParams.MATCH_PARENT);
-        assertThat(background.getLayoutParams().height).isEqualTo(100);
+        assertThat(background.getLayoutParams().height).isEqualTo(ViewGroup.LayoutParams.MATCH_PARENT);
     }
 
     @Test
diff --git a/lib/ios/RNNNavigationButtons.m b/lib/ios/RNNNavigationButtons.m
index a26cf6c63e1..340388e24de 100644
--- a/lib/ios/RNNNavigationButtons.m
+++ b/lib/ios/RNNNavigationButtons.m
@@ -107,18 +107,18 @@ -(RNNUIBarButtonItem*)buildButton: (NSDictionary*)dictionary defaultStyle:(RNNBu
 	NSMutableDictionary* disabledTextAttributes = [[NSMutableDictionary alloc] init];
 	
 	UIColor* color = [self color:dictionary[@"color"] defaultColor:defaultStyle.color];
+	UIColor* disabledColor = [self color:dictionary[@"disabledColor"] defaultColor:defaultStyle.disabledColor];
+	if (!enabledBool && disabledColor) {
+		color = disabledColor;
+		[disabledTextAttributes setObject:disabledColor forKey:NSForegroundColorAttributeName];
+	}
+	
 	if (color) {
 		[textAttributes setObject:color forKey:NSForegroundColorAttributeName];
 		[barButtonItem setImage:iconImage];
 		[barButtonItem setTintColor:color];
 	}
 	
-	UIColor* disabledColor = [self color:dictionary[@"disabledColor"] defaultColor:defaultStyle.disabledColor];;
-	if (disabledColor) {
-		UIColor *color = disabledColor;
-		[disabledTextAttributes setObject:color forKey:NSForegroundColorAttributeName];
-	}
-	
 	NSNumber* fontSize = [self fontSize:dictionary[@"fontSize"] defaultFontSize:defaultStyle.fontSize];
 	NSString* fontFamily = [self fontFamily:dictionary[@"fontFamily"] defaultFontFamily:defaultStyle.fontFamily];
 	UIFont *font = nil;
diff --git a/lib/ios/RNNTopBarOptions.h b/lib/ios/RNNTopBarOptions.h
index 3e23b666c47..5dee26b2458 100644
--- a/lib/ios/RNNTopBarOptions.h
+++ b/lib/ios/RNNTopBarOptions.h
@@ -13,7 +13,10 @@
 @property (nonatomic, strong) NSArray* rightButtons;
 @property (nonatomic, strong) NSNumber* visible;
 @property (nonatomic, strong) NSNumber* hideOnScroll;
-@property (nonatomic, strong) NSNumber* buttonColor;
+@property (nonatomic, strong) NSNumber* leftButtonColor;
+@property (nonatomic, strong) NSNumber* rightButtonColor;
+@property (nonatomic, strong) NSNumber* leftButtonDisabledColor;
+@property (nonatomic, strong) NSNumber* rightButtonDisabledColor;
 @property (nonatomic, strong) NSString* barStyle;
 @property (nonatomic, strong) NSNumber* translucent;
 @property (nonatomic, strong) NSNumber* transparent;
diff --git a/lib/ios/RNNTopBarOptions.m b/lib/ios/RNNTopBarOptions.m
index 54afc8c7f2b..61c2ed34e83 100644
--- a/lib/ios/RNNTopBarOptions.m
+++ b/lib/ios/RNNTopBarOptions.m
@@ -149,13 +149,6 @@ - (void)applyOn:(UIViewController*)viewController {
 		viewController.navigationController.navigationBar.accessibilityIdentifier = self.testID;
 	}
 	
-	if (self.buttonColor) {
-		UIColor* buttonColor = [RCTConvert UIColor:self.buttonColor];
-		viewController.navigationController.navigationBar.tintColor = buttonColor;
-	} else {
-		viewController.navigationController.navigationBar.tintColor = nil;
-	}
-	
 	if (self.rightButtons || self.leftButtons) {
 		_navigationButtons = [[RNNNavigationButtons alloc] initWithViewController:(RNNRootViewController*)viewController];
 		[_navigationButtons applyLeftButtons:self.leftButtons rightButtons:self.rightButtons defaultLeftButtonStyle:self.leftButtonStyle defaultRightButtonStyle:self.rightButtonStyle];
@@ -163,6 +156,14 @@ - (void)applyOn:(UIViewController*)viewController {
 }
 
 - (void)setLeftButtons:(id)leftButtons {
+	if (self.leftButtonColor) {
+		_leftButtonStyle.color = self.leftButtonColor;
+	}
+	
+	if (self.leftButtonDisabledColor) {
+		_leftButtonStyle.disabledColor = self.leftButtonDisabledColor;
+	}
+	
 	if ([leftButtons isKindOfClass:[NSArray class]]) {
 		_leftButtons = leftButtons;
 	} else if ([leftButtons isKindOfClass:[NSDictionary class]]) {
@@ -175,6 +176,14 @@ - (void)setLeftButtons:(id)leftButtons {
 }
 
 - (void)setRightButtons:(id)rightButtons {
+	if (self.rightButtonColor) {
+		_rightButtonStyle.color = self.rightButtonColor;
+	}
+	
+	if (self.rightButtonDisabledColor) {
+		_rightButtonStyle.disabledColor = self.rightButtonDisabledColor;
+	}
+	
 	if ([rightButtons isKindOfClass:[NSArray class]]) {
 		_rightButtons = rightButtons;
 	} else if ([rightButtons isKindOfClass:[NSDictionary class]]) {
diff --git a/lib/src/commands/LayoutTreeCrawler.test.ts b/lib/src/commands/LayoutTreeCrawler.test.ts
index 1523366da60..998fccc01e1 100644
--- a/lib/src/commands/LayoutTreeCrawler.test.ts
+++ b/lib/src/commands/LayoutTreeCrawler.test.ts
@@ -104,136 +104,6 @@ describe('LayoutTreeCrawler', () => {
     });
   });
 
-  it('Components: extract button style from passedOptions buttons array and merge it to all buttons', () => {
-    const MyComponent = class {
-      static get options() {
-        return {
-          topBar: {
-            leftButtons: [{
-              id: 'id'
-            }, {
-              id: 'id2'
-            }],
-            rightButtons: [{
-              id: 'id3'
-            }]
-          }
-        };
-      }
-    };
-
-    const passedOptions = {
-      topBar: {
-        leftButtons: {
-          font: 'Helvetica'
-        },
-        rightButtons: []
-      }
-    };
-
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: passedOptions } };
-    store.setOriginalComponentClassForName('theComponentName', MyComponent);
-
-    uut.crawl(node);
-
-    expect(node.data.options).toEqual({
-      topBar: {
-        leftButtons: [{
-          id: 'id',
-          font: 'Helvetica'
-        }, {
-          id: 'id2',
-          font: 'Helvetica'
-        }],
-        rightButtons: [{
-          id: 'id3'
-        }]
-      }
-    });
-  });
-
-  it('Components: empty buttons array should not affect static buttons', () => {
-    const MyComponent = class {
-      static get options() {
-        return {
-          topBar: {}
-        };
-      }
-    };
-
-    const passedOptions = {
-      topBar: {}
-    };
-
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: passedOptions } };
-    store.setOriginalComponentClassForName('theComponentName', MyComponent);
-
-    uut.crawl(node);
-
-    expect(node.data.options).toEqual({
-      topBar: {}
-    });
-  });
-
-  it('Components: static options with no topBar should not crash', () => {
-    const MyComponent = class {
-      static get options() {
-        return {
-
-        };
-      }
-    };
-
-    const passedOptions = {
-      topBar: {}
-    };
-
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: passedOptions } };
-    store.setOriginalComponentClassForName('theComponentName', MyComponent);
-
-    uut.crawl(node);
-
-    expect(node.data.options).toEqual({
-      topBar: {}
-    });
-  });
-
-  it('Components: undefined passed buttons should not affect static buttons', () => {
-    const MyComponent = class {
-      static get options() {
-        return {
-          topBar: {
-            leftButtons: [{
-              id: 'id'
-            }],
-            rightButtons: [{
-              id: 'id2'
-            }]
-          }
-        };
-      }
-    };
-
-    const passedOptions = {
-      topBar: {}
-    };
-
-    const node = { type: LayoutType.Component, data: { name: 'theComponentName', options: passedOptions } };
-    store.setOriginalComponentClassForName('theComponentName', MyComponent);
-
-    uut.crawl(node);
-
-    expect(node.data.options).toEqual({
-      topBar: {
-        leftButtons: [{
-          id: 'id'
-        }],
-        rightButtons: [{
-          id: 'id2'
-        }]
-      }
-    });
-  });
   it('Component: deepClones options', () => {
     const theStyle = {};
     const MyComponent = class {
diff --git a/lib/src/commands/LayoutTreeCrawler.ts b/lib/src/commands/LayoutTreeCrawler.ts
index 9c29d9c9637..3dfe4acd1f4 100644
--- a/lib/src/commands/LayoutTreeCrawler.ts
+++ b/lib/src/commands/LayoutTreeCrawler.ts
@@ -54,46 +54,9 @@ export class LayoutTreeCrawler {
     const clazz = this.store.getOriginalComponentClassForName(node.data.name) || {};
     const staticOptions = _.cloneDeep(clazz.options) || {};
     const passedOptions = node.data.options || {};
-    this._mergeButtonsStyles(passedOptions, staticOptions);
     node.data.options = _.merge({}, staticOptions, passedOptions);
   }
 
-  _mergeButtonsStyles(passedOptions, staticOptions) {
-    if (passedOptions.topBar) {
-      this._normalizeButtons(passedOptions.topBar.leftButtons, (buttons, style) => {
-        passedOptions.topBar.leftButtons = buttons;
-
-        if (staticOptions.topBar) {
-          this._applyButtonsStyle(staticOptions.topBar.leftButtons, style);
-        }
-      });
-
-      this._normalizeButtons(passedOptions.topBar.rightButtons, (buttons, style) => {
-        passedOptions.topBar.rightButtons = buttons;
-
-        if (staticOptions.topBar) {
-          this._applyButtonsStyle(staticOptions.topBar.rightButtons, style);
-        }
-      });
-    }
-  }
-
-  _normalizeButtons(buttons, callback) {
-    if (_.isPlainObject(buttons)) {
-      callback([], buttons);
-    } else {
-      callback(buttons);
-    }
-  }
-
-  _applyButtonsStyle(buttons, style) {
-    if (_.isArray(buttons)) {
-      buttons.forEach((button) => {
-        _.merge(button, style);
-      });
-    }
-  }
-
   _assertKnownLayoutType(type) {
     if (!LayoutType[type]) {
       throw new Error(`Unknown layout type ${type}`);
diff --git a/playground/src/screens/PushedScreen.js b/playground/src/screens/PushedScreen.js
index cc5fd8ef85e..153c09592ca 100644
--- a/playground/src/screens/PushedScreen.js
+++ b/playground/src/screens/PushedScreen.js
@@ -19,7 +19,8 @@ class PushedScreen extends Component {
           id: 'singleBtn',
           text: 'single',
           testID: testIDs.TOP_BAR_BUTTON
-        }
+        },
+        rightButtonColor: 'red',
       },
       layout: {
         backgroundColor: '#f5fcff'