Refactor right buttons (#6090)

Refactor right buttons

This pr started with an attempt to eliminate button flickering entirely when updating buttons which contain react components via mergeOptions. While the attempt wasn't 100% successful, I dit get some insights in the process.

* It's not possible to add buttons at specific indices. Buttons contain an order property which determines the order of the button in the TopBar. To somewhat overcome this limitation, we can let users control button order via options.

* When a right most component button is replaced with another component button, the rest of the buttons shift to the right since the newly added component isn't measured when it's added to the menu and its width is zero. 
We usually handle this situation with the `waitForRender` option but since buttons are measured with `MeasureSpec.UNSPECIFIED`, their dimensions are zero. Because of this, I've added options to set button dimensions.

* When updating buttons via mergeOptions, if a component button is already added to the menu with the same order we will not remove and added it again. This mitigates flickering in some situations.

* Textual button style properties were applied by traversing the view hierarchy and searching for the TextView corresponding to the button and updating its styles directly.
There was an inherent bug in this logic where if two buttons contained the same text, styles could have been applied to the wrong TextView. We now apply styles directly on the button using spans.

lib/android/app/src/main/java/com/reactnativenavigation/parse/Component.java

@@ -2,9 +2,12 @@ package com.reactnativenavigation.parse;
 
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.NullBool;
+import com.reactnativenavigation.parse.params.NullNumber;
 import com.reactnativenavigation.parse.params.NullText;
+import com.reactnativenavigation.parse.params.Number;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.parse.parsers.BoolParser;
+import com.reactnativenavigation.parse.parsers.NumberParser;
 import com.reactnativenavigation.parse.parsers.TextParser;
 
 import org.json.JSONObject;
@@ -18,6 +21,8 @@ public class Component {
         result.componentId = TextParser.parse(json, "componentId");
         result.alignment = Alignment.fromString(TextParser.parse(json, "alignment").get(""));
         result.waitForRender = BoolParser.parse(json, "waitForRender");
+        result.width = NumberParser.parse(json, "width");
+        result.height = NumberParser.parse(json, "height");
 
         return result;
     }
@@ -26,12 +31,16 @@ public class Component {
     public Text componentId = new NullText();
     public Alignment alignment = Alignment.Default;
     public Bool waitForRender = new NullBool();
+    public Number width = new NullNumber();
+    public Number height = new NullNumber();
 
     void mergeWith(Component other) {
         if (other.componentId.hasValue()) componentId = other.componentId;
         if (other.name.hasValue()) name = other.name;
         if (other.waitForRender.hasValue()) waitForRender = other.waitForRender;
         if (other.alignment != Alignment.Default) alignment = other.alignment;
+        if (other.width.hasValue()) width = other.width;
+        if (other.height.hasValue()) height = other.height;
     }
 
     public void mergeWithDefault(Component defaultOptions) {
@@ -39,6 +48,8 @@ public class Component {
         if (!name.hasValue()) name = defaultOptions.name;
         if (!waitForRender.hasValue()) waitForRender = defaultOptions.waitForRender;
         if (alignment == Alignment.Default) alignment = defaultOptions.alignment;
+        if (!width.hasValue()) width = defaultOptions.width;
+        if (!height.hasValue()) height = defaultOptions.height;
     }
 
     public boolean hasValue() {
@@ -49,6 +60,8 @@ public class Component {
         return name.equals(other.name) &&
                componentId.equals(other.componentId) &&
                alignment.equals(other.alignment) &&
-               waitForRender.equals(other.waitForRender);
+               waitForRender.equals(other.waitForRender) &&
+               width.equals(other.width) &&
+               height.equals(other.height);
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/parse/params/Button.java

@@ -6,9 +6,10 @@ import android.view.MenuItem;
 import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.parsers.BoolParser;
 import com.reactnativenavigation.parse.parsers.ColorParser;
-import com.reactnativenavigation.parse.parsers.NumberParser;
+import com.reactnativenavigation.parse.parsers.FractionParser;
 import com.reactnativenavigation.parse.parsers.TextParser;
 import com.reactnativenavigation.utils.CompatUtils;
+import com.reactnativenavigation.utils.IdFactory;
 import com.reactnativenavigation.utils.TypefaceLoader;
 
 import org.json.JSONArray;
@@ -19,10 +20,12 @@ import java.util.Objects;
 
 import androidx.annotation.Nullable;
 
+import static com.reactnativenavigation.utils.ObjectUtils.take;
+
 public class Button {
     public String instanceId = "btn" + CompatUtils.generateViewId();
 
-    @Nullable public String id;
+    public String id = "btn" + CompatUtils.generateViewId();
     public Text accessibilityLabel = new NullText();
     public Text text = new NullText();
     public Bool enabled = new NullBool();
@@ -30,7 +33,7 @@ public class Button {
     public Number showAsAction = new NullNumber();
     public Colour color = new NullColor();
     public Colour disabledColor = new NullColor();
-    public Number fontSize = new NullNumber();
+    public Fraction fontSize = new NullFraction();
     private Text fontWeight = new NullText();
     @Nullable public Typeface fontFamily;
     public Text icon = new NullText();
@@ -56,7 +59,7 @@ public class Button {
 
     private static Button parseJson(JSONObject json, TypefaceLoader typefaceManager) {
         Button button = new Button();
-        button.id = json.optString("id");
+        button.id = take(json.optString("id"), "btn" + CompatUtils.generateViewId());
         button.accessibilityLabel = TextParser.parse(json, "accessibilityLabel");
         button.text = TextParser.parse(json, "text");
         button.enabled = BoolParser.parse(json, "enabled");
@@ -64,7 +67,7 @@ public class Button {
         button.showAsAction = parseShowAsAction(json);
         button.color = ColorParser.parse(json, "color");
         button.disabledColor = ColorParser.parse(json, "disabledColor");
-        button.fontSize = NumberParser.parse(json, "fontSize");
+        button.fontSize = FractionParser.parse(json, "fontSize");
         button.fontFamily = typefaceManager.getTypeFace(json.optString("fontFamily", ""));
         button.fontWeight = TextParser.parse(json, "fontWeight");
         button.testId = TextParser.parse(json, "testID");
@@ -116,6 +119,10 @@ public class Button {
         return icon.hasValue();
     }
 
+    public int getIntId() {
+        return IdFactory.Companion.get(component.componentId.get(id));
+    }
+
     private static Number parseShowAsAction(JSONObject json) {
         final Text showAsAction = TextParser.parse(json, "showAsAction");
         if (!showAsAction.hasValue()) {

lib/android/app/src/main/java/com/reactnativenavigation/parse/params/Text.java

@@ -7,6 +7,10 @@ public class Text extends Param<String> {
         super(value);
     }
 
+    public int length() {
+        return hasValue() ? value.length() : 0;
+    }
+
     @NonNull
     @Override
     public String toString() {

lib/android/app/src/main/java/com/reactnativenavigation/presentation/StackPresenter.java

@@ -25,7 +25,6 @@ import com.reactnativenavigation.utils.ObjectUtils;
 import com.reactnativenavigation.utils.StatusBarUtils;
 import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.viewcontrollers.IReactView;
-import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
 import com.reactnativenavigation.viewcontrollers.TitleBarButtonController;
 import com.reactnativenavigation.viewcontrollers.TitleBarReactViewController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
@@ -33,6 +32,7 @@ import com.reactnativenavigation.viewcontrollers.button.IconResolver;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
 import com.reactnativenavigation.viewcontrollers.topbar.TopBarBackgroundViewController;
 import com.reactnativenavigation.viewcontrollers.topbar.TopBarController;
+import com.reactnativenavigation.views.titlebar.TitleBarButtonCreator;
 import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
 import com.reactnativenavigation.views.topbar.TopBar;
 import com.reactnativenavigation.views.topbar.TopBarBackgroundViewCreator;
@@ -44,12 +44,14 @@ import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Map;
 
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.annotation.RestrictTo;
 import androidx.appcompat.widget.Toolbar;
 
 import static com.reactnativenavigation.utils.CollectionUtils.*;
 import static com.reactnativenavigation.utils.ObjectUtils.perform;
+import static com.reactnativenavigation.utils.ObjectUtils.take;
 
 public class StackPresenter {
     private static final int DEFAULT_TITLE_COLOR = Color.BLACK;
@@ -66,7 +68,7 @@ public class StackPresenter {
     private TitleBarButtonController.OnClickListener onClickListener;
     private final RenderChecker renderChecker;
     private final TopBarBackgroundViewCreator topBarBackgroundViewCreator;
-    private final ReactViewCreator buttonCreator;
+    private final TitleBarButtonCreator buttonCreator;
     private Options defaultOptions;
 
     private List<TitleBarButtonController> currentRightButtons = new ArrayList<>();
@@ -79,7 +81,7 @@ public class StackPresenter {
     public StackPresenter(Activity activity,
                           TitleBarReactViewCreator titleViewCreator,
                           TopBarBackgroundViewCreator topBarBackgroundViewCreator,
-                          ReactViewCreator buttonCreator,
+                          TitleBarButtonCreator buttonCreator,
                           IconResolver iconResolver,
                           RenderChecker renderChecker,
                           Options defaultOptions) {
@@ -268,25 +270,24 @@ public class StackPresenter {
     }
 
     private void applyButtons(TopBarOptions options, ViewController child) {
-        List<Button> rightButtons = mergeButtonsWithColor(options.buttons.right, options.rightButtonColor, options.rightButtonDisabledColor);
-        List<Button> leftButtons = mergeButtonsWithColor(options.buttons.left, options.leftButtonColor, options.leftButtonDisabledColor);
-
-        if (rightButtons != null) {
-            List<TitleBarButtonController> rightButtonControllers = getOrCreateButtonControllers(componentRightButtons.get(child.getView()), rightButtons);
+        if (options.buttons.right != null) {
+            List<Button> rightButtons = mergeButtonsWithColor(options.buttons.right, options.rightButtonColor, options.rightButtonDisabledColor);
+            List<TitleBarButtonController> rightButtonControllers = getOrCreateButtonControllersByInstanceId(componentRightButtons.get(child.getView()), rightButtons);
             componentRightButtons.put(child.getView(), keyBy(rightButtonControllers, TitleBarButtonController::getButtonInstanceId));
             if (!CollectionUtils.equals(currentRightButtons, rightButtonControllers)) {
                 currentRightButtons = rightButtonControllers;
-                topBar.setRightButtons(rightButtonControllers);
+                topBarController.applyRightButtons(currentRightButtons);
             }
         } else {
             currentRightButtons = null;
             topBar.clearRightButtons();
         }
 
-        if (leftButtons != null) {
-            List<TitleBarButtonController> leftButtonControllers = getOrCreateButtonControllers(componentLeftButtons.get(child.getView()), leftButtons);
+        if (options.buttons.left != null) {
+            List<Button> leftButtons = mergeButtonsWithColor(options.buttons.left, options.leftButtonColor, options.leftButtonDisabledColor);
+            List<TitleBarButtonController> leftButtonControllers = getOrCreateButtonControllersByInstanceId(componentLeftButtons.get(child.getView()), leftButtons);
             componentLeftButtons.put(child.getView(), keyBy(leftButtonControllers, TitleBarButtonController::getButtonInstanceId));
-            topBar.setLeftButtons(leftButtonControllers);
+            topBarController.setLeftButtons(leftButtonControllers);
         } else {
             topBar.clearLeftButtons();
         }
@@ -298,19 +299,25 @@ public class StackPresenter {
         topBar.setOverflowButtonColor(options.rightButtonColor.get(Color.BLACK));
     }
 
-    private List<TitleBarButtonController> getOrCreateButtonControllers(@Nullable Map<String, TitleBarButtonController> currentButtons, @Nullable List<Button> buttons) {
+    private List<TitleBarButtonController> getOrCreateButtonControllersByInstanceId(@Nullable Map<String, TitleBarButtonController> currentButtons, @Nullable List<Button> buttons) {
         if (buttons == null) return null;
         Map<String, TitleBarButtonController> result = new LinkedHashMap<>();
+        forEach(buttons, b -> result.put(b.instanceId, getOrDefault(currentButtons, b.instanceId, () -> createButtonController(b))));
+        return new ArrayList<>(result.values());
+    }
+
+    private List<TitleBarButtonController> getOrCreateButtonControllersById(@Nullable Map<String, TitleBarButtonController> currentButtons,@NonNull List<Button> buttons) {
+        ArrayList result = new ArrayList<TitleBarButtonController>();
         for (Button b : buttons) {
-            result.put(b.instanceId, currentButtons != null && currentButtons.containsKey(b.instanceId) ? currentButtons.get(b.instanceId) : createButtonController(b));
+            result.add(take(first(perform(currentButtons, null, Map::values), button -> button.getId().equals(b.id)), createButtonController(b)));
         }
-        return new ArrayList<>(result.values());
+        return result;
     }
 
     private TitleBarButtonController createButtonController(Button button) {
         TitleBarButtonController controller = new TitleBarButtonController(activity,
                 iconResolver,
-                new ButtonPresenter(topBar.getTitleBar(), button),
+                new ButtonPresenter(button),
                 button,
                 buttonCreator,
                 onClickListener
@@ -354,28 +361,34 @@ public class StackPresenter {
     }
 
     private void mergeButtons(TopBarOptions options, TopBarButtons buttons, View child) {
-        List<Button> rightButtons = mergeButtonsWithColor(buttons.right, options.rightButtonColor, options.rightButtonDisabledColor);
-        List<Button> leftButtons = mergeButtonsWithColor(buttons.left, options.leftButtonColor, options.leftButtonDisabledColor);
+        mergeRightButtons(options, buttons, child);
+        mergeLeftButton(options, buttons, child);
+        mergeBackButton(buttons);
+    }
 
-        List<TitleBarButtonController> rightButtonControllers = getOrCreateButtonControllers(componentRightButtons.get(child), rightButtons);
-        List<TitleBarButtonController> leftButtonControllers = getOrCreateButtonControllers(componentLeftButtons.get(child), leftButtons);
+    private void mergeRightButtons(TopBarOptions options, TopBarButtons buttons, View child) {
+        if (buttons.right == null) return;
+        List<Button> rightButtons = mergeButtonsWithColor(buttons.right, options.rightButtonColor, options.rightButtonDisabledColor);
+        List<TitleBarButtonController> toMerge = getOrCreateButtonControllersById(componentRightButtons.get(child), rightButtons);
+        List<TitleBarButtonController> toRemove = difference(currentRightButtons, toMerge, TitleBarButtonController::equals);
+        forEach(toRemove, TitleBarButtonController::destroy);
 
-        if (rightButtonControllers != null) {
-            Map previousRightButtons = componentRightButtons.put(child, keyBy(rightButtonControllers, TitleBarButtonController::getButtonInstanceId));
-            if (previousRightButtons != null) forEach(previousRightButtons.values(), TitleBarButtonController::destroy);
-        }
-        if (leftButtonControllers != null) {
-            Map previousLeftButtons = componentLeftButtons.put(child, keyBy(leftButtonControllers, TitleBarButtonController::getButtonInstanceId));
-            if (previousLeftButtons != null) forEach(previousLeftButtons.values(), TitleBarButtonController::destroy);
+        if (!CollectionUtils.equals(currentRightButtons, toMerge)) {
+            topBarController.mergeRightButtons(toMerge, toRemove);
+            currentRightButtons = toMerge;
         }
+        if (options.rightButtonColor.hasValue()) topBar.setOverflowButtonColor(options.rightButtonColor.get());
+    }
 
-        if (buttons.right != null) {
-            if (!CollectionUtils.equals(currentRightButtons, rightButtonControllers)) {
-                currentRightButtons = rightButtonControllers;
-                topBar.setRightButtons(rightButtonControllers);
-            }
-        }
-        if (buttons.left != null) topBar.setLeftButtons(leftButtonControllers);
+    private void mergeLeftButton(TopBarOptions options, TopBarButtons buttons, View child) {
+        if (buttons.left == null) return;
+        List<Button> leftButtons = mergeButtonsWithColor(buttons.left, options.leftButtonColor, options.leftButtonDisabledColor);
+        List<TitleBarButtonController> toMerge = getOrCreateButtonControllersById(componentLeftButtons.get(child), leftButtons);
+        componentLeftButtons.put(child, keyBy(toMerge, TitleBarButtonController::getButtonInstanceId));
+        topBarController.setLeftButtons(toMerge);
+    }
+
+    private void mergeBackButton(TopBarButtons buttons) {
         if (buttons.back.hasValue()) {
             if (buttons.back.visible.isFalse()) {
                 topBar.clearLeftButtons();
@@ -383,21 +396,15 @@ public class StackPresenter {
                 topBar.setBackButton(createButtonController(buttons.back));
             }
         }
-
-        if (options.rightButtonColor.hasValue()) topBar.setOverflowButtonColor(options.rightButtonColor.get());
     }
 
-    @Nullable
-    private List<Button> mergeButtonsWithColor(List<Button> buttons, Colour buttonColor, Colour 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);
-            }
+    private List<Button> mergeButtonsWithColor(@NonNull List<Button> buttons, Colour buttonColor, Colour disabledColor) {
+        List<Button> 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;
     }

lib/android/app/src/main/java/com/reactnativenavigation/utils/ButtonPresenter.java

@@ -1,32 +1,18 @@
 package com.reactnativenavigation.utils;
 
-import android.graphics.Color;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffColorFilter;
-import android.graphics.Typeface;
 import android.graphics.drawable.Drawable;
-import androidx.annotation.NonNull;
-import androidx.appcompat.widget.ActionMenuView;
-import androidx.appcompat.widget.Toolbar;
-import android.text.Spannable;
 import android.text.SpannableString;
-import android.text.style.AbsoluteSizeSpan;
-import android.view.MenuItem;
-import android.view.View;
-import android.widget.TextView;
 
 import com.reactnativenavigation.parse.params.Button;
 
-import java.util.ArrayList;
+import static android.text.Spanned.SPAN_EXCLUSIVE_INCLUSIVE;
 
 public class ButtonPresenter {
-    private final Toolbar toolbar;
-    private final ActionMenuView actionMenuView;
     private Button button;
 
-    public ButtonPresenter(Toolbar toolbar, Button button) {
-        this.toolbar = toolbar;
-        actionMenuView = ViewUtils.findChildrenByClass(toolbar, ActionMenuView.class).get(0);
+    public ButtonPresenter(Button button) {
         this.button = button;
     }
 
@@ -34,55 +20,9 @@ public class ButtonPresenter {
         drawable.setColorFilter(new PorterDuffColorFilter(tint, PorterDuff.Mode.SRC_IN));
     }
 
-    public void setTypeFace(Typeface typeface) {
-        UiUtils.runOnPreDrawOnce(toolbar, () -> {
-            ArrayList<View> buttons = findActualTextViewInMenu();
-            for (View btn : buttons) {
-                ((TextView) btn).setTypeface(typeface);
-            }
-        });
+    public SpannableString getStyledText() {
+        SpannableString string = new SpannableString(button.text.get(""));
+        string.setSpan(new ButtonSpan(button), 0, button.text.length(), SPAN_EXCLUSIVE_INCLUSIVE);
+        return string;
     }
-
-    public void setFontSize(MenuItem menuItem) {
-        SpannableString spanString = new SpannableString(button.text.get());
-        if (this.button.fontSize.hasValue())
-            spanString.setSpan(
-                    new AbsoluteSizeSpan(button.fontSize.get(), true),
-                    0,
-                    button.text.get().length(),
-                    Spannable.SPAN_INCLUSIVE_INCLUSIVE
-            );
-        menuItem.setTitleCondensed(spanString);
-    }
-
-    public void setTextColor() {
-        UiUtils.runOnPreDrawOnce(toolbar, () -> {
-            ArrayList<View> buttons = findActualTextViewInMenu();
-            for (View btn : buttons) {
-                if (button.enabled.isTrueOrUndefined() && button.color.hasValue()) {
-                    setEnabledColor((TextView) btn);
-                } else if (button.enabled.isFalse()) {
-                    setDisabledColor((TextView) btn, button.disabledColor.get(Color.LTGRAY));
-                }
-            }
-        });
-    }
-
-    public void setDisabledColor(TextView btn, int color) {
-        btn.setTextColor(color);
-    }
-
-    public void setEnabledColor(TextView btn) {
-        btn.setTextColor(button.color.get());
-    }
-
-    @NonNull
-    private ArrayList<View> findActualTextViewInMenu() {
-        ArrayList<View> outViews = new ArrayList<>();
-        if (button.text.hasValue()) {
-            actionMenuView.findViewsWithText(outViews, button.text.get(), View.FIND_VIEWS_WITH_TEXT);
-        }
-        return outViews;
-    }
-
 }

lib/android/app/src/main/java/com/reactnativenavigation/utils/ButtonSpan.kt

@@ -0,0 +1,27 @@
+package com.reactnativenavigation.utils
+
+import android.graphics.Paint
+import android.graphics.Typeface
+import android.text.TextPaint
+import android.text.style.MetricAffectingSpan
+import com.reactnativenavigation.parse.params.Button
+import com.reactnativenavigation.parse.params.Colour
+import com.reactnativenavigation.parse.params.Fraction
+
+class ButtonSpan(private val button: Button) : MetricAffectingSpan() {
+    override fun updateDrawState(drawState: TextPaint) = apply(drawState)
+
+    override fun updateMeasureState(paint: TextPaint) = apply(paint)
+
+    private fun apply(paint: Paint) {
+        with(button) {
+            val fakeStyle = (paint.typeface?.style ?: 0) and (fontFamily?.style?.inv() ?: 1)
+            if (fakeStyle and Typeface.BOLD != 0) paint.isFakeBoldText = true
+            if (fakeStyle and Typeface.ITALIC != 0) paint.textSkewX = -0.25f
+            if (fontSize.hasValue()) paint.textSize = fontSize.get().toFloat()
+            if (color.hasValue()) paint.color = if (enabled.isTrueOrUndefined) color.get() else disabledColor.get()
+            paint.typeface = fontFamily
+        }
+
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/utils/CollectionUtils.java

@@ -14,11 +14,16 @@ import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.core.util.Pair;
 
+@SuppressWarnings("WeakerAccess")
 public class CollectionUtils {
     public interface Apply<T> {
         void on(T t);
     }
 
+    public interface Comparator<T> {
+        boolean compare(T a, T b);
+    }
+
     public static boolean isNullOrEmpty(Collection collection) {
         return collection == null || collection.isEmpty();
     }
@@ -60,18 +65,42 @@ public class CollectionUtils {
         return result;
     }
 
+    public static <K, V> V getOrDefault(@Nullable Map<K, V> map, K key, Functions.FuncR<V> defaultValueCreator) {
+        if (map == null) return defaultValueCreator.run();
+        return map.containsKey(key) ? map.get(key) : defaultValueCreator.run();
+    }
+
     public static <T> List<T> merge(@Nullable Collection<T> a, @Nullable Collection<T> b, @NonNull List<T> defaultValue) {
         List<T> result = merge(a, b);
         return result == null ? defaultValue : result;
     }
 
-    public static <T> List<T> merge(@Nullable Collection<T> a, @Nullable Collection<T> b) {
+    public static <T> ArrayList<T> merge(@Nullable Collection<T> a, @Nullable Collection<T> b) {
         if (a == null && b == null) return null;
-        List<T> result = new ArrayList<>(get(a));
+        ArrayList<T> result = new ArrayList<>(get(a));
         result.addAll(get(b));
         return result;
     }
 
+    /**
+     * @return Items in a, that are not in b
+     */
+    public static <T> List<T> difference(@NonNull Collection<T> a, @Nullable Collection<T> b, Comparator<T> comparator) {
+        if (b == null) return new ArrayList<>(a);
+        ArrayList<T> results = new ArrayList<>();
+        forEach(a, btn -> {
+            if (!contains(b, btn, comparator)) results.add(btn);
+        });
+        return results;
+    }
+
+    private static <T> boolean contains(@NonNull Collection<T> items, T item, Comparator<T> comparator) {
+        for (T t : items) {
+            if (comparator.compare(t, item)) return true;
+        }
+        return false;
+    }
+
     public static <T> void forEach(@Nullable Collection<T> items, Apply<T> apply) {
         if (items != null) forEach(new ArrayList<>(items), 0, apply);
     }
@@ -94,6 +123,13 @@ public class CollectionUtils {
         }
     }
 
+    public static <T> void forEachIndexed(@Nullable List<T> items, Functions.Func2<T, Integer> apply) {
+        if (items == null) return;
+        for (int i = 0; i < items.size(); i++) {
+            apply.run(items.get(i), i);
+        }
+    }
+
     public static @Nullable <T> T first(@Nullable Collection<T> items, Filter<T> by) {
         if (isNullOrEmpty(items)) return null;
         for (T item : items) {
@@ -170,4 +206,8 @@ public class CollectionUtils {
         }
         return result;
     }
+
+    public static @Nullable<T> T safeGet(List<T> items, int index) {
+        return index >= 0 && index < items.size() ? items.get(index) : null;
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/utils/Functions.java

@@ -13,6 +13,10 @@ public class Functions {
         void run(T param);
     }
 
+    public interface Func2<T, S> {
+        void run(T param1, S param2);
+    }
+
     public interface FuncR<T> {
         T run();
     }

lib/android/app/src/main/java/com/reactnativenavigation/utils/IdFactory.kt

@@ -0,0 +1,17 @@
+package com.reactnativenavigation.utils
+
+
+class IdFactory {
+    companion object {
+        private val stringIdToIntId = HashMap<String, Int>()
+        private var count = 0
+
+        fun get(id: String): Int {
+            return if (stringIdToIntId.containsKey(id)) {
+                stringIdToIntId[id]!!
+            } else {
+                (++count).apply { stringIdToIntId[id] = count }
+            }
+        }
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/utils/ObjectUtils.java

@@ -19,6 +19,10 @@ public class ObjectUtils {
         return obj == null ? defaultValue : obj;
     }
 
+    public static <T> T getOrCreate(@Nullable T obj, @NonNull Functions.FuncR<T> creator) {
+        return obj == null ? creator.run() : obj;
+    }
+
     public static boolean notNull(Object o) {
         return o != null;
     }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/TitleBarButtonController.java

@@ -21,25 +21,30 @@ import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.viewcontrollers.button.IconResolver;
 import com.reactnativenavigation.viewcontrollers.viewcontrolleroverlay.ViewControllerOverlay;
+import com.reactnativenavigation.views.titlebar.TitleBar;
+import com.reactnativenavigation.views.titlebar.TitleBarButtonCreator;
 import com.reactnativenavigation.views.titlebar.TitleBarReactButtonView;
 
 import java.util.List;
 
 import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 import androidx.annotation.RestrictTo;
 import androidx.appcompat.widget.ActionMenuView;
 import androidx.appcompat.widget.Toolbar;
 import androidx.core.view.MenuItemCompat;
 
 public class TitleBarButtonController extends ViewController<TitleBarReactButtonView> implements MenuItem.OnMenuItemClickListener {
+    @Nullable private MenuItem menuItem;
+
     public interface OnClickListener {
         void onPress(String buttonId);
     }
 
     private final IconResolver navigationIconResolver;
-    private ButtonPresenter optionsPresenter;
+    private ButtonPresenter presenter;
     private final Button button;
-    private final ReactViewCreator viewCreator;
+    private final TitleBarButtonCreator viewCreator;
     private TitleBarButtonController.OnClickListener onPressListener;
     private Drawable icon;
 
@@ -52,15 +57,19 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
         return button.instanceId;
     }
 
+    public int getButtonIntId() {
+        return button.getIntId();
+    }
+
     public TitleBarButtonController(Activity activity,
                                     IconResolver navigationIconResolver,
-                                    ButtonPresenter optionsPresenter,
+                                    ButtonPresenter presenter,
                                     Button button,
-                                    ReactViewCreator viewCreator,
+                                    TitleBarButtonCreator viewCreator,
                                     OnClickListener onClickListener) {
         super(activity, button.id, new YellowBoxDelegate(), new Options(), new ViewControllerOverlay(activity));
         this.navigationIconResolver = navigationIconResolver;
-        this.optionsPresenter = optionsPresenter;
+        this.presenter = presenter;
         this.button = button;
         this.viewCreator = viewCreator;
         this.onPressListener = onClickListener;
@@ -96,7 +105,7 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
     @NonNull
     @Override
     protected TitleBarReactButtonView createView() {
-        view = (TitleBarReactButtonView) viewCreator.create(getActivity(), button.component.componentId.get(), button.component.name.get());
+        view = viewCreator.create(getActivity(), button.component);
         return (TitleBarReactButtonView) view.asView();
     }
 
@@ -106,6 +115,12 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
         return true;
     }
 
+    public boolean equals(TitleBarButtonController other) {
+        if (other == this) return true;
+        if (!other.getId().equals(getId())) return false;
+        return button.equals(other.button);
+    }
+
     public void applyNavigationIcon(Toolbar toolbar) {
         navigationIconResolver.resolve(button, icon -> {
             setIconColor(icon);
@@ -126,8 +141,14 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
         });
     }
 
-    public void addToMenu(Toolbar toolbar, int position) {
-        MenuItem menuItem = toolbar.getMenu().add(Menu.NONE, position, position, button.text.get(""));
+    public void addToMenu(TitleBar titleBar, int order) {
+        if (button.component.hasValue() && titleBar.containsRightButton(menuItem, order)) return;
+        titleBar.getMenu().removeItem(button.getIntId());
+        menuItem = titleBar.getMenu().add(Menu.NONE, button.getIntId(), order, presenter.getStyledText());
+        applyButtonOptions(titleBar, menuItem);
+    }
+
+    private void applyButtonOptions(TitleBar titleBar, MenuItem menuItem) {
         if (button.showAsAction.hasValue()) menuItem.setShowAsAction(button.showAsAction.get());
         menuItem.setEnabled(button.enabled.isTrueOrUndefined());
         menuItem.setOnMenuItemClickListener(this);
@@ -145,13 +166,9 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
                         menuItem.setIcon(icon);
                     }
                 });
-            } else {
-                optionsPresenter.setTextColor();
-                if (button.fontSize.hasValue()) optionsPresenter.setFontSize(menuItem);
-                optionsPresenter.setTypeFace(button.fontFamily);
             }
         }
-        setTestId(toolbar, button.testId);
+        setTestId(titleBar, button.testId);
     }
 
     private void loadIcon(ImageLoader.ImagesLoadingListener callback) {
@@ -161,9 +178,9 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
     private void setIconColor(Drawable icon) {
         if (button.disableIconTint.isTrue()) return;
         if (button.enabled.isTrueOrUndefined() && button.color.hasValue()) {
-            optionsPresenter.tint(icon, button.color.get());
+            presenter.tint(icon, button.color.get());
         } else if (button.enabled.isFalse()) {
-            optionsPresenter.tint(icon, button.disabledColor.get(Color.LTGRAY));
+            presenter.tint(icon, button.disabledColor.get(Color.LTGRAY));
         }
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/topbar/TopBarController.java

@@ -1,28 +1,35 @@
 package com.reactnativenavigation.viewcontrollers.topbar;
 
 import android.content.Context;
+import android.graphics.drawable.Drawable;
+import android.view.MenuItem;
 import android.view.View;
 
 import com.reactnativenavigation.anim.TopBarAnimator;
 import com.reactnativenavigation.parse.AnimationOptions;
-import com.reactnativenavigation.utils.CompatUtils;
+import com.reactnativenavigation.viewcontrollers.TitleBarButtonController;
 import com.reactnativenavigation.viewcontrollers.TitleBarReactViewController;
 import com.reactnativenavigation.views.StackLayout;
+import com.reactnativenavigation.views.titlebar.TitleBar;
 import com.reactnativenavigation.views.topbar.TopBar;
 
+import java.util.List;
+
 import androidx.annotation.VisibleForTesting;
 import androidx.viewpager.widget.ViewPager;
 
+import static com.reactnativenavigation.utils.CollectionUtils.*;
 import static com.reactnativenavigation.utils.ObjectUtils.perform;
 import static com.reactnativenavigation.utils.ViewUtils.isVisible;
 
 
 public class TopBarController {
     private TopBar topBar;
+    private TitleBar titleBar;
     private TopBarAnimator animator;
 
-    public TopBarController() {
-        animator = new TopBarAnimator();
+    public MenuItem getRightButton(int index) {
+        return titleBar.getRightButton(index);
     }
 
     public TopBar getView() {
@@ -33,15 +40,27 @@ public class TopBarController {
         return perform(topBar, 0, View::getHeight);
     }
 
+    public int getRightButtonsCount() {
+        return topBar.getRightButtonsCount();
+    }
+
+    public Drawable getLeftButton() {
+        return titleBar.getNavigationIcon();
+    }
+
     @VisibleForTesting
     public void setAnimator(TopBarAnimator animator) {
         this.animator = animator;
     }
 
+    public TopBarController() {
+        animator = new TopBarAnimator();
+    }
+
     public TopBar createView(Context context, StackLayout parent) {
         if (topBar == null) {
             topBar = createTopBar(context, parent);
-            topBar.setId(CompatUtils.generateViewId());
+            titleBar = topBar.getTitleBar();
             animator.bindView(topBar, parent);
         }
         return topBar;
@@ -98,4 +117,18 @@ public class TopBarController {
     public void setTitleComponent(TitleBarReactViewController component) {
         topBar.setTitleComponent(component.getView());
     }
+
+    public void applyRightButtons(List<TitleBarButtonController> toAdd) {
+        topBar.clearRightButtons();
+        forEachIndexed(toAdd, (b, i) -> b.addToMenu(titleBar, (toAdd.size() - i) * 10));
+    }
+
+    public void mergeRightButtons(List<TitleBarButtonController> toAdd, List<TitleBarButtonController> toRemove) {
+        forEach(toRemove, btn -> topBar.removeRightButton(btn));
+        forEachIndexed(toAdd, (b, i) -> b.addToMenu(titleBar, (toAdd.size() - i) * 10));
+    }
+
+    public void setLeftButtons(List<TitleBarButtonController> leftButtons) {
+        titleBar.setLeftButtons(leftButtons);
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/titlebar/TitleBar.java

@@ -7,6 +7,7 @@ import android.graphics.PorterDuffColorFilter;
 import android.graphics.Typeface;
 import android.graphics.drawable.Drawable;
 import android.util.Log;
+import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.TextView;
@@ -18,10 +19,10 @@ import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.viewcontrollers.TitleBarButtonController;
 
+import java.util.ArrayList;
 import java.util.List;
 
-import javax.annotation.Nullable;
-
+import androidx.annotation.Nullable;
 import androidx.appcompat.widget.ActionMenuView;
 import androidx.appcompat.widget.Toolbar;
 
@@ -42,6 +43,22 @@ public class TitleBar extends Toolbar {
     private Boolean isTitleChanged = false;
     private Boolean isSubtitleChanged = false;
 
+    public MenuItem getRightButton(int index) {
+        return getMenu().getItem(index);
+    }
+
+    public int getRightButtonsCount() {
+        return getMenu().size();
+    }
+
+    public List<MenuItem> getRightButtons() {
+        List<MenuItem> items = new ArrayList<>();
+        for (int i = 0; i < getRightButtonsCount(); i++) {
+            items.add(i, getRightButton(i));
+        }
+        return items;
+    }
+
     public TitleBar(Context context) {
         super(context);
         getMenu();
@@ -110,13 +127,19 @@ public class TitleBar extends Toolbar {
         subtitleAlignment = alignment;
     }
 
+    public boolean containsRightButton(@Nullable MenuItem menuItem, int order) {
+        return menuItem != null &&
+               getMenu().findItem(menuItem.getItemId()) != null &&
+               menuItem.getOrder() == order;
+    }
+
     public void alignTextView(Alignment alignment, TextView view) {
         if (StringUtils.isEmpty(view.getText())) return;
         int direction = view.getParent().getLayoutDirection();
         boolean isRTL = direction == View.LAYOUT_DIRECTION_RTL;
 
         if (alignment == Alignment.Center) {
-            view.setX((getWidth() - view.getWidth()) / 2);
+            view.setX((getWidth() - view.getWidth()) / 2f);
         } else if (leftButtonController != null) {
             view.setX(isRTL ? (getWidth() - view.getWidth()) - getContentInsetStartWithNavigation() : getContentInsetStartWithNavigation());
         } else {
@@ -128,13 +151,13 @@ public class TitleBar extends Toolbar {
     protected void onLayout(boolean changed, int l, int t, int r, int b) {
         super.onLayout(changed, l, t, r, b);
 
-        if(changed || isTitleChanged) {
+        if (changed || isTitleChanged) {
             TextView title = findTitleTextView();
             if (title != null) this.alignTextView(titleAlignment, title);
             isTitleChanged = false;
         }
 
-        if(changed || isSubtitleChanged) {
+        if (changed || isSubtitleChanged) {
             TextView subtitle = findSubtitleTextView();
             if (subtitle != null) this.alignTextView(subtitleAlignment, subtitle);
             isSubtitleChanged = false;
@@ -190,7 +213,7 @@ public class TitleBar extends Toolbar {
         }
     }
 
-    private void clearRightButtons() {
+    public void clearRightButtons() {
         if (getMenu().size() > 0) getMenu().clear();
     }
 
@@ -216,14 +239,6 @@ public class TitleBar extends Toolbar {
         button.applyNavigationIcon(this);
     }
 
-    public void setRightButtons(List<TitleBarButtonController> rightButtons) {
-        if (rightButtons == null) return;
-        clearRightButtons();
-        for (int i = 0; i < rightButtons.size(); i++) {
-            rightButtons.get(i).addToMenu(this, rightButtons.size() - i - 1);
-        }
-    }
-
     public void setHeight(int height) {
         int pixelHeight = UiUtils.dpToPx(getContext(), height);
         if (pixelHeight == getLayoutParams().height) return;
@@ -257,4 +272,12 @@ public class TitleBar extends Toolbar {
             ((ViewGroup) child).setClipChildren(false);
         }
     }
+
+    public void removeRightButton(int buttonId) {
+        getMenu().removeItem(buttonId);
+    }
+
+    public boolean containsRightButton(TitleBarButtonController button) {
+        return getMenu().findItem(button.getButtonIntId()) != null;
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/titlebar/TitleBarButtonCreator.java

@@ -3,9 +3,9 @@ package com.reactnativenavigation.views.titlebar;
 import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
-import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+import com.reactnativenavigation.parse.Component;
 
-public class TitleBarButtonCreator implements ReactViewCreator {
+public class TitleBarButtonCreator {
 
     private ReactInstanceManager instanceManager;
 
@@ -13,8 +13,7 @@ public class TitleBarButtonCreator implements ReactViewCreator {
         this.instanceManager = instanceManager;
 	}
 
-	@Override
-	public TitleBarReactButtonView create(Activity activity, String componentId, String componentName) {
-        return new TitleBarReactButtonView(activity, instanceManager, componentId, componentName);
+	public TitleBarReactButtonView create(Activity activity, Component component) {
+        return new TitleBarReactButtonView(activity, instanceManager, component);
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/titlebar/TitleBarReactButtonView.java

@@ -4,17 +4,34 @@ import android.annotation.SuppressLint;
 import android.content.Context;
 
 import com.facebook.react.ReactInstanceManager;
+import com.reactnativenavigation.parse.Component;
+import com.reactnativenavigation.parse.params.Number;
 import com.reactnativenavigation.react.ReactView;
 
+import static android.view.View.MeasureSpec.EXACTLY;
+import static android.view.View.MeasureSpec.UNSPECIFIED;
+import static android.view.View.MeasureSpec.makeMeasureSpec;
+import static com.reactnativenavigation.utils.UiUtils.dpToPx;
+
 @SuppressLint("ViewConstructor")
 public class TitleBarReactButtonView extends ReactView {
+    private final Component component;
 
-    public TitleBarReactButtonView(Context context, ReactInstanceManager reactInstanceManager, String componentId, String componentName) {
-        super(context, reactInstanceManager, componentId, componentName);
+    public TitleBarReactButtonView(Context context, ReactInstanceManager reactInstanceManager, Component component) {
+        super(context, reactInstanceManager, component.componentId.get(), component.name.get());
+        this.component = component;
     }
 
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
-        super.onMeasure(MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.UNSPECIFIED), heightMeasureSpec);
+        super.onMeasure(createSpec(widthMeasureSpec, component.width), createSpec(widthMeasureSpec, component.height));
+    }
+
+    private int createSpec(int measureSpec, Number dimension) {
+        if (dimension.hasValue()) {
+            return makeMeasureSpec(MeasureSpec.getSize(dpToPx(getContext(), dimension.get())), EXACTLY);
+        } else {
+            return makeMeasureSpec(MeasureSpec.getSize(measureSpec), UNSPECIFIED);
+        }
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/topbar/TopBar.java

@@ -6,6 +6,7 @@ import android.graphics.Color;
 import android.graphics.Typeface;
 import android.os.Build;
 import android.view.Gravity;
+import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
@@ -32,7 +33,6 @@ import java.util.List;
 import androidx.annotation.ColorInt;
 import androidx.annotation.NonNull;
 import androidx.annotation.VisibleForTesting;
-import androidx.appcompat.widget.Toolbar;
 import androidx.viewpager.widget.ViewPager;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
@@ -48,9 +48,14 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
     private View component;
     private float elevation = -1;
 
+    public int getRightButtonsCount() {
+        return titleBar.getRightButtonsCount();
+    }
+
     public TopBar(final Context context) {
         super(context);
         context.setTheme(R.style.TopBar);
+        setId(CompatUtils.generateViewId());
         collapsingBehavior = new TopBarCollapseBehavior(this);
         topTabs = new TopTabs(getContext());
         createLayout();
@@ -204,20 +209,12 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
         titleBar.setBackButton(backButton);
     }
 
-    public void setLeftButtons(List<TitleBarButtonController> leftButtons) {
-        titleBar.setLeftButtons(leftButtons);
-    }
-
     public void clearLeftButtons() {
         titleBar.setLeftButtons(Collections.emptyList());
     }
 
-    public void setRightButtons(List<TitleBarButtonController> rightButtons) {
-        titleBar.setRightButtons(rightButtons);
-    }
-
     public void clearRightButtons() {
-        titleBar.setRightButtons(Collections.emptyList());
+        titleBar.clearRightButtons();
     }
 
     public void setElevation(Double elevation) {
@@ -234,10 +231,18 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
         }
     }
 
-    public Toolbar getTitleBar() {
+    public TitleBar getTitleBar() {
         return titleBar;
     }
 
+    public List<MenuItem> getRightButtons() {
+        return titleBar.getRightButtons();
+    }
+
+    public MenuItem getRightButton(int index) {
+        return titleBar.getRightButton(getRightButtonsCount() - index - 1);
+    }
+
     public void initTopTabs(ViewPager viewPager) {
         topTabs.setVisibility(VISIBLE);
         topTabs.init(viewPager);
@@ -284,4 +289,16 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
     public void setLayoutDirection(LayoutDirection direction) {
         titleBar.setLayoutDirection(direction.get());
     }
+
+    public void removeRightButton(TitleBarButtonController button) {
+        removeRightButton(button.getButtonIntId());
+    }
+
+    public void removeRightButton(int buttonId) {
+        titleBar.removeRightButton(buttonId);
+    }
+
+    public boolean containsRightButton(TitleBarButtonController button) {
+        return titleBar.containsRightButton(button);
+    }
 }

lib/android/app/src/test/java/com/reactnativenavigation/TestUtils.java

@@ -7,7 +7,7 @@ import android.view.ViewGroup;
 
 import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarBackgroundViewCreatorMock;
-import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
+import com.reactnativenavigation.mocks.TitleBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.presentation.RenderChecker;
@@ -39,7 +39,7 @@ public class TestUtils {
                 .setId("stack")
                 .setChildRegistry(new ChildControllersRegistry())
                 .setTopBarController(topBarController)
-                .setStackPresenter(new StackPresenter(activity, new TitleBarReactViewCreatorMock(), new TopBarBackgroundViewCreatorMock(), new TopBarButtonCreatorMock(), new IconResolver(activity, new ImageLoader()), new RenderChecker(), new Options()))
+                .setStackPresenter(new StackPresenter(activity, new TitleBarReactViewCreatorMock(), new TopBarBackgroundViewCreatorMock(), new TitleBarButtonCreatorMock(), new IconResolver(activity, new ImageLoader()), new RenderChecker(), new Options()))
                 .setInitialOptions(new Options());
     }
 

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TopBarButtonCreatorMock.java → lib/android/app/src/test/java/com/reactnativenavigation/mocks/TitleBarButtonCreatorMock.java

@@ -3,18 +3,23 @@ package com.reactnativenavigation.mocks;
 import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
+import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.react.events.ComponentType;
-import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+import com.reactnativenavigation.views.titlebar.TitleBarButtonCreator;
 import com.reactnativenavigation.views.titlebar.TitleBarReactButtonView;
 
 import static org.mockito.Mockito.mock;
 
-public class TopBarButtonCreatorMock implements ReactViewCreator {
+public class TitleBarButtonCreatorMock extends TitleBarButtonCreator {
+
+    public TitleBarButtonCreatorMock() {
+        super(null);
+    }
 
     @Override
-    public TitleBarReactButtonView create(Activity activity, String componentId, String componentName) {
+    public TitleBarReactButtonView create(Activity activity, Component component) {
         final ReactInstanceManager reactInstanceManager = mock(ReactInstanceManager.class);
-        return new TitleBarReactButtonView(activity, reactInstanceManager, componentId, componentName) {
+        return new TitleBarReactButtonView(activity, reactInstanceManager, component) {
             @Override
             public void sendComponentStart(ComponentType type) {
 

lib/android/app/src/test/java/com/reactnativenavigation/utils/TitleBarHelper.java

@@ -3,22 +3,14 @@ package com.reactnativenavigation.utils;
 import android.app.Activity;
 
 import com.reactnativenavigation.mocks.ImageLoaderMock;
-import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
+import com.reactnativenavigation.mocks.TitleBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.viewcontrollers.TitleBarButtonController;
 import com.reactnativenavigation.viewcontrollers.button.IconResolver;
-import com.reactnativenavigation.views.titlebar.TitleBar;
-
-import androidx.appcompat.view.menu.ActionMenuItemView;
-import androidx.appcompat.widget.Toolbar;
 
 public class TitleBarHelper {
-    public static ActionMenuItemView getRightButton(Toolbar toolbar, int index) {
-        return (ActionMenuItemView) ViewUtils.findChildrenByClassRecursive(toolbar, ActionMenuItemView.class).get(toolbar.getMenu().size() - index - 1);
-    }
-
     public static Button textualButton(String text) {
         Button button = new Button();
         button.id = text + CompatUtils.generateViewId();
@@ -50,12 +42,12 @@ public class TitleBarHelper {
     }
 
 
-    public static TitleBarButtonController createButtonController(Activity activity, TitleBar titleBar, Button button) {
+    public static TitleBarButtonController createButtonController(Activity activity, Button button) {
         return new TitleBarButtonController(activity,
                 new IconResolver(activity, ImageLoaderMock.mock()),
-                new ButtonPresenter(titleBar, button),
+                new ButtonPresenter(button),
                 button,
-                new TopBarButtonCreatorMock(),
+                new TitleBarButtonCreatorMock(),
                 buttonId -> {}
         );
     }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/StackPresenterTest.java

@@ -14,7 +14,7 @@ import com.reactnativenavigation.mocks.Mocks;
 import com.reactnativenavigation.mocks.SimpleViewController;
 import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarBackgroundViewCreatorMock;
-import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
+import com.reactnativenavigation.mocks.TitleBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Alignment;
 import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.Options;
@@ -57,6 +57,9 @@ import androidx.coordinatorlayout.widget.CoordinatorLayout;
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
 import static com.reactnativenavigation.utils.CollectionUtils.*;
+import static java.util.Arrays.asList;
+import static java.util.Collections.singletonList;
+import static java.util.Objects.requireNonNull;
 import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.ArgumentMatchers.anyBoolean;
@@ -99,8 +102,7 @@ public class StackPresenterTest extends BaseTest {
             }
         };
         renderChecker = spy(new RenderChecker());
-        IconResolver iconResolver = new IconResolver(activity, ImageLoaderMock.mock());
-        uut = spy(new StackPresenter(activity, titleViewCreator, new TopBarBackgroundViewCreatorMock(), new TopBarButtonCreatorMock(), iconResolver, renderChecker, new Options()));
+        uut = spy(new StackPresenter(activity, titleViewCreator, new TopBarBackgroundViewCreatorMock(), new TitleBarButtonCreatorMock(), new IconResolver(activity, ImageLoaderMock.mock()), renderChecker, new Options()));
         createTopBarController();
 
         parent = TestUtils.newStackController(activity)
@@ -119,7 +121,7 @@ public class StackPresenterTest extends BaseTest {
         Options o1 = new Options();
         o1.topBar.title.component = component(Alignment.Default);
         o1.topBar.background.component = component(Alignment.Default);
-        o1.topBar.buttons.right = new ArrayList<>(Collections.singletonList(componentBtn1));
+        o1.topBar.buttons.right = new ArrayList<>(singletonList(componentBtn1));
         uut.applyChildOptions(o1, parent, child);
 
         uut.isRendered(child.getView());
@@ -192,8 +194,8 @@ public class StackPresenterTest extends BaseTest {
     @Test
     public void mergeButtons() {
         uut.mergeChildOptions(EMPTY_OPTIONS, EMPTY_OPTIONS, parent, child);
-        verify(topBar, times(0)).setRightButtons(any());
-        verify(topBar, times(0)).setLeftButtons(any());
+        verify(topBarController, times(0)).applyRightButtons(any());
+        verify(topBarController, times(0)).setLeftButtons(any());
 
         Options options = new Options();
 
@@ -201,22 +203,22 @@ public class StackPresenterTest extends BaseTest {
         button.text = new Text("btn");
         options.topBar.buttons.right = new ArrayList<>(Collections.singleton(button));
         uut.mergeChildOptions(options, EMPTY_OPTIONS, parent, child);
-        verify(topBar, times(1)).setRightButtons(any());
+        verify(topBarController).mergeRightButtons(any(), any());
 
         options.topBar.buttons.left = new ArrayList<>();
         uut.mergeChildOptions(options, EMPTY_OPTIONS, parent, child);
-        verify(topBar, times(1)).setLeftButtons(any());
+        verify(topBarController).setLeftButtons(any());
     }
 
     @Test
     public void mergeButtons_previousRightButtonsAreDestroyed() {
         Options options = new Options();
-        options.topBar.buttons.right = new ArrayList<>(Collections.singletonList(componentBtn1));
+        options.topBar.buttons.right = new ArrayList<>(singletonList(componentBtn1));
         uut.applyChildOptions(options, parent, child);
         List<TitleBarButtonController> initialButtons = uut.getComponentButtons(child.getView());
         forEach(initialButtons, ViewController::ensureViewIsCreated);
 
-        options.topBar.buttons.right = new ArrayList<>(Collections.singletonList(componentBtn2));
+        options.topBar.buttons.right = new ArrayList<>(singletonList(componentBtn2));
         uut.mergeChildOptions(options, Options.EMPTY, parent, child);
         for (TitleBarButtonController button : initialButtons) {
             assertThat(button.isDestroyed()).isTrue();
@@ -224,35 +226,59 @@ public class StackPresenterTest extends BaseTest {
     }
 
     @Test
-    public void mergeButtons_mergingRightButtonsOnlyDestroysRightButtons() {
+    public void mergeRightButtons_mergingButtonsOnlyDestroysRightButtons() {
         Options a = new Options();
-        a.topBar.buttons.right = new ArrayList<>(Collections.singletonList(componentBtn1));
-        a.topBar.buttons.left = new ArrayList<>(Collections.singletonList(componentBtn2));
+        a.topBar.buttons.right = new ArrayList<>(singletonList(componentBtn1));
+        a.topBar.buttons.left = new ArrayList<>(singletonList(componentBtn2));
         uut.applyChildOptions(a, parent, child);
         List<TitleBarButtonController> initialButtons = uut.getComponentButtons(child.getView());
         forEach(initialButtons, ViewController::ensureViewIsCreated);
 
         Options b = new Options();
-        b.topBar.buttons.right = new ArrayList<>(Collections.singletonList(componentBtn2));
+        b.topBar.buttons.right = new ArrayList<>(singletonList(componentBtn2));
         uut.mergeChildOptions(b, Options.EMPTY, parent, child);
         assertThat(initialButtons.get(0).isDestroyed()).isTrue();
         assertThat(initialButtons.get(1).isDestroyed()).isFalse();
     }
 
     @Test
-    public void mergeButtons_mergingLeftButtonsOnlyDestroysLeftButtons() {
+    public void mergeRightButtons_buttonsAreCreatedOnlyIfNeeded() {
+        Options toApply = new Options();
+        toApply.topBar.buttons.right = new ArrayList<>(asList(textBtn1, componentBtn1));
+        uut.applyChildOptions(toApply, parent, child);
+
+        ArgumentCaptor<List<TitleBarButtonController>> captor1 = ArgumentCaptor.forClass(List.class);
+        verify(topBarController).applyRightButtons(captor1.capture());
+        assertThat(topBar.getTitleBar().getMenu().size()).isEqualTo(2);
+        List<TitleBarButtonController> appliedButtons = captor1.getValue();
+
+        Options toMerge = new Options();
+        toMerge.topBar.buttons.right = new ArrayList(requireNonNull(map(toApply.topBar.buttons.right, Button::copy)));
+        toMerge.topBar.buttons.right.add(1, componentBtn2);
+        uut.mergeChildOptions(toMerge, Options.EMPTY, parent, child);
+
+        assertThat(topBar.getTitleBar().getMenu().size()).isEqualTo(3);
+        ArgumentCaptor<List<TitleBarButtonController>> captor2 = ArgumentCaptor.forClass(List.class);
+        verify(topBarController).mergeRightButtons(captor2.capture(), any());
+        List<TitleBarButtonController> mergedButtons = captor2.getValue();
+        assertThat(mergedButtons).hasSize(3);
+        assertThat(appliedButtons.get(0)).isEqualTo(mergedButtons.get(0));
+        assertThat(appliedButtons.get(1)).isEqualTo(mergedButtons.get(2));
+    }
+
+    @Test
+    public void mergeButtons_mergingLeftButtonsDoesNotDestroyRightButtons() {
         Options a = new Options();
-        a.topBar.buttons.right = new ArrayList<>(Collections.singletonList(componentBtn1));
-        a.topBar.buttons.left = new ArrayList<>(Collections.singletonList(componentBtn2));
+        a.topBar.buttons.right = new ArrayList<>(singletonList(componentBtn1));
+        a.topBar.buttons.left = new ArrayList<>(singletonList(componentBtn2));
         uut.applyChildOptions(a, parent, child);
         List<TitleBarButtonController> initialButtons = uut.getComponentButtons(child.getView());
         forEach(initialButtons, ViewController::ensureViewIsCreated);
 
         Options b = new Options();
-        b.topBar.buttons.left = new ArrayList<>(Collections.singletonList(componentBtn2));
+        b.topBar.buttons.left = new ArrayList<>(singletonList(componentBtn2));
         uut.mergeChildOptions(b, Options.EMPTY, parent, child);
         assertThat(initialButtons.get(0).isDestroyed()).isFalse();
-        assertThat(initialButtons.get(1).isDestroyed()).isTrue();
     }
 
     @Test
@@ -423,14 +449,14 @@ public class StackPresenterTest extends BaseTest {
 
         uut.applyChildOptions(options, parent, child);
         ArgumentCaptor<List<TitleBarButtonController>> rightCaptor = ArgumentCaptor.forClass(List.class);
-        verify(topBar).setRightButtons(rightCaptor.capture());
+        verify(topBarController).applyRightButtons(rightCaptor.capture());
         assertThat(rightCaptor.getValue().get(0).getButton().color.get()).isEqualTo(options.topBar.rightButtonColor.get());
         assertThat(rightCaptor.getValue().get(1).getButton().color.get()).isEqualTo(options.topBar.rightButtonColor.get());
         assertThat(rightCaptor.getValue().get(0)).isNotEqualTo(rightButton1);
         assertThat(rightCaptor.getValue().get(1)).isNotEqualTo(rightButton2);
 
         ArgumentCaptor<List<TitleBarButtonController>> leftCaptor = ArgumentCaptor.forClass(List.class);
-        verify(topBar).setLeftButtons(leftCaptor.capture());
+        verify(topBarController).setLeftButtons(leftCaptor.capture());
         assertThat(leftCaptor.getValue().get(0).getButton().color).isEqualTo(options.topBar.leftButtonColor);
         assertThat(leftCaptor.getValue().get(0)).isNotEqualTo(leftButton);
     }
@@ -468,14 +494,14 @@ public class StackPresenterTest extends BaseTest {
 
         uut.mergeChildOptions(options2, appliedOptions, parent, child);
         ArgumentCaptor<List<TitleBarButtonController>> rightCaptor = ArgumentCaptor.forClass(List.class);
-        verify(topBar, times(1)).setRightButtons(rightCaptor.capture());
+        verify(topBarController).mergeRightButtons(rightCaptor.capture(), any());
         assertThat(rightCaptor.getValue().get(0).getButton().color.get()).isEqualTo(appliedOptions.topBar.rightButtonColor.get());
         assertThat(rightCaptor.getValue().get(1).getButton().color.get()).isEqualTo(appliedOptions.topBar.rightButtonColor.get());
         assertThat(rightCaptor.getValue().get(0)).isNotEqualTo(rightButton1);
         assertThat(rightCaptor.getValue().get(1)).isNotEqualTo(rightButton2);
 
         ArgumentCaptor<List<TitleBarButtonController>> leftCaptor = ArgumentCaptor.forClass(List.class);
-        verify(topBar, times(1)).setLeftButtons(leftCaptor.capture());
+        verify(topBarController).setLeftButtons(leftCaptor.capture());
         assertThat(leftCaptor.getValue().get(0).getButton().color.get()).isEqualTo(appliedOptions.topBar.leftButtonColor.get());
         assertThat(leftCaptor.getValue().get(0)).isNotEqualTo(leftButton);
     }
@@ -500,14 +526,14 @@ public class StackPresenterTest extends BaseTest {
 
         uut.mergeChildOptions(options2, resolvedOptions, parent, child);
         ArgumentCaptor<List<TitleBarButtonController>> rightCaptor = ArgumentCaptor.forClass(List.class);
-        verify(topBar).setRightButtons(rightCaptor.capture());
+        verify(topBarController).mergeRightButtons(rightCaptor.capture(), any());
         assertThat(rightCaptor.getValue().get(0).getButton().color.get()).isEqualTo(resolvedOptions.topBar.rightButtonColor.get());
         assertThat(rightCaptor.getValue().get(1).getButton().color.get()).isEqualTo(resolvedOptions.topBar.rightButtonColor.get());
         assertThat(rightCaptor.getValue().get(0)).isNotEqualTo(rightButton1);
         assertThat(rightCaptor.getValue().get(1)).isNotEqualTo(rightButton2);
 
         ArgumentCaptor<List<TitleBarButtonController>> leftCaptor = ArgumentCaptor.forClass(List.class);
-        verify(topBar).setLeftButtons(leftCaptor.capture());
+        verify(topBarController).setLeftButtons(leftCaptor.capture());
         assertThat(leftCaptor.getValue().get(0).getButton().color.get()).isEqualTo(resolvedOptions.topBar.leftButtonColor.get());
         assertThat(leftCaptor.getValue().get(0)).isNotEqualTo(leftButton);
     }
@@ -515,14 +541,14 @@ public class StackPresenterTest extends BaseTest {
     @Test
     public void getButtonControllers_buttonControllersArePassedToTopBar() {
         Options options = new Options();
-        options.topBar.buttons.right = new ArrayList<>(Collections.singletonList(textBtn1));
-        options.topBar.buttons.left = new ArrayList<>(Collections.singletonList(textBtn1));
+        options.topBar.buttons.right = new ArrayList<>(singletonList(textBtn1));
+        options.topBar.buttons.left = new ArrayList<>(singletonList(textBtn1));
         uut.applyChildOptions(options, parent, child);
 
         ArgumentCaptor<List<TitleBarButtonController>> rightCaptor = ArgumentCaptor.forClass(List.class);
         ArgumentCaptor<List<TitleBarButtonController>> leftCaptor = ArgumentCaptor.forClass(List.class);
-        verify(topBar).setRightButtons(rightCaptor.capture());
-        verify(topBar).setLeftButtons(leftCaptor.capture());
+        verify(topBarController).applyRightButtons(rightCaptor.capture());
+        verify(topBarController).setLeftButtons(leftCaptor.capture());
 
         assertThat(rightCaptor.getValue().size()).isOne();
         assertThat(leftCaptor.getValue().size()).isOne();
@@ -531,8 +557,8 @@ public class StackPresenterTest extends BaseTest {
     @Test
     public void getButtonControllers_storesButtonsByComponent() {
         Options options = new Options();
-        options.topBar.buttons.right = new ArrayList<>(Collections.singletonList(textBtn1));
-        options.topBar.buttons.left = new ArrayList<>(Collections.singletonList(textBtn2));
+        options.topBar.buttons.right = new ArrayList<>(singletonList(textBtn1));
+        options.topBar.buttons.left = new ArrayList<>(singletonList(textBtn2));
         uut.applyChildOptions(options, parent, child);
 
         List<TitleBarButtonController> componentButtons = uut.getComponentButtons(child.getView());
@@ -544,8 +570,8 @@ public class StackPresenterTest extends BaseTest {
     @Test
     public void getButtonControllers_createdOnce() {
         Options options = new Options();
-        options.topBar.buttons.right = new ArrayList<>(Collections.singletonList(textBtn1));
-        options.topBar.buttons.left = new ArrayList<>(Collections.singletonList(textBtn2));
+        options.topBar.buttons.right = new ArrayList<>(singletonList(textBtn1));
+        options.topBar.buttons.left = new ArrayList<>(singletonList(textBtn2));
 
         uut.applyChildOptions(options, parent, child);
         List<TitleBarButtonController> buttons1 = uut.getComponentButtons(child.getView());
@@ -560,8 +586,8 @@ public class StackPresenterTest extends BaseTest {
     @Test
     public void applyButtons_doesNotDestroyOtherComponentButtons() {
         Options options = new Options();
-        options.topBar.buttons.right = new ArrayList<>(Collections.singletonList(componentBtn1));
-        options.topBar.buttons.left = new ArrayList<>(Collections.singletonList(componentBtn2));
+        options.topBar.buttons.right = new ArrayList<>(singletonList(componentBtn1));
+        options.topBar.buttons.left = new ArrayList<>(singletonList(componentBtn2));
         uut.applyChildOptions(options, parent, child);
         List<TitleBarButtonController> buttons = uut.getComponentButtons(child.getView());
         forEach(buttons, ViewController::ensureViewIsCreated);
@@ -575,8 +601,8 @@ public class StackPresenterTest extends BaseTest {
     @Test
     public void onChildDestroyed_destroyedButtons() {
         Options options = new Options();
-        options.topBar.buttons.right = new ArrayList<>(Collections.singletonList(componentBtn1));
-        options.topBar.buttons.left = new ArrayList<>(Collections.singletonList(componentBtn2));
+        options.topBar.buttons.right = new ArrayList<>(singletonList(componentBtn1));
+        options.topBar.buttons.left = new ArrayList<>(singletonList(componentBtn2));
         uut.applyChildOptions(options, parent, child);
         List<TitleBarButtonController> buttons = uut.getComponentButtons(child.getView());
         forEach(buttons, ViewController::ensureViewIsCreated);

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/TitleBarButtonControllerTest.java

@@ -0,0 +1,61 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+import android.view.MenuItem;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.ImageLoaderMock;
+import com.reactnativenavigation.mocks.TitleBarButtonCreatorMock;
+import com.reactnativenavigation.parse.params.Button;
+import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.utils.ButtonPresenter;
+import com.reactnativenavigation.viewcontrollers.button.IconResolver;
+import com.reactnativenavigation.views.titlebar.TitleBar;
+
+import org.junit.Test;
+import org.mockito.Mockito;
+
+import static org.assertj.core.api.Java6Assertions.assertThat;
+
+public class TitleBarButtonControllerTest extends BaseTest {
+    private TitleBarButtonController uut;
+    private TitleBar titleBar;
+
+    @Override
+    public void beforeEach() {
+        Activity activity = newActivity();
+        titleBar = new TitleBar(activity);
+
+        Button button = createComponentButton();
+        uut = new TitleBarButtonController(
+                activity,
+                new IconResolver(activity, ImageLoaderMock.mock()),
+                new ButtonPresenter(button),
+                button,
+                new TitleBarButtonCreatorMock(),
+                Mockito.mock(TitleBarButtonController.OnClickListener.class)
+        );
+    }
+
+    @Test
+    public void addToMenu_componentButtonIsNotRecreatedIfAlreadyAddedWithSameOrder() {
+        uut.addToMenu(titleBar, 0);
+        MenuItem first = titleBar.getRightButton(0);
+
+        uut.addToMenu(titleBar, 0);
+        MenuItem second = titleBar.getRightButton(0);
+        assertThat(first).isEqualTo(second);
+
+        uut.addToMenu(titleBar, 1);
+        MenuItem third = titleBar.getRightButton(0);
+        assertThat(third).isNotEqualTo(second);
+    }
+
+    private Button createComponentButton() {
+        Button componentButton = new Button();
+        componentButton.id = "customBtn";
+        componentButton.component.name = new Text("com.rnn.customBtn");
+        componentButton.component.componentId = new Text("component4");
+        return componentButton;
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/TitleBarTest.java

@@ -6,25 +6,16 @@ import android.widget.TextView;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.TestUtils;
-import com.reactnativenavigation.parse.params.Button;
-import com.reactnativenavigation.parse.params.Text;
-import com.reactnativenavigation.react.Constants;
-import com.reactnativenavigation.react.ReactView;
-import com.reactnativenavigation.utils.CollectionUtils;
 import com.reactnativenavigation.views.titlebar.TitleBar;
 
 import org.junit.Test;
 import org.mockito.Mockito;
 
-import java.util.ArrayList;
-import java.util.Arrays;
 import java.util.Collections;
-import java.util.List;
 
 import androidx.appcompat.widget.ActionMenuView;
 
 import static com.reactnativenavigation.utils.Assertions.assertNotNull;
-import static com.reactnativenavigation.utils.TitleBarHelper.createButtonController;
 import static com.reactnativenavigation.utils.ViewUtils.findChildByClass;
 import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.Mockito.any;
@@ -37,67 +28,14 @@ import static org.mockito.Mockito.when;
 public class TitleBarTest extends BaseTest {
 
     private TitleBar uut;
-    private Button leftButton;
-    private Button textButton;
-    private Button customButton;
     private Activity activity;
 
     @Override
     public void beforeEach() {
         activity = newActivity();
-        createButtons();
         uut = spy(new TitleBar(activity));
     }
 
-    private void createButtons() {
-        leftButton = new Button();
-        leftButton.id = Constants.BACK_BUTTON_ID;
-
-        textButton = new Button();
-        textButton.id = "textButton";
-        textButton.text = new Text("Btn");
-
-        customButton = new Button();
-        customButton.id = "customBtn";
-        customButton.component.name = new Text("com.rnn.customBtn");
-        customButton.component.componentId = new Text("component4");
-    }
-
-    @Test
-    public void setButton_setsTextButton() {
-        uut.setRightButtons(rightButtons(textButton));
-        uut.setLeftButtons(leftButton(leftButton));
-        assertThat(uut.getMenu().getItem(0).getTitle()).isEqualTo(textButton.text.get());
-    }
-
-    @Test
-    public void setButton_setsCustomButton() {
-        uut.setLeftButtons(leftButton(leftButton));
-        uut.setRightButtons(rightButtons(customButton));
-        ReactView btnView = (ReactView) uut.getMenu().getItem(0).getActionView();
-        assertThat(btnView.getComponentName()).isEqualTo(customButton.component.name.get());
-    }
-
-    @Test
-    public void setRightButtons_emptyButtonsListClearsRightButtons() {
-        uut.setLeftButtons(new ArrayList<>());
-        uut.setRightButtons(rightButtons(customButton, textButton));
-        uut.setLeftButtons(new ArrayList<>());
-        uut.setRightButtons(new ArrayList<>());
-        assertThat(uut.getMenu().size()).isEqualTo(0);
-    }
-
-    @Test
-    public void setLeftButtons_emptyButtonsListClearsLeftButton() {
-        uut.setLeftButtons(leftButton(leftButton));
-        uut.setRightButtons(rightButtons(customButton));
-        assertThat(uut.getNavigationIcon()).isNotNull();
-
-        uut.setLeftButtons(new ArrayList<>());
-        uut.setRightButtons(rightButtons(textButton));
-        assertThat(uut.getNavigationIcon()).isNull();
-    }
-
     @Test
     public void setLeftButton_titleIsAligned() {
         uut.setTitle("Title");
@@ -110,13 +48,6 @@ public class TitleBarTest extends BaseTest {
         verify(uut).alignTextView(any(), eq(title));
     }
 
-    @Test
-    public void setRightButtons_buttonsAreAddedInReverseOrderToMatchOrderOnIOs() {
-        uut.setLeftButtons(new ArrayList<>());
-        uut.setRightButtons(rightButtons(textButton, customButton));
-        assertThat(uut.getMenu().getItem(1).getTitle()).isEqualTo(textButton.text.get());
-    }
-
     @Test
     public void setComponent_addsComponentToTitleBar() {
         View component = new View(activity);
@@ -161,12 +92,4 @@ public class TitleBarTest extends BaseTest {
         uut.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
         verify(spy).setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
     }
-
-    private List<TitleBarButtonController> leftButton(Button leftButton) {
-        return Collections.singletonList(createButtonController(activity, uut, leftButton));
-    }
-
-    private List<TitleBarButtonController> rightButtons(Button... buttons) {
-        return CollectionUtils.map(Arrays.asList(buttons), button -> createButtonController(activity, uut, button));
-    }
 }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/TopBarButtonControllerTest.java

@@ -2,13 +2,12 @@ package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
 import android.graphics.Color;
-import android.graphics.Typeface;
 import android.view.MenuItem;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.TestUtils;
 import com.reactnativenavigation.mocks.ImageLoaderMock;
-import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
+import com.reactnativenavigation.mocks.TitleBarButtonCreatorMock;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Colour;
@@ -18,11 +17,10 @@ import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.utils.ButtonPresenter;
 import com.reactnativenavigation.viewcontrollers.button.IconResolver;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
+import com.reactnativenavigation.views.titlebar.TitleBar;
 
 import org.junit.Test;
 
-import androidx.appcompat.widget.Toolbar;
-
 import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.ArgumentMatchers.anyInt;
@@ -44,13 +42,13 @@ public class TopBarButtonControllerTest extends BaseTest {
         button = new Button();
         final Activity activity = newActivity();
 
-        TopBarButtonCreatorMock buttonCreatorMock = new TopBarButtonCreatorMock();
+        TitleBarButtonCreatorMock buttonCreatorMock = new TitleBarButtonCreatorMock();
         stackController = spy(TestUtils.newStackController(activity).build());
         stackController.getView().layout(0, 0, 1080, 1920);
         stackController.getTopBar().layout(0, 0, 1080, 200);
         getTitleBar().layout(0, 0, 1080, 200);
 
-        optionsPresenter = spy(new ButtonPresenter(getTitleBar(), button));
+        optionsPresenter = spy(new ButtonPresenter(button));
         uut = new TitleBarButtonController(activity, new IconResolver(activity, ImageLoaderMock.mock()), optionsPresenter, button, buttonCreatorMock, (buttonId) -> {});
 
         stackController.ensureViewIsCreated();
@@ -98,71 +96,10 @@ public class TopBarButtonControllerTest extends BaseTest {
         verify(optionsPresenter, times(0)).tint(any(), anyInt());
     }
 
-    @Test
-    public void fontFamily() {
-        setTextButton();
-        uut.addToMenu(getTitleBar(), 0);
-        verify(optionsPresenter, times(1)).setTypeFace(Typeface.MONOSPACE);
-    }
-
-    @Test
-    public void fontSize() {
-        setTextButton();
-        uut.addToMenu(getTitleBar(), 0);
-        verify(optionsPresenter, times(0)).setFontSize(getTitleBar().getMenu().getItem(0));
-
-        clearMenu();
-        button.fontSize = new Number(10);
-        uut.addToMenu(getTitleBar(), 0);
-        verify(optionsPresenter, times(1)).setFontSize(getTitleBar().getMenu().getItem(0));
-    }
-
-    @Test
-    public void textColor_enabled() {
-        setTextButton();
-        button.enabled = new Bool(false);
-        uut.addToMenu(getTitleBar(), 0);
-        dispatchPreDraw(getTitleBar());
-        verify(optionsPresenter, times(0)).setEnabledColor(any());
-
-        clearMenu();
-        button.enabled = new Bool(true);
-        button.color = new Colour(android.graphics.Color.RED);
-        uut.addToMenu(getTitleBar(), 0);
-        dispatchPreDraw(getTitleBar());
-        verify(optionsPresenter, times(1)).setEnabledColor(any());
-    }
-
-    private void clearMenu() {
-        getTitleBar().getMenu().clear();
-    }
-
-    @Test
-    public void textColor_disabled() {
-        setTextButton();
-        button.enabled = new Bool(false);
-        uut.addToMenu(getTitleBar(), 0);
-        dispatchPreDraw(getTitleBar());
-        verify(optionsPresenter, times(1)).setDisabledColor(any(), eq(Color.LTGRAY));
-
-        clearMenu();
-        button.disabledColor = new Colour(android.graphics.Color.BLACK);
-        uut.addToMenu(getTitleBar(), 0);
-        dispatchPreDraw(getTitleBar());
-        verify(optionsPresenter, times(1)).setDisabledColor(any(), eq(Color.BLACK));
-    }
-
-    private Toolbar getTitleBar() {
+    private TitleBar getTitleBar() {
         return stackController.getTopBar().getTitleBar();
     }
 
-    private void setTextButton() {
-        button.id = "btn1";
-        button.text = new Text("Button");
-        button.fontFamily = Typeface.MONOSPACE;
-        button.showAsAction = new Number(MenuItem.SHOW_AS_ACTION_ALWAYS);
-    }
-
     private void setIconButton(boolean enabled) {
         button.id = "btn1";
         button.icon = new Text("someIcon");

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/TopBarControllerTest.java

@@ -0,0 +1,144 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.parse.params.Button;
+import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.react.Constants;
+import com.reactnativenavigation.react.ReactView;
+import com.reactnativenavigation.viewcontrollers.topbar.TopBarController;
+import com.reactnativenavigation.views.StackLayout;
+
+import org.junit.Test;
+import org.mockito.Mockito;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+import static com.reactnativenavigation.utils.CollectionUtils.*;
+import static com.reactnativenavigation.utils.TitleBarHelper.createButtonController;
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+
+public class TopBarControllerTest extends BaseTest {
+    private TopBarController uut;
+    private Activity activity;
+    private Button leftButton;
+    private Button textButton1;
+    private Button textButton2;
+    private Button componentButton;
+
+    @Override
+    public void beforeEach() {
+        activity = newActivity();
+        uut = spy(new TopBarController());
+        StackLayout stack = Mockito.mock(StackLayout.class);
+        uut.createView(activity, stack);
+
+        createButtons();
+    }
+
+    @Test
+    public void setButton_setsTextButton() {
+        uut.applyRightButtons(rightButtons(textButton1));
+        uut.setLeftButtons(leftButton(leftButton));
+        assertThat(uut.getRightButton(0).getTitle().toString()).isEqualTo(textButton1.text.get());
+    }
+
+    @Test
+    public void setButton_setsCustomButton() {
+        uut.setLeftButtons(leftButton(leftButton));
+        uut.applyRightButtons(rightButtons(componentButton));
+        ReactView btnView = (ReactView) uut.getRightButton(0).getActionView();
+        assertThat(btnView.getComponentName()).isEqualTo(componentButton.component.name.get());
+    }
+
+    @Test
+    public void applyRightButtons_emptyButtonsListClearsRightButtons() {
+        uut.setLeftButtons(new ArrayList<>());
+        uut.applyRightButtons(rightButtons(componentButton, textButton1));
+        uut.setLeftButtons(new ArrayList<>());
+        uut.applyRightButtons(new ArrayList<>());
+        assertThat(uut.getRightButtonsCount()).isEqualTo(0);
+    }
+
+    @Test
+    public void applyRightButtons_previousButtonsAreCleared() {
+        uut.applyRightButtons(rightButtons(textButton1, componentButton));
+        assertThat(uut.getRightButtonsCount()).isEqualTo(2);
+
+        uut.applyRightButtons(rightButtons(textButton2));
+        assertThat(uut.getRightButtonsCount()).isEqualTo(1);
+    }
+
+    @Test
+    public void applyRightButtons_buttonsAreAddedInReverseOrderToMatchOrderOnIOs() {
+        uut.setLeftButtons(new ArrayList<>());
+        uut.applyRightButtons(rightButtons(textButton1, componentButton));
+        assertThat(uut.getRightButton(1).getTitle().toString()).isEqualTo(textButton1.text.get());
+    }
+
+    @Test
+    public void applyRightButtons_componentButtonIsReapplied() {
+        List<TitleBarButtonController> initialButtons = rightButtons(componentButton);
+        uut.applyRightButtons(initialButtons);
+        assertThat(uut.getRightButton(0).getItemId()).isEqualTo(componentButton.getIntId());
+
+        uut.applyRightButtons(rightButtons(textButton1));
+        assertThat(uut.getRightButton(0).getItemId()).isEqualTo(textButton1.getIntId());
+
+        uut.applyRightButtons(initialButtons);
+        assertThat(uut.getRightButton(0).getItemId()).isEqualTo(componentButton.getIntId());
+    }
+
+    @Test
+    public void mergeRightButtons_componentButtonIsNotAddedIfAlreadyAddedToMenu() {
+        List<TitleBarButtonController> initialButtons = rightButtons(componentButton);
+        uut.applyRightButtons(initialButtons);
+
+        uut.mergeRightButtons(initialButtons, Collections.EMPTY_LIST);
+
+    }
+
+    @Test
+    public void setLeftButtons_emptyButtonsListClearsLeftButton() {
+        uut.setLeftButtons(leftButton(leftButton));
+        uut.applyRightButtons(rightButtons(componentButton));
+        assertThat(uut.getLeftButton()).isNotNull();
+
+        uut.setLeftButtons(new ArrayList<>());
+        uut.applyRightButtons(rightButtons(textButton1));
+        assertThat(uut.getLeftButton()).isNull();
+    }
+
+    private void createButtons() {
+        leftButton = new Button();
+        leftButton.id = Constants.BACK_BUTTON_ID;
+
+        textButton1 = createTextButton("1");
+        textButton2 = createTextButton("2");
+
+        componentButton = new Button();
+        componentButton.id = "customBtn";
+        componentButton.component.name = new Text("com.rnn.customBtn");
+        componentButton.component.componentId = new Text("component4");
+    }
+
+    private Button createTextButton(String id) {
+        Button button = new Button();
+        button.id = id;
+        button.text = new Text("txt" + id);
+        return button;
+    }
+
+    private List<TitleBarButtonController> leftButton(Button leftButton) {
+        return Collections.singletonList(createButtonController(activity, leftButton));
+    }
+
+    private List<TitleBarButtonController> rightButtons(Button... buttons) {
+        return map(Arrays.asList(buttons), button -> createButtonController(activity, button));
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/StackControllerTest.java

@@ -14,7 +14,7 @@ import com.reactnativenavigation.mocks.ImageLoaderMock;
 import com.reactnativenavigation.mocks.SimpleViewController;
 import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarBackgroundViewCreatorMock;
-import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
+import com.reactnativenavigation.mocks.TitleBarButtonCreatorMock;
 import com.reactnativenavigation.parse.AnimationOptions;
 import com.reactnativenavigation.parse.NestedAnimationsOptions;
 import com.reactnativenavigation.parse.Options;
@@ -102,7 +102,7 @@ public class StackControllerTest extends BaseTest {
                     activity,
                     new TitleBarReactViewCreatorMock(),
                     new TopBarBackgroundViewCreatorMock(),
-                    new TopBarButtonCreatorMock(),
+                    new TitleBarButtonCreatorMock(),
                     new IconResolver(activity, ImageLoaderMock.mock()),
                     new RenderChecker(),
                     new Options()

lib/src/interfaces/Options.ts

@@ -339,6 +339,14 @@ export interface OptionsTopBarButton {
      * Properties to pass down to the component
      */
     passProps?: object;
+    /**
+     * (Android only) component width
+     */
+    width?: number;
+    /**
+     * (Android only) component height
+     */
+    height?: number;
   };
   /**
    * (iOS only) Set the button as an iOS system icon

playground/src/screens/OptionsScreen.js

@@ -40,7 +40,7 @@ class Options extends Component {
         <Button label='Set React Title View' testID={SET_REACT_TITLE_VIEW} onPress={this.setReactTitleView} />
         <Button label='Show Yellow Box' testID={SHOW_YELLOW_BOX_BTN} onPress={() => console.warn('Yellow Box')} />
         <Button label='StatusBar' onPress={this.statusBarScreen} />
-        <Button label='Buttons Screen' testID={GOTO_BUTTONS_SCREEN} onPress={this.goToButtonsScreen} />
+        <Button label='Buttons Screen' testID={GOTO_BUTTONS_SCREEN} onPress={this.pushButtonsScreen} />
       </Root>
     );
   }
@@ -101,7 +101,13 @@ class Options extends Component {
 
   statusBarScreen = () => Navigation.showModal(Screens.StatusBar);
 
-  goToButtonsScreen = () => Navigation.push(this, Screens.Buttons);
+  pushButtonsScreen = () => Navigation.push(this, Screens.Buttons, {
+    animations: {
+      push: {
+        waitForRender: true
+      }
+    }
+  });
 }
 
 module.exports = Options;

playground/src/screens/RoundedButton.js

@@ -39,7 +39,8 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
     flexDirection: 'column',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    padding: 4
   },
   button: {
     width: 40,

playground/src/testIDs.js

@@ -50,6 +50,7 @@ module.exports = {
   SHOW_TABS_BTN: 'SHOW_TABS_BTN',
   HIDE_TABS_PUSH_BTN: 'HIDE_TABS_PUSH_BTN',
   ROUND_BUTTON: 'ROUND_BUTTON',
+  ROUND_BUTTON_2: 'ROUND_BUTTON_2',
   BUTTON_ONE: 'BUTTON_ONE',
   LEFT_BUTTON: 'LEFT_BUTTON',
   HIDE_TOPBAR_DEFAULT_OPTIONS: 'HIDE_TOPBAR_DEFAULT_OPTIONS',
@@ -92,6 +93,7 @@ module.exports = {
   NAVIGATION_SCREEN: `NAVIGATION_SCREEN`,
 
   // Buttons
+  ADD_BUTTON: 'ADD_BUTTON',
   TAB_BASED_APP_BUTTON: `TAB_BASED_APP_BUTTON`,
   TAB_BASED_APP_SIDE_BUTTON: `TAB_BASED_APP_SIDE_BUTTON`,
   PUSH_STATIC_LIFECYCLE_BUTTON: `PUSH_STATIC_LIFECYCLE_BUTTON`,