Top bar buttons android (#2876)

* TopBar custom buttons initial commit

* f

* Consolidate TopBarButtonController and TopBarButton

* Move Toolbar related stuff to TitleBar

* TitleBarTest

* More tests

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

@@ -15,6 +15,7 @@ import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalCompo
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentViewController;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsController;
 import com.reactnativenavigation.views.ComponentViewCreator;
+import com.reactnativenavigation.views.TopBarButtonCreator;
 import com.reactnativenavigation.views.TopTabsLayoutCreator;
 
 import java.util.ArrayList;
@@ -117,7 +118,7 @@ public class LayoutFactory {
     }
 
 	private ViewController createStack(LayoutNode node) {
-        StackController stackController = new StackController(activity, node.id, getOptions(node));
+        StackController stackController = new StackController(activity, new TopBarButtonCreator(reactInstanceManager), node.id, getOptions(node));
         addChildrenToStack(node.children, stackController);
         return stackController;
 	}

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

@@ -55,8 +55,8 @@ public class TopBarOptions implements DEFAULT_VALUES {
     public Bool animate = new NullBool();
     public Bool hideOnScroll = new NullBool();
     public Bool drawBehind = new NullBool();
-    public ArrayList<Button> leftButtons;
-    public ArrayList<Button> rightButtons;
+    @Nullable public ArrayList<Button> leftButtons;
+    @Nullable public ArrayList<Button> rightButtons;
 
     void mergeWith(final TopBarOptions other) {
         if (other.testId.hasValue()) {

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

@@ -24,6 +24,7 @@ public class Button {
 	private Text buttonFontWeight = new NullText();
 	public Text icon = new NullText();
 	public Text testId = new NullText();
+    public Text component = new NullText();
 
 	private static Button parseJson(JSONObject json)  {
 		Button button = new Button();
@@ -36,6 +37,7 @@ public class Button {
 		button.buttonFontSize = json.optInt("buttonFontSize", NO_INT_VALUE);
 		button.buttonFontWeight = TextParser.parse(json, "buttonFontWeight");
         button.testId = TextParser.parse(json, "testID");
+        button.component = TextParser.parse(json, "component");
 
 		if (json.has("icon")) {
 			button.icon = TextParser.parse(json.optJSONObject("icon"), "uri");
@@ -60,6 +62,14 @@ public class Button {
 		return buttons;
 	}
 
+    public boolean hasComponent() {
+        return component.hasValue();
+    }
+
+    public boolean hasIcon() {
+        return icon.hasValue();
+    }
+
 	private static int parseShowAsAction(JSONObject json) {
 	    final Text showAsAction = TextParser.parse(json, "showAsAction");
 		if (!showAsAction.hasValue()) {

lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java

@@ -3,8 +3,8 @@ package com.reactnativenavigation.react;
 import android.annotation.SuppressLint;
 import android.content.Context;
 import android.os.Bundle;
+import android.support.annotation.RestrictTo;
 import android.view.MotionEvent;
-import android.view.View;
 
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactRootView;
@@ -49,7 +49,7 @@ public class ReactView extends ReactRootView implements IReactView {
 	}
 
 	@Override
-	public View asView() {
+	public ReactView asView() {
 		return this;
 	}
 
@@ -87,4 +87,9 @@ public class ReactView extends ReactRootView implements IReactView {
         ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
         return reactContext == null ? null : reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
     }
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    public String getComponentName() {
+        return componentName;
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/react/TopBarReactButtonView.java

@@ -0,0 +1,22 @@
+package com.reactnativenavigation.react;
+
+import android.annotation.SuppressLint;
+import android.content.Context;
+
+import com.facebook.react.ReactInstanceManager;
+
+@SuppressLint("ViewConstructor")
+public class TopBarReactButtonView extends ReactView {
+
+    public TopBarReactButtonView(Context context, ReactInstanceManager reactInstanceManager, String componentId, String componentName) {
+        super(context, reactInstanceManager, componentId, componentName);
+    }
+
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        super.onMeasure(
+                getChildCount() > 0 ? MeasureSpec.makeMeasureSpec(getChildAt(0).getWidth(), MeasureSpec.EXACTLY) : widthMeasureSpec,
+                heightMeasureSpec
+        );
+    }
+}

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

@@ -0,0 +1,16 @@
+package com.reactnativenavigation.utils;
+
+import android.graphics.drawable.Drawable;
+import android.support.annotation.NonNull;
+
+public class ImageLoadingListenerAdapter implements ImageLoader.ImageLoadingListener {
+    @Override
+    public void onComplete(@NonNull Drawable drawable) {
+
+    }
+
+    @Override
+    public void onError(Throwable error) {
+        error.printStackTrace();
+    }
+}

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

@@ -25,20 +25,14 @@ public class StackController extends ParentController <StackLayout> {
     private static final NoOpPromise NO_OP = new NoOpPromise();
     private final IdStack<ViewController> stack = new IdStack<>();
     private final NavigationAnimator animator;
+    private ReactViewCreator topBarButtonCreator;
 
-    public StackController(final Activity activity, String id, Options initialOptions) {
+    public StackController(final Activity activity, ReactViewCreator topBarButtonCreator, String id, Options initialOptions) {
         super(activity, id, initialOptions);
         animator = new NavigationAnimator(activity);
+        this.topBarButtonCreator = topBarButtonCreator;
     }
 
-    @RestrictTo(RestrictTo.Scope.TESTS)
-    TopBar getTopBar() {
-        return getView().getTopBar();
-    }
-
-    @RestrictTo(RestrictTo.Scope.TESTS)
-    StackLayout getStackLayout() {return getView();}
-
     public void applyOptions(Options options) {
         super.applyOptions(options);
         getView().applyOptions(options);
@@ -208,7 +202,7 @@ public class StackController extends ParentController <StackLayout> {
     @NonNull
     @Override
     protected StackLayout createView() {
-        return new StackLayout(getActivity(), this::sendOnNavigationButtonPressed);
+        return new StackLayout(getActivity(), topBarButtonCreator, this::sendOnNavigationButtonPressed);
     }
 
 	@NonNull
@@ -226,4 +220,12 @@ public class StackController extends ParentController <StackLayout> {
     public void clearTopTabs() {
         getView().clearTopTabs();
     }
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    TopBar getTopBar() {
+        return getView().getTopBar();
+    }
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    StackLayout getStackLayout() {return getView();}
 }

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

@@ -0,0 +1,192 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+import android.graphics.Color;
+import android.graphics.drawable.Drawable;
+import android.support.annotation.NonNull;
+import android.support.v7.widget.ActionMenuView;
+import android.support.v7.widget.Toolbar;
+import android.text.Spannable;
+import android.text.SpannableString;
+import android.text.style.AbsoluteSizeSpan;
+import android.util.Log;
+import android.view.MenuItem;
+import android.view.View;
+import android.widget.ImageButton;
+import android.widget.TextView;
+
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.params.Button;
+import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.react.TopBarReactButtonView;
+import com.reactnativenavigation.utils.ArrayUtils;
+import com.reactnativenavigation.utils.ImageLoader;
+import com.reactnativenavigation.utils.ImageLoadingListenerAdapter;
+import com.reactnativenavigation.utils.UiUtils;
+import com.reactnativenavigation.utils.ViewUtils;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class TopBarButtonController extends ViewController<TopBarReactButtonView> implements MenuItem.OnMenuItemClickListener {
+    public interface OnClickListener {
+        void onPress(String buttonId);
+    }
+
+    private final Button button;
+    private final ReactViewCreator viewCreator;
+    private TopBarButtonController.OnClickListener onPressListener;
+    private Drawable icon;
+
+    public TopBarButtonController(Activity activity, Button button, ReactViewCreator viewCreator, TopBarButtonController.OnClickListener onClickListener) {
+        super(activity, button.id, new Options());
+        this.button = button;
+        this.viewCreator = viewCreator;
+        this.onPressListener = onClickListener;
+    }
+
+    @Override
+    public void onViewAppeared() {
+        view.sendComponentStart();
+    }
+
+    @Override
+    public void onViewDisappear() {
+        view.sendComponentStop();
+    }
+
+    @Override
+    public void sendOnNavigationButtonPressed(String buttonId) {
+        getView().sendOnNavigationButtonPressed(buttonId);
+    }
+
+    @NonNull
+    @Override
+    protected TopBarReactButtonView createView() {
+        view = (TopBarReactButtonView) viewCreator.create(getActivity(), getId(), button.component.get());
+        return (TopBarReactButtonView) view.asView();
+    }
+
+    @Override
+    public boolean onMenuItemClick(MenuItem item) {
+        onPressListener.onPress(button.id);
+        return true;
+    }
+
+    public void applyNavigationIcon(Toolbar toolbar) {
+        if (!button.hasIcon()) {
+            Log.w("RNN", "Left button needs to have an icon");
+            return;
+        }
+
+        new ImageLoader().loadIcon(toolbar.getContext(), button.icon.get(), new ImageLoader.ImageLoadingListener() {
+            @Override
+            public void onComplete(@NonNull Drawable drawable) {
+                icon = drawable;
+                setIconColor(drawable);
+                toolbar.setNavigationOnClickListener(view -> onPressListener.onPress(button.id));
+                toolbar.setNavigationIcon(icon);
+                setLeftButtonTestId(toolbar);
+            }
+
+            @Override
+            public void onError(Throwable error) {
+                error.printStackTrace();
+            }
+        });
+    }
+
+    private void setLeftButtonTestId(Toolbar toolbar) {
+        if (!button.testId.hasValue()) return;
+        toolbar.post(() -> {
+            ImageButton leftButton = ViewUtils.findChildByClass(toolbar, ImageButton.class);
+            if (leftButton != null) {
+                leftButton.setTag(button.testId.get());
+            }
+        });
+    }
+
+    public void addToMenu(Toolbar toolbar) {
+        MenuItem menuItem = toolbar.getMenu().add(button.title.get(""));
+        menuItem.setShowAsAction(button.showAsAction);
+        menuItem.setEnabled(button.enabled.isTrueOrUndefined());
+        menuItem.setOnMenuItemClickListener(this);
+        if (button.hasComponent()) {
+            menuItem.setActionView(getView());
+        } else {
+            if (button.hasIcon()) {
+                loadIcon(new ImageLoadingListenerAdapter() {
+                    @Override
+                    public void onComplete(@NonNull Drawable icon) {
+                        TopBarButtonController.this.icon = icon;
+                        setIconColor(icon);
+                        menuItem.setIcon(icon);
+                    }
+                });
+            } else {
+                setTextColor(toolbar);
+                setFontSize(menuItem);
+            }
+        }
+        setTestId(toolbar, button.testId);
+    }
+
+    private void loadIcon(ImageLoader.ImageLoadingListener callbacks) {
+        new ImageLoader().loadIcon(getActivity(), button.icon.get(), callbacks);
+    }
+
+    private void setIconColor(Drawable icon) {
+        if (button.enabled.isTrueOrUndefined()) {
+            UiUtils.tintDrawable(icon, button.buttonColor);
+            return;
+        }
+        if (button.disableIconTint.isTrue()) {
+            UiUtils.tintDrawable(icon, button.buttonColor);
+        } else {
+            UiUtils.tintDrawable(icon, Color.LTGRAY);
+        }
+    }
+
+    private void setTextColor(Toolbar toolbar) {
+        UiUtils.runOnPreDrawOnce(toolbar, () -> {
+            ArrayList<View> outViews = findActualTextViewInMenuByText(toolbar);
+            setTextColorForFoundButtonViews(outViews);
+        });
+    }
+
+    @NonNull
+    private ArrayList<View> findActualTextViewInMenuByText(Toolbar toolbar) {
+        ArrayList<View> outViews = new ArrayList<>();
+        toolbar.findViewsWithText(outViews, button.title.get(), View.FIND_VIEWS_WITH_TEXT);
+        return outViews;
+    }
+
+    private void setTextColorForFoundButtonViews(ArrayList<View> buttons) {
+        for (View button : buttons) {
+            ((TextView) button).setTextColor(this.button.buttonColor);
+        }
+    }
+
+    private void setFontSize(MenuItem menuItem) {
+        SpannableString spanString = new SpannableString(button.title.get());
+        spanString.setSpan(new AbsoluteSizeSpan(button.buttonFontSize, true), 0, button.title.get().length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
+        menuItem.setTitleCondensed(spanString);
+    }
+
+    private void setTestId(Toolbar toolbar, Text testId) {
+        if (!testId.hasValue()) return;
+        UiUtils.runOnPreDrawOnce(toolbar, () -> {
+            ActionMenuView buttonsLayout = ViewUtils.findChildByClass(toolbar, ActionMenuView.class);
+            List<TextView> buttons = ViewUtils.findChildrenByClass(buttonsLayout, TextView.class);
+            for (TextView view : buttons) {
+                if (button.title.hasValue() && button.title.get().equals(view.getText().toString())) {
+                    view.setTag(testId.get());
+                } else if (button.icon.hasValue() && ArrayUtils.contains(view.getCompoundDrawables(), icon)) {
+                    view.setTag(testId.get());
+                }
+            }
+        });
+    }
+
+
+}

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

@@ -113,7 +113,9 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
                 throw new RuntimeException("Tried to create view after it has already been destroyed");
             }
             view = createView();
-            view.setId(CompatUtils.generateViewId());
+            if (view.getId() < 0) {
+                view.setId(CompatUtils.generateViewId());
+            }
             view.getViewTreeObserver().addOnGlobalLayoutListener(this);
         }
         return view;

lib/android/app/src/main/java/com/reactnativenavigation/views/ComponentLayout.java

@@ -11,13 +11,14 @@ import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.ComponentOptionsPresenter;
 import com.reactnativenavigation.viewcontrollers.IReactView;
+import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
 import com.reactnativenavigation.views.touch.OverlayTouchDelegate;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 import static android.widget.RelativeLayout.BELOW;
 
 @SuppressLint("ViewConstructor")
-public class ComponentLayout extends FrameLayout implements ReactComponent, TitleBarButton.OnClickListener {
+public class ComponentLayout extends FrameLayout implements ReactComponent, TopBarButtonController.OnClickListener {
 
     private IReactView reactView;
     private final OverlayTouchDelegate touchDelegate;

lib/android/app/src/main/java/com/reactnativenavigation/views/StackLayout.java

@@ -9,6 +9,8 @@ import android.widget.RelativeLayout;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.OptionsPresenter;
 import com.reactnativenavigation.utils.CompatUtils;
+import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
@@ -17,16 +19,12 @@ import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
 public class StackLayout extends RelativeLayout {
     private TopBar topBar;
 
-    public StackLayout(Context context, TitleBarButton.OnClickListener topBarButtonClickListener) {
+    public StackLayout(Context context, ReactViewCreator topBarButtonCreator, TopBarButtonController.OnClickListener topBarButtonClickListener) {
         super(context);
-        topBar = new TopBar(context, topBarButtonClickListener, this);
+        topBar = new TopBar(context, topBarButtonCreator, topBarButtonClickListener, this);
         topBar.setId(CompatUtils.generateViewId());
-        createLayout();
-        setContentDescription("StackLayout");
-    }
-
-    void createLayout() {
         addView(topBar, MATCH_PARENT, WRAP_CONTENT);
+        setContentDescription("StackLayout");
     }
 
     public void applyOptions(Options options) {

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

@@ -0,0 +1,140 @@
+package com.reactnativenavigation.views;
+
+import android.annotation.SuppressLint;
+import android.app.Activity;
+import android.content.Context;
+import android.graphics.Typeface;
+import android.support.annotation.Nullable;
+import android.support.v7.widget.Toolbar;
+import android.util.Log;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.TextView;
+
+import com.reactnativenavigation.parse.params.Button;
+import com.reactnativenavigation.parse.params.Color;
+import com.reactnativenavigation.parse.params.Fraction;
+import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
+
+import java.util.ArrayList;
+import java.util.List;
+
+@SuppressLint("ViewConstructor")
+public class TitleBar extends Toolbar {
+    private final ReactViewCreator buttonCreator;
+    private final TopBarButtonController.OnClickListener onClickListener;
+    private final List<TopBarButtonController> rightButtonControllers = new ArrayList<>();
+    private TopBarButtonController leftButtonController;
+
+    public TitleBar(Context context, ReactViewCreator buttonCreator, TopBarButtonController.OnClickListener onClickListener) {
+        super(context);
+        this.buttonCreator = buttonCreator;
+        this.onClickListener = onClickListener;
+        getMenu();
+        setContentDescription("titleBar");
+    }
+
+    public String getTitle() {
+        return super.getTitle() == null ? "" : (String) super.getTitle();
+    }
+
+    void setTitleTextColor(Color color) {
+        if (color.hasValue()) setTitleTextColor(color.get());
+    }
+
+    void setBackgroundColor(Color color) {
+        if (color.hasValue()) setBackgroundColor(color.get());
+    }
+
+    void setTitleFontSize(Fraction size) {
+        TextView titleTextView = getTitleTextView();
+        if (titleTextView != null && size.hasValue()) {
+            titleTextView.setTextSize(size.get());
+        }
+    }
+
+    void setTitleTypeface(Typeface typeface) {
+        TextView titleTextView = getTitleTextView();
+        if (titleTextView != null) {
+            titleTextView.setTypeface(typeface);
+        }
+    }
+
+    TextView getTitleTextView() {
+        return findTextView(this);
+    }
+
+    public void clear() {
+        setTitle(null);
+        clearRightButtons();
+        clearLeftButton();
+    }
+
+    private void clearLeftButton() {
+        setNavigationIcon(null);
+        if (leftButtonController != null) {
+            leftButtonController.destroy();
+            leftButtonController = null;
+        }
+    }
+
+    private void clearRightButtons() {
+        for (TopBarButtonController button : rightButtonControllers) {
+            button.destroy();
+        }
+        rightButtonControllers.clear();
+        getMenu().clear();
+    }
+
+    public void setButtons(List<Button> leftButtons, List<Button> rightButtons) {
+        setLeftButtons(leftButtons);
+        setRightButtons(rightButtons);
+    }
+
+    private void setLeftButtons(List<Button> leftButtons) {
+        if (leftButtons == null) return;
+        if (leftButtons.isEmpty()) {
+            clearLeftButton();
+            return;
+        }
+        if (leftButtons.size() > 1) {
+            Log.w("RNN", "Use a custom TopBar to have more than one left button");
+        }
+        setLeftButton(leftButtons.get(0));
+    }
+
+    private void setLeftButton(final Button button) {
+        TopBarButtonController controller = createButtonController(button);
+        leftButtonController = controller;
+        controller.applyNavigationIcon(this);
+    }
+
+    public void setRightButtons(List<Button> rightButtons) {
+        if (rightButtons == null) return;
+        clearRightButtons();
+        for (Button button : rightButtons) {
+            TopBarButtonController controller = createButtonController(button);
+            rightButtonControllers.add(controller);
+            controller.addToMenu(this);
+        }
+    }
+
+    public TopBarButtonController createButtonController(Button button) {
+        return new TopBarButtonController((Activity) getContext(), button, buttonCreator, onClickListener);
+    }
+
+    @Nullable
+    private TextView findTextView(ViewGroup root) {
+        for (int i = 0; i < root.getChildCount(); i++) {
+            View view = root.getChildAt(i);
+            if (view instanceof ViewGroup) {
+                view = findTextView((ViewGroup) view);
+            }
+            if (view instanceof TextView) {
+                return (TextView) view;
+            }
+        }
+        return null;
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/TitleBarButton.java

@@ -1,176 +0,0 @@
-package com.reactnativenavigation.views;
-
-import android.content.Context;
-import android.graphics.Color;
-import android.graphics.drawable.Drawable;
-import android.support.annotation.NonNull;
-import android.support.v7.widget.ActionMenuView;
-import android.support.v7.widget.Toolbar;
-import android.text.Spannable;
-import android.text.SpannableString;
-import android.text.style.AbsoluteSizeSpan;
-import android.util.Log;
-import android.view.Menu;
-import android.view.MenuItem;
-import android.view.View;
-import android.widget.ImageButton;
-import android.widget.TextView;
-
-import com.reactnativenavigation.parse.params.Button;
-import com.reactnativenavigation.parse.params.Text;
-import com.reactnativenavigation.utils.ArrayUtils;
-import com.reactnativenavigation.utils.ImageLoader;
-import com.reactnativenavigation.utils.UiUtils;
-import com.reactnativenavigation.utils.ViewUtils;
-
-import java.util.ArrayList;
-import java.util.List;
-
-public class TitleBarButton implements MenuItem.OnMenuItemClickListener {
-    public interface OnClickListener {
-        void onPress(String buttonId);
-    }
-
-	private Toolbar toolbar;
-	private final Button button;
-	private Drawable icon;
-    private OnClickListener onPressListener;
-
-    TitleBarButton(Toolbar toolbar, Button button, OnClickListener onPressListener) {
-        this.onPressListener = onPressListener;
-		this.toolbar = toolbar;
-		this.button = button;
-	}
-
-	void addToMenu(Context context, final Menu menu) {
-		MenuItem menuItem = menu.add(button.title.get(""));
-		menuItem.setShowAsAction(button.showAsAction);
-		menuItem.setEnabled(button.enabled.isTrueOrUndefined());
-		menuItem.setOnMenuItemClickListener(this);
-
-		if (hasIcon()) {
-			applyIcon(context, menuItem);
-		} else {
-			setTextColor();
-			setFontSize(menuItem);
-		}
-
-        setTestId(button.testId);
-    }
-
-    void applyNavigationIcon(Context context) {
-		if (!hasIcon()) {
-			Log.w("RNN", "Left button needs to have an icon");
-			return;
-		}
-
-		new ImageLoader().loadIcon(context, button.icon.get(), new ImageLoader.ImageLoadingListener() {
-			@Override
-			public void onComplete(@NonNull Drawable drawable) {
-				icon = drawable;
-                setIconColor();
-                setNavigationClickListener();
-                toolbar.setNavigationIcon(icon);
-                setLeftButtonTestId();
-            }
-
-			@Override
-			public void onError(Throwable error) {
-				error.printStackTrace();
-			}
-		});
-	}
-
-    private void setLeftButtonTestId() {
-        if (!button.testId.hasValue()) return;
-        toolbar.post(() -> {
-            ImageButton leftButton = ViewUtils.findChildByClass(toolbar, ImageButton.class);
-            if (leftButton != null) {
-                leftButton.setTag(button.testId.get());
-            }
-        });
-    }
-
-    private void applyIcon(Context context, final MenuItem menuItem) {
-        new ImageLoader().loadIcon(context, button.icon.get(), new ImageLoader.ImageLoadingListener() {
-			@Override
-			public void onComplete(@NonNull Drawable drawable) {
-				icon = drawable;
-                menuItem.setIcon(icon);
-                setIconColor();
-			}
-
-			@Override
-			public void onError(Throwable error) {
-				error.printStackTrace();
-			}
-		});
-	}
-
-	private void setIconColor() {
-		if (button.enabled.isTrueOrUndefined()) {
-			UiUtils.tintDrawable(icon, button.buttonColor);
-			return;
-		}
-		if (button.disableIconTint.isTrue()) {
-			UiUtils.tintDrawable(icon, button.buttonColor);
-		} else {
-			UiUtils.tintDrawable(icon, Color.LTGRAY);
-		}
-	}
-
-	private void setTextColor() {
-		UiUtils.runOnPreDrawOnce(this.toolbar, () -> {
-            ArrayList<View> outViews = findActualTextViewInMenuByText();
-            setTextColorForFoundButtonViews(outViews);
-        });
-	}
-
-	private void setFontSize(MenuItem menuItem) {
-		SpannableString spanString = new SpannableString(button.title.get());
-		spanString.setSpan(new AbsoluteSizeSpan(button.buttonFontSize, true), 0, button.title.get().length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
-		menuItem.setTitleCondensed(spanString);
-	}
-
-	private void setNavigationClickListener() {
-		toolbar.setNavigationOnClickListener(view -> onPressListener.onPress(button.id));
-	}
-
-	@Override
-	public boolean onMenuItemClick(MenuItem menuItem) {
-		onPressListener.onPress(button.id);
-		return true;
-	}
-
-	private void setTextColorForFoundButtonViews(ArrayList<View> buttons) {
-		for (View button : buttons) {
-			((TextView) button).setTextColor(this.button.buttonColor);
-		}
-	}
-
-	private boolean hasIcon() {
-		return button.icon.hasValue();
-	}
-
-    private void setTestId(Text testId) {
-        if (!testId.hasValue()) return;
-        UiUtils.runOnPreDrawOnce(this.toolbar, () -> {
-            ActionMenuView buttonsLayout = ViewUtils.findChildByClass(toolbar, ActionMenuView.class);
-            List<TextView> buttons = ViewUtils.findChildrenByClass(buttonsLayout, TextView.class);
-            for (TextView view : buttons) {
-                if (button.title.hasValue() && button.title.get().equals(view.getText().toString())) {
-                    view.setTag(testId.get());
-                } else if (button.icon.hasValue() && ArrayUtils.contains(view.getCompoundDrawables(), icon)) {
-                    view.setTag(testId.get());
-                }
-            }
-        });
-    }
-
-    @NonNull
-    private ArrayList<View> findActualTextViewInMenuByText() {
-        ArrayList<View> outViews = new ArrayList<>();
-        this.toolbar.findViewsWithText(outViews, button.title.get(), View.FIND_VIEWS_WITH_TEXT);
-        return outViews;
-    }
-}

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

@@ -3,15 +3,12 @@ package com.reactnativenavigation.views;
 import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.Typeface;
-import android.support.annotation.Nullable;
+import android.support.annotation.RestrictTo;
 import android.support.annotation.VisibleForTesting;
 import android.support.design.widget.AppBarLayout;
 import android.support.v4.view.ViewPager;
 import android.support.v7.widget.Toolbar;
-import android.util.Log;
-import android.view.Menu;
 import android.view.View;
-import android.view.ViewGroup;
 import android.widget.TextView;
 
 import com.reactnativenavigation.anim.TopBarAnimator;
@@ -22,41 +19,43 @@ import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.Fraction;
 import com.reactnativenavigation.parse.params.Number;
+import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
 
-import java.util.ArrayList;
+import java.util.List;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
 
 @SuppressLint("ViewConstructor")
 public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAwareView {
-    private final Toolbar titleBar;
-    private TitleBarButton.OnClickListener onClickListener;
+    private final TitleBar titleBar;
     private final TopBarCollapseBehavior collapsingBehavior;
     private TopBarAnimator animator;
     private TopTabs topTabs;
     private StackLayout parentView;
 
-    public TopBar(final Context context, TitleBarButton.OnClickListener onClickListener, StackLayout parentView) {
+    public TopBar(final Context context, ReactViewCreator buttonCreator, TopBarButtonController.OnClickListener onClickListener, StackLayout parentView) {
         super(context);
-        this.onClickListener = onClickListener;
         collapsingBehavior = new TopBarCollapseBehavior(this);
-        titleBar = new Toolbar(context);
-        titleBar.getMenu();
         topTabs = new TopTabs(getContext());
-        this.animator = new TopBarAnimator(this);
+        animator = new TopBarAnimator(this);
         this.parentView = parentView;
+        titleBar = createTitleBar(context, buttonCreator, onClickListener);
         addView(titleBar);
-        titleBar.setContentDescription("titleBar");
         setContentDescription("TopBar");
     }
 
+    protected TitleBar createTitleBar(Context context, ReactViewCreator buttonCreator, TopBarButtonController.OnClickListener onClickListener) {
+        return new TitleBar(context, buttonCreator, onClickListener);
+    }
+
     public void setTitle(String title) {
         titleBar.setTitle(title);
     }
 
     public String getTitle() {
-        return titleBar.getTitle() != null ? titleBar.getTitle().toString() : "";
+        return titleBar.getTitle();
     }
 
     public void setTestId(String testId) {
@@ -64,21 +63,15 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
     }
 
     public void setTitleTextColor(Color color) {
-        if (color.hasValue()) titleBar.setTitleTextColor(color.get());
+        titleBar.setTitleTextColor(color);
     }
 
     public void setTitleFontSize(Fraction size) {
-        TextView titleTextView = getTitleTextView();
-        if (titleTextView != null && size.hasValue()) {
-            titleTextView.setTextSize(size.get());
-        }
+        titleBar.setTitleFontSize(size);
     }
 
     public void setTitleTypeface(Typeface typeface) {
-        TextView titleTextView = getTitleTextView();
-        if (titleTextView != null) {
-            titleTextView.setTypeface(typeface);
-        }
+        titleBar.setTitleTypeface(typeface);
     }
 
     public void setTopTabFontFamily(int tabIndex, Typeface fontFamily) {
@@ -97,66 +90,17 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
         topTabs.setVisibility(this, visible);
     }
 
-    public void setButtons(ArrayList<Button> leftButtons, ArrayList<Button> rightButtons) {
-        setLeftButtons(leftButtons);
-        setRightButtons(rightButtons);
+    public void setButtons(List<Button> leftButtons, List<Button> rightButtons) {
+        titleBar.setButtons(leftButtons, rightButtons);
     }
 
+    @RestrictTo(RestrictTo.Scope.TESTS)
     public TextView getTitleTextView() {
-        return findTextView(titleBar);
+        return titleBar.getTitleTextView();
     }
 
     public void setBackgroundColor(Color color) {
-        if (color.hasValue()) titleBar.setBackgroundColor(color.get());
-    }
-
-    @Nullable
-    private TextView findTextView(ViewGroup root) {
-        for (int i = 0; i < root.getChildCount(); i++) {
-            View view = root.getChildAt(i);
-            if (view instanceof ViewGroup) {
-                view = findTextView((ViewGroup) view);
-            }
-            if (view instanceof TextView) {
-                return (TextView) view;
-            }
-        }
-        return null;
-    }
-
-    private void setLeftButtons(ArrayList<Button> leftButtons) {
-        if (leftButtons == null) return;
-        if (leftButtons.isEmpty()) {
-            titleBar.setNavigationIcon(null);
-            return;
-        }
-
-        if (leftButtons.size() > 1) {
-            Log.w("RNN", "Use a custom TopBar to have more than one left button");
-        }
-
-        Button leftButton = leftButtons.get(0);
-        setLeftButton(leftButton);
-    }
-
-    private void setLeftButton(final Button button) {
-        TitleBarButton leftBarButton = new TitleBarButton(this.titleBar, button, onClickListener);
-        leftBarButton.applyNavigationIcon(getContext());
-    }
-
-    private void setRightButtons(ArrayList<Button> rightButtons) {
-        if (rightButtons == null || rightButtons.size() == 0) {
-            return;
-        }
-
-        Menu menu = getTitleBar().getMenu();
-        menu.clear();
-
-        for (int i = 0; i < rightButtons.size(); i++) {
-            Button button = rightButtons.get(i);
-            TitleBarButton titleBarButton = new TitleBarButton(this.titleBar, button, onClickListener);
-            titleBarButton.addToMenu(getContext(), menu);
-        }
+        titleBar.setBackgroundColor(color);
     }
 
     public Toolbar getTitleBar() {
@@ -210,16 +154,14 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
     }
 
     public void clear() {
-        titleBar.setTitle(null);
-        titleBar.setNavigationIcon(null);
-        titleBar.getMenu().clear();
+        titleBar.clear();
     }
 
     public void clearTopTabs() {
         topTabs.clear(this);
     }
 
-    @VisibleForTesting()
+    @VisibleForTesting
     public TopTabs getTopTabs() {
         return topTabs;
     }

lib/android/app/src/main/java/com/reactnativenavigation/views/TopBarButtonCreator.java

@@ -0,0 +1,21 @@
+package com.reactnativenavigation.views;
+
+import android.app.Activity;
+
+import com.facebook.react.ReactInstanceManager;
+import com.reactnativenavigation.react.TopBarReactButtonView;
+import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+
+public class TopBarButtonCreator implements ReactViewCreator {
+
+    private ReactInstanceManager instanceManager;
+
+    public TopBarButtonCreator(ReactInstanceManager instanceManager) {
+        this.instanceManager = instanceManager;
+	}
+
+	@Override
+	public TopBarReactButtonView create(Activity activity, String componentId, String componentName) {
+        return new TopBarReactButtonView(activity, instanceManager, componentId, componentName);
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/TopTabsViewPager.java

@@ -9,6 +9,7 @@ import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.viewcontrollers.IReactView;
+import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsAdapter;
 
@@ -18,7 +19,7 @@ import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 import static android.widget.RelativeLayout.BELOW;
 
 @SuppressLint("ViewConstructor")
-public class TopTabsViewPager extends ViewPager implements Component, TitleBarButton.OnClickListener {
+public class TopTabsViewPager extends ViewPager implements Component, TopBarButtonController.OnClickListener {
 
     private static final int OFFSCREEN_PAGE_LIMIT = 99;
     private List<ViewController> tabs;

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TestComponentLayout.java

@@ -7,10 +7,10 @@ import android.view.View;
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.viewcontrollers.IReactView;
+import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
 import com.reactnativenavigation.views.ComponentLayout;
-import com.reactnativenavigation.views.TitleBarButton;
 
-public class TestComponentLayout extends ComponentLayout implements TitleBarButton.OnClickListener {
+public class TestComponentLayout extends ComponentLayout implements TopBarButtonController.OnClickListener {
 
     private IReactView reactView;
 

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

@@ -0,0 +1,28 @@
+package com.reactnativenavigation.mocks;
+
+import android.app.Activity;
+
+import com.facebook.react.ReactInstanceManager;
+import com.reactnativenavigation.react.TopBarReactButtonView;
+import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+
+import static org.mockito.Mockito.mock;
+
+public class TopBarButtonCreatorMock implements ReactViewCreator {
+
+    @Override
+    public TopBarReactButtonView create(Activity activity, String componentId, String componentName) {
+        final ReactInstanceManager reactInstanceManager = mock(ReactInstanceManager.class);
+        return new TopBarReactButtonView(activity, reactInstanceManager, componentId, componentName) {
+            @Override
+            public void sendComponentStart() {
+
+            }
+
+            @Override
+            public void sendComponentStop() {
+
+            }
+        };
+    }
+}

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

@@ -8,8 +8,9 @@ import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.ImageLoaderMock;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
-import com.reactnativenavigation.parse.params.Color;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.Number;
 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.OptionHelper;
@@ -99,7 +100,7 @@ public class BottomTabsControllerTest extends BaseTest {
     public void findControllerById_ReturnsSelfOrChildren() throws Exception {
         assertThat(uut.findControllerById("123")).isNull();
         assertThat(uut.findControllerById(uut.getId())).isEqualTo(uut);
-        StackController inner = new StackController(activity, "inner", tabOptions);
+        StackController inner = new StackController(activity, new TopBarButtonCreatorMock(), "inner", tabOptions);
         inner.animatePush(child1, new MockPromise());
         assertThat(uut.findControllerById(child1.getId())).isNull();
         uut.setTabs(Collections.singletonList(inner));
@@ -130,7 +131,7 @@ public class BottomTabsControllerTest extends BaseTest {
         uut.setTabs(tabs);
         uut.ensureViewIsCreated();
 
-        StackController stack = spy(new StackController(activity, "stack", new Options()));
+        StackController stack = spy(new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options()));
         stack.ensureViewIsCreated();
         stack.push(uut, new MockPromise());
 

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

@@ -5,6 +5,7 @@ import android.app.Activity;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.TestComponentLayout;
 import com.reactnativenavigation.mocks.TestReactView;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.views.StackLayout;
 
@@ -25,7 +26,7 @@ public class ComponentViewControllerTest extends BaseTest {
         super.beforeEach();
         Activity activity = newActivity();
         view = spy(new TestComponentLayout(activity, new TestReactView(activity)));
-        ParentController<StackLayout> parentController = new StackController(activity, "stack", new Options());
+        ParentController<StackLayout> parentController = new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options());
         uut = new ComponentViewController(activity, "componentId1", "componentName", (activity1, componentId, componentName) -> view, new Options());
         uut.setParentController(parentController);
         parentController.ensureViewIsCreated();

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

@@ -3,10 +3,12 @@ package com.reactnativenavigation.viewcontrollers;
 import android.app.Activity;
 import android.support.annotation.NonNull;
 import android.view.View;
+import android.view.ViewGroup;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.FabOptions;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Text;
@@ -17,8 +19,6 @@ import com.reactnativenavigation.views.StackLayout;
 import org.junit.Test;
 
 import static org.assertj.core.api.Java6Assertions.assertThat;
-import static org.mockito.Mockito.spy;
-import static org.mockito.Mockito.verify;
 
 public class FloatingActionButtonTest extends BaseTest {
 
@@ -33,7 +33,7 @@ public class FloatingActionButtonTest extends BaseTest {
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        stackController = new StackController(activity, "stackController", new Options());
+        stackController = new StackController(activity, new TopBarButtonCreatorMock(), "stackController", new Options());
         Options options = getOptionsWithFab();
         childFab = new SimpleViewController(activity, "child1", options);
         childNoFab = new SimpleViewController(activity, "child2", new Options());
@@ -128,7 +128,7 @@ public class FloatingActionButtonTest extends BaseTest {
         for (int i = 0; i < stackLayout.getChildCount(); i++) {
             View child = stackLayout.getChildAt(i);
             if (child instanceof FabMenu) {
-                return ((FabMenu) child).getChildCount() == CHILD_FAB_COUNT + 2;
+                return ((ViewGroup) child).getChildCount() == CHILD_FAB_COUNT + 2;
             }
         }
         return false;

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

@@ -8,6 +8,7 @@ import com.reactnativenavigation.mocks.ImageLoaderMock;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleComponentViewController;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.utils.CompatUtils;
@@ -45,7 +46,7 @@ public class NavigatorTest extends BaseTest {
         imageLoaderMock = ImageLoaderMock.mock();
         activity = newActivity();
         uut = new Navigator(activity);
-        parentController = spy(new StackController(activity, "stack", new Options()));
+        parentController = spy(new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options()));
         parentController.ensureViewIsCreated();
         child1 = new SimpleViewController(activity, "child1", tabOptions);
         child2 = new SimpleViewController(activity, "child2", tabOptions);
@@ -247,7 +248,7 @@ public class NavigatorTest extends BaseTest {
 
     @NonNull
     private StackController newStack() {
-        return new StackController(activity, "stack" + CompatUtils.generateViewId(), tabOptions);
+        return new StackController(activity, new TopBarButtonCreatorMock(), "stack" + CompatUtils.generateViewId(), tabOptions);
     }
 
     @Test
@@ -324,7 +325,7 @@ public class NavigatorTest extends BaseTest {
 
     @Test
     public void pushedStackCanBePopped() throws Exception {
-        StackController parent = new StackController(activity, "someStack", new Options());
+        StackController parent = new StackController(activity, new TopBarButtonCreatorMock(), "someStack", new Options());
         parent.ensureViewIsCreated();
         uut.setRoot(parent, new MockPromise());
         parent.push(parentController, new MockPromise());

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

@@ -10,10 +10,11 @@ import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.TestComponentLayout;
 import com.reactnativenavigation.mocks.TestReactView;
-import com.reactnativenavigation.parse.params.Fraction;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.parse.params.Bool;
+import com.reactnativenavigation.parse.params.Fraction;
+import com.reactnativenavigation.parse.params.Text;
 
 import org.junit.Test;
 
@@ -44,7 +45,7 @@ public class OptionsApplyingTest extends BaseTest {
                 (activity1, componentId, componentName) -> view,
                 initialNavigationOptions
         );
-        stackController = new StackController(activity, "stack", new Options());
+        stackController = new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options());
         stackController.ensureViewIsCreated();
         uut.setParentController(stackController);
     }
@@ -61,7 +62,7 @@ public class OptionsApplyingTest extends BaseTest {
     @Test
     public void initialOptionsAppliedOnAppear() throws Exception {
         uut.options.topBarOptions.title = new Text("the title");
-        StackController stackController = new StackController(activity, "stackId", new Options());
+        StackController stackController = new StackController(activity, new TopBarButtonCreatorMock(), "stackId", new Options());
         stackController.animatePush(uut, new MockPromise() {});
         assertThat(stackController.getTopBar().getTitle()).isEmpty();
 

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

@@ -8,6 +8,7 @@ import android.widget.FrameLayout;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.views.ReactComponent;
@@ -87,7 +88,7 @@ public class ParentControllerTest extends BaseTest {
 
     @Test
     public void findControllerById_Recursive() throws Exception {
-        StackController stackController = new StackController(activity, "stack", new Options());
+        StackController stackController = new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options());
         SimpleViewController child1 = new SimpleViewController(activity, "child1", new Options());
         SimpleViewController child2 = new SimpleViewController(activity, "child2", new Options());
         stackController.animatePush(child1, new MockPromise());
@@ -109,7 +110,7 @@ public class ParentControllerTest extends BaseTest {
 
     @Test
     public void optionsAreClearedWhenChildIsAppeared() throws Exception {
-        StackController stackController = spy(new StackController(activity, "stack", new Options()));
+        StackController stackController = spy(new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options()));
         SimpleViewController child1 = new SimpleViewController(activity, "child1", new Options());
         stackController.animatePush(child1, new MockPromise());
 

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

@@ -7,6 +7,7 @@ import android.view.View;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Text;
@@ -38,7 +39,7 @@ public class StackControllerTest extends BaseTest {
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        uut = new StackController(activity, "uut", new Options());
+        uut = new StackController(activity, new TopBarButtonCreatorMock(), "uut", new Options());
         child1 = spy(new SimpleViewController(activity, "child1", new Options()));
         child2 = spy(new SimpleViewController(activity, "child2", new Options()));
         child3 = spy(new SimpleViewController(activity, "child3", new Options()));
@@ -94,7 +95,7 @@ public class StackControllerTest extends BaseTest {
     @Test
     public void pop_layoutHandlesChildWillDisappear() throws Exception {
         final StackLayout[] stackLayout = new StackLayout[1];
-        uut = new StackController(activity, "uut", new Options()) {
+        uut = new StackController(activity, new TopBarButtonCreatorMock(), "uut", new Options()) {
             @NonNull
             @Override
             protected StackLayout createView() {
@@ -133,7 +134,7 @@ public class StackControllerTest extends BaseTest {
         uut.animatePush(child1, new MockPromise());
         assertThat(child1.getParentController()).isEqualTo(uut);
 
-        StackController anotherNavController = new StackController(activity, "another", new Options());
+        StackController anotherNavController = new StackController(activity, new TopBarButtonCreatorMock(), "another", new Options());
         anotherNavController.animatePush(child2, new MockPromise());
         assertThat(child2.getParentController()).isEqualTo(anotherNavController);
     }
@@ -313,7 +314,7 @@ public class StackControllerTest extends BaseTest {
 
     @Test
     public void findControllerById_Deeply() throws Exception {
-        StackController stack = new StackController(activity, "stack2", new Options());
+        StackController stack = new StackController(activity, new TopBarButtonCreatorMock(), "stack2", new Options());
         stack.animatePush(child2, new MockPromise());
         uut.animatePush(stack, new MockPromise());
         assertThat(uut.findControllerById(child2.getId())).isEqualTo(child2);
@@ -408,7 +409,7 @@ public class StackControllerTest extends BaseTest {
 
     @Test
     public void stackCanBePushed() throws Exception {
-        StackController parent = new StackController(activity, "someStack", new Options());
+        StackController parent = new StackController(activity, new TopBarButtonCreatorMock(), "someStack", new Options());
         parent.ensureViewIsCreated();
         parent.push(uut, new MockPromise());
         uut.onViewAppeared();
@@ -417,7 +418,7 @@ public class StackControllerTest extends BaseTest {
 
     @Test
     public void applyOptions_applyOnlyOnFirstStack() throws Exception {
-        StackController parent = spy(new StackController(activity, "someStack", new Options()));
+        StackController parent = spy(new StackController(activity, new TopBarButtonCreatorMock(), "someStack", new Options()));
         parent.ensureViewIsCreated();
         parent.push(uut, new MockPromise());
 

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

@@ -0,0 +1,124 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
+import com.reactnativenavigation.parse.params.Button;
+import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.react.ReactView;
+import com.reactnativenavigation.views.TitleBar;
+
+import org.junit.Test;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+
+public class TitleBarTest extends BaseTest {
+
+    private TitleBar uut;
+    private Button leftButton;
+    private Button textButton;
+    private Button customButton;
+    private Map<String, TopBarButtonController> buttonControllers;
+
+    @Override
+    public void beforeEach() {
+        final TopBarButtonCreatorMock buttonCreator = new TopBarButtonCreatorMock();
+        final Activity activity = newActivity();
+        createButtons();
+        buttonControllers = new HashMap<>();
+        uut = spy(new TitleBar(activity, buttonCreator, (buttonId -> {})) {
+            @Override
+            public TopBarButtonController createButtonController(Button button) {
+                TopBarButtonController controller = spy(super.createButtonController(button));
+                buttonControllers.put(button.id, controller);
+                return controller;
+            }
+        });
+    }
+
+    private void createButtons() {
+        leftButton = new Button();
+        leftButton.id = "back";
+        leftButton.title = new Text("jfjf");
+
+        textButton = new Button();
+        textButton.id = "textButton";
+        textButton.title = new Text("Btn");
+
+        customButton = new Button();
+        customButton.id = "customBtn";
+        customButton.component = new Text("com.rnn.customBtn");
+    }
+
+    @Test
+    public void setButton_setsTextButton() {
+        uut.setButtons(leftButton(leftButton), rightButtons(textButton));
+        assertThat(uut.getMenu().getItem(0).getTitle()).isEqualTo(textButton.title.get());
+    }
+
+    @Test
+    public void setButton_setsCustomButton() {
+        uut.setButtons(leftButton(leftButton), rightButtons(customButton));
+        ReactView btnView = (ReactView) uut.getMenu().getItem(0).getActionView();
+        assertThat(btnView.getComponentName()).isEqualTo(customButton.component.get());
+    }
+
+    @Test
+    public void destroy_destroysButtonControllers() throws Exception {
+        uut.setButtons(leftButton(leftButton), rightButtons(customButton, textButton));
+        uut.clear();
+        for (TopBarButtonController controller : buttonControllers.values()) {
+            verify(controller, times(1)).destroy();
+        }
+    }
+
+    @Test
+    public void setRightButtons_destroysRightButtons() throws Exception {
+        uut.setButtons(leftButton(leftButton), rightButtons(customButton));
+        uut.setButtons(leftButton(leftButton), rightButtons(textButton));
+        verify(buttonControllers.get(customButton.id), times(1)).destroy();
+    }
+
+    @Test
+    public void setRightButtons_onlyDestroysRightButtons() throws Exception {
+        uut.setButtons(leftButton(leftButton), rightButtons(customButton));
+        uut.setButtons(null, rightButtons(textButton));
+        verify(buttonControllers.get(leftButton.id), times(0)).destroy();
+    }
+
+    @Test
+    public void setRightButtons_emptyButtonsListClearsRightButtons() throws Exception {
+        uut.setButtons(new ArrayList<>(), rightButtons(customButton, textButton));
+        uut.setButtons(new ArrayList<>(), new ArrayList<>());
+        for (TopBarButtonController controller : buttonControllers.values()) {
+            verify(controller, times(1)).destroy();
+        }
+        assertThat(uut.getMenu().size()).isEqualTo(0);
+    }
+
+    @Test
+    public void setLeftButtons_emptyButtonsListClearsLeftButton() throws Exception {
+        uut.setButtons(leftButton(leftButton), rightButtons(customButton));
+        uut.setButtons(new ArrayList<>(), rightButtons(textButton));
+        verify(buttonControllers.get(leftButton.id), times(1)).destroy();
+    }
+
+    private List<Button> leftButton(Button leftButton) {
+        return Collections.singletonList(leftButton);
+    }
+
+    private List<Button> rightButtons(Button... buttons) {
+        return Arrays.asList(buttons);
+    }
+}

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

@@ -0,0 +1,57 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+import android.support.annotation.NonNull;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.params.Button;
+import com.reactnativenavigation.parse.params.Text;
+
+import org.junit.Ignore;
+import org.junit.Test;
+
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+
+public class TopBarButtonControllerTest extends BaseTest {
+
+    private TopBarButtonController uut;
+    private StackController stackController;
+
+    @Override
+    public void beforeEach() {
+        Button button = createButton();
+        final Activity activity = newActivity();
+
+        TopBarButtonCreatorMock buttonCreatorMock = new TopBarButtonCreatorMock();
+        uut = spy(new TopBarButtonController(activity, button, buttonCreatorMock, (buttonId) -> {}));
+        stackController = spy(new StackController(activity, buttonCreatorMock, "stack", new Options()));
+
+    }
+
+    @Test
+    public void buttonDoesNotClearStackOptionsOnAppear() throws Exception {
+        uut.ensureViewIsCreated();
+        uut.onViewAppeared();
+        verify(stackController, times(0)).clearOptions();
+    }
+
+    @Test @Ignore
+    public void destroy_buttonIsDestroyedWhenStackIsDestroyed() throws Exception {
+        uut.ensureViewIsCreated();
+        uut.onViewAppeared();
+        stackController.destroy();
+        verify(uut, times(1)).destroy();
+    }
+
+    @NonNull
+    private Button createButton() {
+        Button button = new Button();
+        button.id = "btnId";
+        button.component = new Text("com.example.customBtn");
+        return button;
+    }
+}

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

@@ -8,6 +8,7 @@ import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.TestComponentViewCreator;
 import com.reactnativenavigation.mocks.TestReactView;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.utils.ViewHelper;
@@ -59,7 +60,7 @@ public class TopTabsViewControllerTest extends BaseTest {
         uut = spy(new TopTabsController(activity, "componentId", tabControllers, layoutCreator, options));
         tabControllers.forEach(viewController -> viewController.setParentController(uut));
 
-        parentController = spy(new StackController(activity, "stackId", new Options()));
+        parentController = spy(new StackController(activity, new TopBarButtonCreatorMock(), "stackId", new Options()));
         parentController.push(uut, new MockPromise());
         uut.setParentController(parentController);
     }
@@ -214,7 +215,7 @@ public class TopTabsViewControllerTest extends BaseTest {
     public void applyOptions_tabsAreRemovedAfterViewDisappears() throws Exception {
         parentController.getView().removeAllViews();
 
-        StackController stackController = spy(new StackController(activity, "stack", new Options()));
+        StackController stackController = spy(new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options()));
         ComponentViewController first = new ComponentViewController(
                 activity,
                 "firstScreen",

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

@@ -9,6 +9,7 @@ import android.widget.LinearLayout;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 
 import org.assertj.android.api.Assertions;
@@ -65,7 +66,7 @@ public class ViewControllerTest extends BaseTest {
     @Test
     public void holdsAReferenceToStackControllerOrNull() throws Exception {
         assertThat(uut.getParentController()).isNull();
-        StackController nav = new StackController(activity, "stack", new Options());
+        StackController nav = new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options());
         nav.animatePush(uut, new MockPromise());
         assertThat(uut.getParentController()).isEqualTo(nav);
     }

lib/android/app/src/test/java/com/reactnativenavigation/views/TopBarTest.java

@@ -5,11 +5,13 @@ import android.view.MenuItem;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.anim.TopBarAnimator;
-import com.reactnativenavigation.parse.params.Button;
-import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.params.Bool;
+import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.NullBool;
+import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.utils.TitleBarHelper;
+import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
 
 import org.junit.Test;
 
@@ -26,18 +28,18 @@ public class TopBarTest extends BaseTest {
     private TopBarAnimator animator;
     private ArrayList<Button> leftButton;
     private ArrayList<Button> rightButtons;
-    private TitleBarButton.OnClickListener onClickListener;
+    private TopBarButtonController.OnClickListener onClickListener;
 
     @Override
     public void beforeEach() {
-        onClickListener = spy(new TitleBarButton.OnClickListener() {
+        onClickListener = spy(new TopBarButtonController.OnClickListener() {
             @Override
             public void onPress(String buttonId) {
                 Log.i("TopBarTest", "onPress: " + buttonId);
             }
         });
-        StackLayout parent = new StackLayout(newActivity(), this.onClickListener);
-        uut = new TopBar(newActivity(), this.onClickListener, parent);
+        StackLayout parent = new StackLayout(newActivity(), new TopBarButtonCreatorMock(), this.onClickListener);
+        uut = new TopBar(newActivity(), new TopBarButtonCreatorMock(), this.onClickListener, parent);
         animator = spy(new TopBarAnimator(uut));
         uut.setAnimator(animator);
         leftButton = createLeftButton();

playground/src/screens/CustomRoundedButton.js

@@ -0,0 +1,55 @@
+const React = require('react');
+const { Component } = require('react');
+const {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  Text,
+  Alert,
+  Platform
+} = require('react-native');
+
+class CustomRoundedButton extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <View style={styles.container} key={'guyguy'}>
+        <View style={styles.button}>
+          <TouchableOpacity onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
+            <Text style={styles.text}>Hi:)</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+}
+
+module.exports = CustomRoundedButton;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: 48,
+    height: 48,
+    backgroundColor: 'transparent',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  button: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'red',
+    justifyContent: 'center',
+  },
+  text: {
+    color: 'black',
+    alignSelf: 'center'
+  }
+});

playground/src/screens/CustomTextButton.js

@@ -0,0 +1,46 @@
+const React = require('react');
+const { Component } = require('react');
+const {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  Text,
+  Alert,
+  Platform
+} = require('react-native');
+
+class CustomTextButton extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity stye={styles.button} onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
+          <Text style={styles.text}>Press Me</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+module.exports = CustomTextButton;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: 60,
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  button: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  text: {
+    color: 'black',
+  }
+});

playground/src/screens/OptionsScreen.js

@@ -8,6 +8,8 @@ const testIDs = require('../testIDs');
 
 const BUTTON_ONE = 'buttonOne';
 const BUTTON_TWO = 'buttonTwo';
+const CUSTOM_BUTTON = 'customButton';
+const CUSTOM_BUTTON2 = 'customButton2';
 const BUTTON_LEFT = 'buttonLeft';
 const FAB = 'fab';
 
@@ -26,13 +28,25 @@ class OptionsScreen extends Component {
         textFontSize: 16,
         textFontFamily: 'HelveticaNeue-Italic',
         testID: testIDs.TOP_BAR_ELEMENT,
-        rightButtons: [{
-          id: BUTTON_ONE,
-          testID: BUTTON_ONE,
-          title: 'One',
-          buttonFontSize: 28,
-          buttonColor: 'red'
-        }],
+        rightButtons: [
+          {
+            id: CUSTOM_BUTTON,
+            testID: CUSTOM_BUTTON,
+            component: 'CustomTextButton'
+          },
+          {
+            id: CUSTOM_BUTTON2,
+            testID: CUSTOM_BUTTON2,
+            component: 'CustomRoundedButton'
+          },
+          {
+            id: BUTTON_ONE,
+            testID: BUTTON_ONE,
+            title: 'One',
+            buttonFontSize: 28,
+            buttonColor: 'red'
+          }
+        ],
         leftButtons: [{
           id: BUTTON_LEFT,
           testID: BUTTON_LEFT,

playground/src/screens/index.js

@@ -19,6 +19,8 @@ const TopTabOptionsScreen = require('./TopTabOptionsScreen');
 const CustomTopBar = require('./CustomTopBar');
 const Alert = require('./Alert');
 const BackHandlerModalScreen = require('./BackHandlerModalScreen');
+const CustomTextButton = require('./CustomTextButton');
+const CustomRoundedButton = require('./CustomRoundedButton');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -41,6 +43,8 @@ function registerScreens() {
   Navigation.registerComponent('navigation.playground.CustomTopBar', () => CustomTopBar);
   Navigation.registerComponent('navigation.playground.alert', () => Alert);
   Navigation.registerComponent('navigation.playground.BackHandlerModalScreen', () => BackHandlerModalScreen);
+  Navigation.registerComponent('CustomTextButton', () => CustomTextButton);
+  Navigation.registerComponent('CustomRoundedButton', () => CustomRoundedButton);
 }
 
 module.exports = {