Implement custom TitleBar buttons on Android

android/app/src/main/java/com/reactnativenavigation/params/BaseTitleBarButtonParams.java

@@ -1,6 +1,7 @@
 package com.reactnativenavigation.params;
 
 import android.graphics.drawable.Drawable;
+import android.os.Bundle;
 import android.view.MenuItem;
 
 public class BaseTitleBarButtonParams {
@@ -20,6 +21,8 @@ public class BaseTitleBarButtonParams {
     public String eventId;
     public String label;
     public Drawable icon;
+    public String componentName;
+    public Bundle componentProps;
     public StyleParams.Color color;
     public StyleParams.Color disabledColor;
     public ShowAsAction showAsAction;
@@ -42,4 +45,8 @@ public class BaseTitleBarButtonParams {
         }
         return disabledColor.hasColor() ? disabledColor : AppStyle.appStyle.titleBarDisabledButtonColor;
     }
+
+    public boolean hasComponent() {
+        return componentName != null;
+    }
 }

android/app/src/main/java/com/reactnativenavigation/params/parsers/TitleBarButtonParamsParser.java

@@ -32,6 +32,8 @@ public class TitleBarButtonParamsParser extends Parser {
         result.hint = bundle.getString("hint", "");
         result.eventId = bundle.getString("id");
         result.disableIconTint = bundle.getBoolean("disableIconTint", false);
+        result.componentName = bundle.getString("component");
+        result.componentProps = bundle.getBundle("passProps");
         return result;
     }
 

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

@@ -1,18 +0,0 @@
-package com.reactnativenavigation.views;
-
-import android.view.Menu;
-import android.view.View;
-
-import com.reactnativenavigation.params.TitleBarButtonParams;
-
-class ButtonFactory {
-
-    public static TitleBarButton create(Menu menu, View parent, TitleBarButtonParams params, String navigatorEventId) {
-        switch (params.eventId) {
-            case TitleBarSearchButton.BUTTON_ID:
-                return new TitleBarSearchButton(menu, parent, params, navigatorEventId);
-            default:
-                return new TitleBarButton(menu, parent, params, navigatorEventId);
-        }
-    }
-}

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

@@ -175,7 +175,7 @@ public class TitleBar extends Toolbar {
 
     private void addButtonsToTitleBar(String navigatorEventId, Menu menu) {
         for (int i = 0; i < rightButtons.size(); i++) {
-            final TitleBarButton button = ButtonFactory.create(menu, this, rightButtons.get(i), navigatorEventId);
+            final TitleBarButton button = new TitleBarButton(menu, this, rightButtons.get(i), navigatorEventId);
             addButtonInReverseOrder(rightButtons, i, button);
         }
     }

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

@@ -34,6 +34,9 @@ class TitleBarButton implements MenuItem.OnMenuItemClickListener {
         MenuItem item = createMenuItem(index);
         item.setShowAsAction(buttonParams.showAsAction.action);
         item.setEnabled(buttonParams.enabled);
+        if (buttonParams.hasComponent()) {
+            item.setActionView(new TitleBarButtonComponent(parent.getContext(), buttonParams.componentName, buttonParams.componentProps));
+        }
         setIcon(item);
         setColor();
         setFont();

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

@@ -0,0 +1,25 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+import android.os.Bundle;
+import android.widget.FrameLayout;
+
+import com.reactnativenavigation.params.NavigationParams;
+import com.reactnativenavigation.views.utils.Constants;
+import com.reactnativenavigation.views.utils.ViewMeasurer;
+
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
+
+public class TitleBarButtonComponent extends ContentView {
+
+    public TitleBarButtonComponent(Context context, String componentName, Bundle passProps) {
+        super(context, componentName, NavigationParams.EMPTY, passProps);
+        setLayoutParams(new FrameLayout.LayoutParams(WRAP_CONTENT, Constants.TOOLBAR_BUTTON_SIZE));
+        setViewMeasurer(new ViewMeasurer() {
+            @Override
+            public int getMeasuredWidth(int widthMeasureSpec) {
+                return getChildCount() > 0 ? getChildAt(0).getWidth() : 0;
+            }
+        });
+    }
+}

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

@@ -0,0 +1,25 @@
+package com.reactnativenavigation.views;
+
+import android.content.Context;
+import android.support.annotation.Nullable;
+import android.view.Menu;
+import android.view.MenuItem;
+import android.view.View;
+
+import com.reactnativenavigation.params.NavigationParams;
+import com.reactnativenavigation.params.TitleBarButtonParams;
+
+class TitleBarCustomComponentButton extends TitleBarButton {
+    TitleBarCustomComponentButton(Menu menu, View parent, TitleBarButtonParams buttonParams, @Nullable String navigatorEventId) {
+        super(menu, parent, buttonParams, navigatorEventId);
+    }
+
+    @Override
+    MenuItem addToMenu(int index) {
+        throw new RuntimeException("Can't add custom component to menu");
+    }
+
+    View createView(Context context) {
+        return new ContentView(context, buttonParams.componentName, NavigationParams.EMPTY, buttonParams.componentProps);
+    }
+}

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

@@ -1,156 +0,0 @@
-package com.reactnativenavigation.views;
-
-import android.app.Activity;
-import android.graphics.drawable.Drawable;
-import android.support.annotation.Nullable;
-import android.support.v4.view.MenuItemCompat;
-import android.support.v7.widget.SearchView;
-import android.support.v7.widget.Toolbar;
-import android.view.Menu;
-import android.view.MenuItem;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.EditText;
-import android.widget.ImageButton;
-import android.widget.ImageView;
-
-import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.WritableMap;
-import com.reactnativenavigation.NavigationApplication;
-import com.reactnativenavigation.R;
-import com.reactnativenavigation.params.TitleBarButtonParams;
-import com.reactnativenavigation.utils.ReflectionUtils;
-import com.reactnativenavigation.utils.ViewUtils;
-
-class TitleBarSearchButton extends TitleBarButton implements SearchView.OnQueryTextListener, View.OnFocusChangeListener, View.OnClickListener {
-    static final String BUTTON_ID = "searchView";
-    private SearchView searchView;
-
-    TitleBarSearchButton(Menu menu, View parent, TitleBarButtonParams buttonParams, @Nullable String navigatorEventId) {
-        super(menu, parent, buttonParams, navigatorEventId);
-    }
-
-    MenuItem addToMenu(int index) {
-        ((Activity) parent.getContext()).getMenuInflater().inflate(R.menu.search_item, menu);
-        MenuItem item = menu.findItem(R.id.toolbar_action_search);
-        item.setOnMenuItemClickListener(this);
-        if (buttonParams.icon != null) {
-            item.setIcon(buttonParams.icon);
-        }
-        searchView = (SearchView) MenuItemCompat.getActionView(item);
-        searchView.setQueryHint(buttonParams.hint);
-        searchView.setOnQueryTextFocusChangeListener(this);
-        searchView.setOnQueryTextListener(this);
-        searchView.setOnSearchClickListener(this);
-        setColor();
-        return item;
-    }
-
-    private void setColor() {
-        EditText searchEditText = ViewUtils.findChildByClass(searchView, EditText.class);
-        if (searchEditText != null) {
-            if (buttonParams.color.hasColor()) {
-                searchEditText.setTextColor(buttonParams.color.getColor());
-                searchEditText.setHintTextColor(buttonParams.color.getColor());
-            }
-            colorCloseButton(searchEditText);
-            setImagePlateColor();
-        }
-    }
-
-    private void colorCloseButton(EditText searchEditText) {
-        ViewUtils.performOnChildren((ViewGroup) searchEditText.getParent(), new ViewUtils.PerformOnViewTask() {
-            @Override
-            public void runOnView(View view) {
-                if (view instanceof ImageView) {
-                    if (buttonParams.color.hasColor()) {
-                        ((ImageView) view).setColorFilter(buttonParams.color.getColor());
-                    }
-                }
-            }
-        });
-    }
-
-    private void setImagePlateColor() {
-        if (buttonParams.color.hasColor()) {
-            Object mSearchPlate = ReflectionUtils.getDeclaredField(searchView, "mSearchPlate");
-            if (mSearchPlate != null) {
-                Drawable background = ((View) mSearchPlate).getBackground();
-                if (background != null) {
-                    ViewUtils.tintDrawable(background, buttonParams.color.getColor(), true);
-                }
-            }
-        }
-    }
-
-    @Override
-    public boolean onMenuItemClick(MenuItem item) {
-        setupBackButtonAfterSearchViewIsExpended();
-        return false;
-    }
-
-    private void setupBackButtonAfterSearchViewIsExpended() {
-        ViewUtils.runOnPreDraw(searchView, new Runnable() {
-            @Override
-            public void run() {
-                Object backButton = ViewUtils.findChildByClass((ViewGroup) searchView.getParent(), ImageButton.class);
-                if (backButton != null) {
-                    setBackButtonClickListener((View) backButton);
-                    colorBackButton((ImageView) backButton);
-                }
-            }
-
-            private void colorBackButton(ImageView backButton) {
-                if (buttonParams.color.hasColor()) {
-                    ViewUtils.tintDrawable(backButton.getDrawable(), buttonParams.color.getColor(), true);
-                }
-            }
-
-            private void setBackButtonClickListener(View backButton) {
-                backButton.setOnClickListener(new View.OnClickListener() {
-                    @Override
-                    public void onClick(View v) {
-                        ((Toolbar) searchView.getParent()).collapseActionView();
-                        sendEvent("searchViewHidden");
-                    }
-                });
-            }
-        });
-    }
-
-    @Override
-    public boolean onQueryTextSubmit(String query) {
-        WritableMap arguments = Arguments.createMap();
-        arguments.putString("query", query);
-        sendEvent("searchQuerySubmit", arguments);
-        return false;
-    }
-
-    @Override
-    public boolean onQueryTextChange(String newText) {
-        WritableMap arguments = Arguments.createMap();
-        arguments.putString("query", newText);
-        sendEvent("searchQueryChange", arguments);
-        return false;
-    }
-
-    @Override
-    public void onFocusChange(View v, boolean hasFocus) {
-        WritableMap arguments = Arguments.createMap();
-        arguments.putBoolean("hasFocus", hasFocus);
-        sendEvent("searchFocusChange", arguments);
-    }
-
-    @Override
-    public void onClick(View v) {
-        sendEvent("searchViewShown");
-    }
-
-    private void sendEvent(String eventId, WritableMap arguments) {
-        NavigationApplication.instance.getEventEmitter().sendNavigatorEvent(eventId, navigatorEventId, arguments);
-    }
-
-    private void sendEvent(String eventId) {
-        NavigationApplication.instance.getEventEmitter().sendNavigatorEvent(eventId, navigatorEventId);
-    }
-}

android/app/src/main/java/com/reactnativenavigation/views/utils/Constants.java

@@ -4,4 +4,5 @@ import com.reactnativenavigation.utils.ViewUtils;
 
 public class Constants {
     public static final int BOTTOM_TABS_HEIGHT = (int) ViewUtils.convertDpToPixel(56);
+    public static final int TOOLBAR_BUTTON_SIZE = (int) ViewUtils.convertDpToPixel(48);
 }