Android buttons (#2256)

* upstream merge

* Fixed bad merge

* More bad merges

* Mostly done, however a few properties missing and tests remain.

* async icons loading

* Left button

* Whoops!

* Added button size

* updated docs

* refactor

* Rebase fixes

* Rebase fixes

* rebase fix

* Rebase fixes

* rebase fixes

* reset contributing

AndroidE2E/app/src/androidTest/java/com/reactnativenavigation/e2e/androide2e/NavigationOptionsTest.java

@@ -32,4 +32,11 @@ public class NavigationOptionsTest extends BaseTest {
 //		elementByText("SHOW TOP BAR").click();
 //		assertExists(By.text("Static Title"));
 //	}
+
+    @Test
+    public void testRightButtons() throws Exception {
+        elementByText("PUSH OPTIONS SCREEN").click();
+        assertExists(By.text("ONE"));
+        elementByText("ONE").click();
+    }
 }

README.md

@@ -103,14 +103,13 @@ v2 is written in Test Driven Development. We have a test for every feature inclu
 
 |       buttons        | iOS  | Android | contributors|
 |--------------------|-----|----|-----|
-| id    |   ✅      |      [Contribute](/docs/docs/CONTRIBUTING.md)    |@Johan-dutoit|
-| testID   |     ✅   |    [Contribute](/docs/docs/CONTRIBUTING.md)      | @Johan-dutoit|
-| color             |    ✅     |      [Contribute](/docs/docs/CONTRIBUTING.md)       | @Johan-dutoit|
-| icon          |   ✅     |     [Contribute](/docs/docs/CONTRIBUTING.md)       | @Johan-dutoit|
-| disableTint        |    ✅       |     [Contribute](/docs/docs/CONTRIBUTING.md)      | @Johan-dutoit|
-| fontSize        |    ✅       |     [Contribute](/docs/docs/CONTRIBUTING.md)      | @Johan-dutoit |
-| fontWeight        |    ✅       |     [Contribute](/docs/docs/CONTRIBUTING.md)      | @Johan-dutoit |
-| fontWeight        |    ✅       |     [Contribute](/docs/docs/CONTRIBUTING.md)      | @Johan-dutoit |
+| id    |   ✅      |     @Johan-dutoit  |@Johan-dutoit|
+| testID   |     ✅   |   [Contribute](/docs/docs/CONTRIBUTING.md)  | @Johan-dutoit|
+| color             |    ✅     |     @Johan-dutoit     | @Johan-dutoit|
+| icon          |   ✅     |    @Johan-dutoit     | @Johan-dutoit|
+| disableTint        |    ✅       |    @Johan-dutoit    | @Johan-dutoit|
+| fontSize        |    ✅       |    @Johan-dutoit    | @Johan-dutoit |
+| fontWeight        |    ✅       |    [Contribute](/docs/docs/CONTRIBUTING.md)   |  [Contribute](/docs/docs/CONTRIBUTING.md) |
 
 |       statusBar        | iOS  | Android | contributors|
 |--------------------|-----|----|-----|

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

@@ -0,0 +1,77 @@
+package com.reactnativenavigation.parse;
+
+import android.support.annotation.ColorInt;
+import android.view.MenuItem;
+
+import org.json.JSONArray;
+import org.json.JSONObject;
+
+import java.util.ArrayList;
+
+import static com.reactnativenavigation.parse.DEFAULT_VALUES.NO_VALUE;
+import static com.reactnativenavigation.parse.NavigationOptions.NO_INT_VALUE;
+
+public class Button {
+	public String id;
+	public String title;
+	public NavigationOptions.BooleanOptions disabled;
+	public NavigationOptions.BooleanOptions disableIconTint;
+	public int showAsAction;
+	@ColorInt public int buttonColor;
+	public int buttonFontSize;
+	public String buttonFontWeight;
+	public String icon;
+
+	private static Button parseJson(JSONObject json)  {
+		Button button = new Button();
+		button.id = json.optString("id");
+		button.title = json.optString("title", NO_VALUE);
+		button.disabled = NavigationOptions.BooleanOptions.parse(json.optString("disabled", NO_VALUE));
+		button.disableIconTint = NavigationOptions.BooleanOptions.parse(json.optString("disableIconTint", NO_VALUE));
+		button.showAsAction = parseShowAsAction(json.optString("showAsAction", NO_VALUE));
+		button.buttonColor = json.optInt("buttonColor", NO_INT_VALUE);
+		button.buttonFontSize = json.optInt("buttonFontSize", NO_INT_VALUE);
+		button.buttonFontWeight = json.optString("buttonFontWeight", NO_VALUE);
+
+		JSONObject iconObject = json.optJSONObject("icon");
+		if (iconObject != null) {
+			button.icon = iconObject.optString("uri", NO_VALUE);
+		}
+
+		return button;
+	}
+
+	public static ArrayList<Button> parseJsonArray(JSONArray jsonArray) {
+		ArrayList<Button> buttons = new ArrayList<>();
+
+		if (jsonArray == null) {
+			return null;
+		}
+
+		for (int i = 0; i < jsonArray.length(); i++) {
+			JSONObject json = jsonArray.optJSONObject(i);
+			Button button =	Button.parseJson(json);
+			buttons.add(button);
+		}
+
+		return buttons;
+	}
+
+	private static int parseShowAsAction(String showAsAction) {
+		if (NO_VALUE.equals(showAsAction)) {
+			return MenuItem.SHOW_AS_ACTION_IF_ROOM;
+		}
+
+		switch (showAsAction) {
+			case "always":
+				return MenuItem.SHOW_AS_ACTION_ALWAYS;
+			case "never":
+				return MenuItem.SHOW_AS_ACTION_NEVER;
+			case "withText":
+				return MenuItem.SHOW_AS_ACTION_WITH_TEXT;
+			case "ifRoom":
+			default:
+				return MenuItem.SHOW_AS_ACTION_IF_ROOM;
+		}
+	}
+}

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

@@ -4,6 +4,8 @@ import android.support.annotation.NonNull;
 
 import org.json.JSONObject;
 
+import java.util.ArrayList;
+
 public class NavigationOptions implements DEFAULT_VALUES {
 
     public enum BooleanOptions {
@@ -33,20 +35,32 @@ public class NavigationOptions implements DEFAULT_VALUES {
 		result.topTabsOptions = TopTabsOptions.parse(json.optJSONObject("topTabs"));
         result.topTabOptions = TopTabOptions.parse(json.optJSONObject("topTab"));
 		result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
+		result.rightButtons = Button.parseJsonArray(json.optJSONArray("rightButtons"));
+        result.leftButtons = Button.parseJsonArray(json.optJSONArray("leftButtons"));
 
 		return result.withDefaultOptions(defaultOptions);
 	}
 
-	public TopBarOptions topBarOptions = new TopBarOptions();
-    public TopTabsOptions topTabsOptions = new TopTabsOptions();
-    public TopTabOptions topTabOptions = new TopTabOptions();
-    public BottomTabsOptions bottomTabsOptions = new BottomTabsOptions();
+    @NonNull public TopBarOptions topBarOptions = new TopBarOptions();
+    @NonNull private TopTabsOptions topTabsOptions = new TopTabsOptions();
+    @NonNull public TopTabOptions topTabOptions = new TopTabOptions();
+    @NonNull public BottomTabsOptions bottomTabsOptions = new BottomTabsOptions();
+    public ArrayList<Button> leftButtons;
+    public ArrayList<Button> rightButtons;
 
 	public void mergeWith(final NavigationOptions other) {
         topBarOptions.mergeWith(other.topBarOptions);
         topTabsOptions.mergeWith(other.topTabsOptions);
         bottomTabsOptions.mergeWith(other.bottomTabsOptions);
-	}
+
+        if(other.leftButtons != null) {
+            leftButtons = other.leftButtons;
+        }
+
+        if(other.rightButtons != null) {
+            rightButtons = other.rightButtons;
+        }
+    }
 
     NavigationOptions withDefaultOptions(final NavigationOptions other) {
         topBarOptions.mergeWithDefault(other.topBarOptions);

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

@@ -3,12 +3,14 @@ package com.reactnativenavigation.presentation;
 import android.view.View;
 
 import com.reactnativenavigation.anim.StackAnimator;
+import com.reactnativenavigation.parse.Button;
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.parse.TopBarOptions;
-import com.reactnativenavigation.parse.TopTabsOptions;
 import com.reactnativenavigation.utils.TypefaceLoader;
 import com.reactnativenavigation.views.TopBar;
 
+import java.util.ArrayList;
+
 public class OptionsPresenter {
 
 	private final StackAnimator animator;
@@ -23,7 +25,7 @@ public class OptionsPresenter {
 
 	public void applyOptions(NavigationOptions options) {
         applyTopBarOptions(options.topBarOptions);
-        applyTopTabsOptions(options.topTabsOptions);
+        applyButtons(options.leftButtons, options.rightButtons);
 	}
 
     private void applyTopBarOptions(TopBarOptions options) {
@@ -64,7 +66,7 @@ public class OptionsPresenter {
 		}
 	}
 
-    private void applyTopTabsOptions(TopTabsOptions topTabsOptions) {
-        // TODO: -guyca
+    private void applyButtons(ArrayList<Button> leftButtons, ArrayList<Button> rightButtons) {
+        topBar.setButtons(leftButtons, rightButtons);
     }
 }

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

@@ -3,8 +3,12 @@ package com.reactnativenavigation.react;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.WritableNativeArray;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 
+import org.json.JSONException;
+import org.json.JSONObject;
+
 import static com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter;
 
 public class NavigationEvent {
@@ -32,8 +36,11 @@ public class NavigationEvent {
 	}
 
 	public void sendOnNavigationButtonPressed(String id, String buttonId) {
-		//TODO!
-		//emit(onNavigationButtonPressed, id);
+		WritableMap map = Arguments.createMap();
+		map.putString("containerId", id);
+		map.putString("buttonId", buttonId);
+
+		emit(onNavigationButtonPressed, map);
 	}
 
 	private void emit(String eventName) {

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

@@ -59,4 +59,9 @@ public class ReactView extends ReactRootView implements ContainerViewController.
 	public void sendContainerStop() {
 		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).containerDidDisappear(containerId);
 	}
+
+    @Override
+	public void sendOnNavigationButtonPressed(String buttonId) {
+		new NavigationEvent(reactInstanceManager.getCurrentReactContext()).sendOnNavigationButtonPressed(containerId, buttonId);
+	}
 }

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

@@ -0,0 +1,66 @@
+package com.reactnativenavigation.utils;
+
+import android.content.Context;
+import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
+import android.graphics.drawable.BitmapDrawable;
+import android.graphics.drawable.Drawable;
+import android.net.Uri;
+import android.os.StrictMode;
+import android.support.annotation.NonNull;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.net.URL;
+
+public class ImageUtils {
+
+	public interface ImageLoadingListener {
+		void onComplete(@NonNull Drawable drawable);
+
+		void onError(Throwable error);
+	}
+
+	public static void tryLoadIcon(final Context context, final String uri, final ImageLoadingListener listener) {
+		if (uri == null) {
+			if (listener != null) {
+				listener.onError(new IllegalArgumentException("Uri is null"));
+			}
+			return;
+		}
+		runWorkerThread(new Runnable() {
+			@Override
+			public void run() {
+				loadIcon(context, uri, listener);
+			}
+		});
+	}
+
+	private static void loadIcon(Context context, String uri, final ImageLoadingListener listener) {
+		try {
+			InputStream is = null;
+			if (uri.contains("http")) {
+				URL url = new URL(uri);
+				is = url.openStream();
+			} else {
+				is = context.getContentResolver().openInputStream(Uri.parse(uri));
+			}
+
+			Bitmap bitmap = BitmapFactory.decodeStream(is);
+			Drawable drawable = new BitmapDrawable(context.getResources(), bitmap);
+			if (listener != null) {
+				listener.onComplete(drawable);
+			}
+		} catch (IOException e) {
+			if (listener != null) {
+				listener.onError(e);
+			} else {
+				e.printStackTrace();
+			}
+		}
+	}
+
+	private static void runWorkerThread(Runnable runnable) {
+		new Thread(runnable).start();
+	}
+}

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

@@ -1,5 +1,10 @@
 package com.reactnativenavigation.utils;
 
+import android.graphics.PorterDuff;
+import android.graphics.PorterDuffColorFilter;
+import android.graphics.drawable.Drawable;
+import android.os.Handler;
+import android.os.Looper;
 import android.view.View;
 import android.view.ViewTreeObserver;
 
@@ -14,4 +19,12 @@ public class UiUtils {
 			}
 		});
 	}
+
+	public static void tintDrawable(Drawable drawable, int tint) {
+		drawable.setColorFilter(new PorterDuffColorFilter(tint, PorterDuff.Mode.SRC_IN));
+	}
+
+	public static void runOnMainThread(Runnable runnable) {
+		new Handler(Looper.getMainLooper()).post(runnable);
+	}
 }

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

@@ -29,7 +29,8 @@ public class ContainerViewController extends ViewController implements Navigatio
 
 		void sendContainerStop();
 
-	}
+        void sendOnNavigationButtonPressed(String buttonId);
+    }
 
 	private final String containerName;
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabsViewPager.java

@@ -5,6 +5,7 @@ import android.content.Context;
 import android.support.v4.view.ViewPager;
 import android.view.ViewGroup;
 
+import com.reactnativenavigation.viewcontrollers.ContainerViewController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 
 import java.util.List;
@@ -36,4 +37,8 @@ public class TopTabsViewPager extends ViewPager {
             tab.destroy();
         }
     }
+
+    public void sendOnNavigationButtonPressed(String id) {
+        ((ContainerViewController.IReactView) tabs.get(getCurrentItem()).getView()).sendOnNavigationButtonPressed(id);
+    }
 }

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

@@ -7,6 +7,8 @@ import com.reactnativenavigation.parse.NavigationOptions;
 public interface Container {
     void applyOptions(NavigationOptions options);
 
+    void sendOnNavigationButtonPressed(String id);
+
     @RestrictTo(RestrictTo.Scope.TESTS)
     TopBar getTopBar();
 }

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

@@ -19,7 +19,7 @@ public class ContainerLayout extends LinearLayout implements ReactContainer {
 
 	public ContainerLayout(Context context, IReactView reactView) {
 		super(context);
-		this.topBar = new TopBar(context);
+		this.topBar = new TopBar(context, this);
 		this.reactView = reactView;
         optionsPresenter = new OptionsPresenter(topBar, reactView.asView());
         initViews();
@@ -62,6 +62,11 @@ public class ContainerLayout extends LinearLayout implements ReactContainer {
     }
 
 	@Override
+    public void sendOnNavigationButtonPressed(String buttonId) {
+        reactView.sendOnNavigationButtonPressed(buttonId);
+    }
+
+    @Override
     @RestrictTo(RestrictTo.Scope.TESTS)
     public TopBar getTopBar() {
         return topBar;

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

@@ -0,0 +1,146 @@
+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.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.TextView;
+
+import com.reactnativenavigation.parse.Button;
+import com.reactnativenavigation.parse.NavigationOptions;
+import com.reactnativenavigation.utils.ImageUtils;
+import com.reactnativenavigation.utils.UiUtils;
+
+import java.util.ArrayList;
+
+public class TitleBarButton implements MenuItem.OnMenuItemClickListener {
+	private Toolbar toolbar;
+	private final Button button;
+	private Container container;
+	private Drawable icon;
+
+	TitleBarButton(Container container, Toolbar toolbar, Button button) {
+		this.container = container;
+		this.toolbar = toolbar;
+		this.button = button;
+	}
+
+	void addToMenu(Context context, final Menu menu) {
+		MenuItem menuItem = menu.add(button.title);
+		menuItem.setShowAsAction(button.showAsAction);
+		menuItem.setEnabled(button.disabled != NavigationOptions.BooleanOptions.True);
+		menuItem.setOnMenuItemClickListener(this);
+
+		if (hasIcon()) {
+			applyIcon(context, menuItem);
+		} else {
+			setTextColor();
+			setFontSize(menuItem);
+		}
+	}
+
+	void applyNavigationIcon(Context context) {
+		if (!hasIcon()) {
+			Log.w("RNN", "Left button needs to have an icon");
+			return;
+		}
+
+		ImageUtils.tryLoadIcon(context, button.icon, new ImageUtils.ImageLoadingListener() {
+			@Override
+			public void onComplete(@NonNull Drawable drawable) {
+				icon = drawable;
+				UiUtils.runOnMainThread(() -> {
+                    setIconColor();
+                    setNavigationClickListener();
+                    toolbar.setNavigationIcon(icon);
+                });
+			}
+
+			@Override
+			public void onError(Throwable error) {
+				//TODO: handle
+				error.printStackTrace();
+			}
+		});
+	}
+
+	private void applyIcon(Context context, final MenuItem menuItem) {
+		ImageUtils.tryLoadIcon(context, button.icon, new ImageUtils.ImageLoadingListener() {
+			@Override
+			public void onComplete(@NonNull Drawable drawable) {
+				icon = drawable;
+				UiUtils.runOnMainThread(() -> {
+                    menuItem.setIcon(icon);
+                    setIconColor();
+                });
+			}
+
+			@Override
+			public void onError(Throwable error) {
+				//TODO: handle
+				error.printStackTrace();
+			}
+		});
+	}
+
+	private void setIconColor() {
+		if (button.disabled == NavigationOptions.BooleanOptions.False || button.disabled == NavigationOptions.BooleanOptions.NoValue) {
+			UiUtils.tintDrawable(icon, button.buttonColor);
+			return;
+		}
+
+		if (button.disableIconTint == NavigationOptions.BooleanOptions.True) {
+			UiUtils.tintDrawable(icon, button.buttonColor);
+		} else {
+			UiUtils.tintDrawable(icon, Color.LTGRAY);
+		}
+	}
+
+	private void setTextColor() {
+		UiUtils.runOnPreDrawOnce(this.toolbar, () -> {
+            ArrayList<View> outViews = findActualTextViewInMenuByLabel();
+            setTextColorForFoundButtonViews(outViews);
+        });
+	}
+
+	private void setFontSize(MenuItem menuItem) {
+		SpannableString spanString = new SpannableString(button.title);
+		spanString.setSpan(new AbsoluteSizeSpan(button.buttonFontSize, true), 0, button.title.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
+		menuItem.setTitleCondensed(spanString);
+	}
+
+	private void setNavigationClickListener() {
+		toolbar.setNavigationOnClickListener(view -> container.sendOnNavigationButtonPressed(button.id));
+	}
+
+	@Override
+	public boolean onMenuItemClick(MenuItem menuItem) {
+		this.container.sendOnNavigationButtonPressed(button.id);
+		return true;
+	}
+
+	@NonNull
+	private ArrayList<View> findActualTextViewInMenuByLabel() {
+		ArrayList<View> outViews = new ArrayList<>();
+		this.toolbar.findViewsWithText(outViews, button.title, View.FIND_VIEWS_WITH_TEXT);
+		return outViews;
+	}
+
+	private void setTextColorForFoundButtonViews(ArrayList<View> buttons) {
+		for (View button : buttons) {
+			((TextView) button).setTextColor(this.button.buttonColor);
+		}
+	}
+
+	private boolean hasIcon() {
+		return button.icon != null;
+	}
+}

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

@@ -1,24 +1,33 @@
 package com.reactnativenavigation.views;
 
+import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.Typeface;
 import android.support.annotation.ColorInt;
 import android.support.annotation.Nullable;
 import android.support.design.widget.AppBarLayout;
 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.parse.Button;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsViewPager;
 
+import java.util.ArrayList;
+
+@SuppressLint("ViewConstructor")
 public class TopBar extends AppBarLayout {
 	private final Toolbar titleBar;
-	private TopTabs topTabs;
+    private Container container;
+    private TopTabs topTabs;
 
-    public TopBar(final Context context) {
+    public TopBar(final Context context, Container container) {
         super(context);
         titleBar = new Toolbar(context);
+        this.container = container;
         addView(titleBar);
     }
 
@@ -48,6 +57,11 @@ public class TopBar extends AppBarLayout {
 		}
 	}
 
+	public void setButtons(ArrayList<Button> leftButtons, ArrayList<Button> rightButtons) {
+		setLeftButtons(leftButtons);
+		setRightButtons(rightButtons);
+    }
+
 	public TextView getTitleTextView() {
 		return findTextView(titleBar);
 	}
@@ -71,6 +85,40 @@ public class TopBar extends AppBarLayout {
 		return null;
 	}
 
+	private void setLeftButtons(ArrayList<Button> leftButtons) {
+		if(leftButtons == null || 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(container, this.titleBar, button);
+		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(container, this.titleBar, button);
+			titleBarButton.addToMenu(getContext(), menu);
+       }
+    }
+
 	public Toolbar getTitleBar() {
 		return titleBar;
 	}

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

@@ -42,4 +42,9 @@ public class TopTab extends FrameLayout implements IReactView {
 	public void sendContainerStop() {
 		reactView.sendContainerStop();
 	}
+
+    @Override
+    public void sendOnNavigationButtonPressed(String buttonId) {
+        reactView.sendOnNavigationButtonPressed(buttonId);
+    }
 }

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

@@ -23,9 +23,9 @@ public class TopTabsLayout extends LinearLayout implements Container {
 
     public TopTabsLayout(Context context, List<TopTabController> tabs, TopTabsAdapter adapter) {
         super(context);
-        topBar = new TopBar(context);
-        optionsPresenter = new OptionsPresenter(topBar, viewPager);
+        topBar = new TopBar(context, this);
         viewPager = new TopTabsViewPager(context, tabs, adapter);
+        optionsPresenter = new OptionsPresenter(topBar, viewPager);
         initViews();
     }
 
@@ -41,6 +41,11 @@ public class TopTabsLayout extends LinearLayout implements Container {
         optionsPresenter.applyOptions(options);
     }
 
+    @Override
+    public void sendOnNavigationButtonPressed(String id) {
+        viewPager.sendOnNavigationButtonPressed(id);
+    }
+
     @Override
     @RestrictTo(RestrictTo.Scope.TESTS)
     public TopBar getTopBar() {

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

@@ -15,7 +15,7 @@ public class TestContainerLayout extends View implements ReactContainer {
 
     public TestContainerLayout(final Context context) {
 		super(context);
-        topBar = new TopBar(context);
+        topBar = new TopBar(context, this);
         optionsPresenter = new OptionsPresenter(topBar, new View(context));
     }
 
@@ -49,4 +49,9 @@ public class TestContainerLayout extends View implements ReactContainer {
     public void applyOptions(NavigationOptions options) {
         optionsPresenter.applyOptions(options);
     }
+
+    @Override
+    public void sendOnNavigationButtonPressed(String id) {
+
+    }
 }

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

@@ -0,0 +1,56 @@
+package com.reactnativenavigation.mocks;
+
+import android.content.Context;
+import android.view.View;
+
+import com.reactnativenavigation.parse.NavigationOptions;
+import com.reactnativenavigation.views.ReactContainer;
+import com.reactnativenavigation.views.TopBar;
+
+public class TestContainerView extends View implements ReactContainer {
+
+	private TopBar topBar;
+
+	public TestContainerView(final Context context) {
+		super(context);
+		topBar = new TopBar(context, this);
+
+	}
+
+	@Override
+	public boolean isReady() {
+		return false;
+	}
+
+	@Override
+	public View asView() {
+		return this;
+	}
+
+	@Override
+	public void destroy() {
+	}
+
+	@Override
+	public void sendContainerStart() {
+	}
+
+	@Override
+	public void sendContainerStop() {
+	}
+
+    @Override
+    public void applyOptions(NavigationOptions options) {
+
+    }
+
+    @Override
+    public void sendOnNavigationButtonPressed(String id) {
+
+    }
+
+    @Override
+    public TopBar getTopBar() {
+        return topBar;
+    }
+}

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

@@ -35,4 +35,9 @@ public class TopTabLayoutMock extends View implements ContainerViewController.IR
     public void sendContainerStop() {
 
     }
+
+    @Override
+    public void sendOnNavigationButtonPressed(String buttonId) {
+
+    }
 }

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

@@ -134,4 +134,4 @@ public class OptionsApplyingTest extends BaseTest {
 
 		assertThat(uut.getTopBar().getVisibility()).isEqualTo(View.GONE);
 	}
-}
+}

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

@@ -9,7 +9,8 @@ import static org.assertj.core.api.Java6Assertions.assertThat;
 public class TopBarTest extends BaseTest {
 	@Test
 	public void title() throws Exception {
-		TopBar topBar = new TopBar(newActivity());
+		//TODO:  fix null
+		TopBar topBar = new TopBar(newActivity(), null);
 		assertThat(topBar.getTitle()).isEmpty();
 
 		topBar.setTitle("new title");

lib/src/params/Button.js

@@ -3,13 +3,22 @@ class Button {
    * @property {String} id
    * @property {string} [testID]
    * @property {string} [title]
-   * @property {string} [color]
+   * @property {string} [buttonColor]
+   * @property {string} [showAsAction]
+   * @property {int} [buttonFontWeight]
+   * @property {boolean} [disableIconTint]
+   * @property {boolean} [disabled]
    */
   constructor(params) {
     this.id = params.id;
     this.testID = params.testID;
     this.title = params.title;
-    this.color = params.color;
+    this.buttonColor = params.buttonColor;
+    this.showAsAction = params.showAsAction;
+    this.buttonFontWeight = params.buttonFontWeight;
+    this.buttonFontSize = params.buttonFontSize;
+    this.disableIconTint = params.disableIconTint;
+    this.disabled = params.disabled;
   }
 }
 

lib/src/params/Button.test.js

@@ -4,7 +4,12 @@ const BUTTON = {
   id: 'myBtn',
   testID: 'BTN',
   title: 'My Button',
-  color: 'red'
+  buttonColor: 'red',
+  buttonFontSize: 16,
+  buttonFontWeight: 300,
+  showAsAction: 'never',
+  disableIconTint: true,
+  disabled: true
 };
 
 describe('Button', () => {
@@ -13,6 +18,11 @@ describe('Button', () => {
     expect(uut.id).toEqual('myBtn');
     expect(uut.testID).toEqual('BTN');
     expect(uut.title).toEqual('My Button');
-    expect(uut.color).toEqual('red');
+    expect(uut.buttonColor).toEqual('red');
+    expect(uut.showAsAction).toEqual('never');
+    expect(uut.buttonFontWeight).toEqual(300);
+    expect(uut.buttonFontSize).toEqual(16);
+    expect(uut.disableIconTint).toEqual(true);
+    expect(uut.disabled).toEqual(true);
   });
 });

lib/src/params/NavigationOptions.test.js

@@ -9,7 +9,7 @@ const RIGHT_BUTTONS = [
     id: 'myBtn',
     testID: 'BTN',
     title: 'My Button',
-    color: 'red'
+    buttonColor: 'red'
   }
 ];
 const LEFT_BUTTONS = [
@@ -17,7 +17,7 @@ const LEFT_BUTTONS = [
     id: 'myBtn',
     testID: 'BTN',
     title: 'My Button',
-    color: 'red'
+    buttonColor: 'red'
   }
 ];
 const NAVIGATION_OPTIONS = {

playground/src/containers/OptionsScreen.js

@@ -26,11 +26,13 @@ class OptionsScreen extends Component {
         id: BUTTON_ONE,
         testID: BUTTON_ONE,
         title: 'One',
+        buttonFontSize: 28,
         buttonColor: 'red'
       }],
       leftButtons: [{
         id: BUTTON_LEFT,
         testID: BUTTON_LEFT,
+        icon: require('../../img/navicon_add.png'),
         title: 'Left',
         buttonColor: 'purple'
       }]
@@ -73,13 +75,15 @@ class OptionsScreen extends Component {
           id: BUTTON_TWO,
           testID: BUTTON_TWO,
           title: 'Two',
-          // icon: require('../../img/navicon_add.png'),
-          // disableIconTint: true,
-          // disabled: true
+          icon: require('../../img/navicon_add.png'),
+          disableIconTint: true,
+          // disabled: true,
+          showAsAction: 'ifRoom',
           buttonColor: 'green',
           buttonFontSize: 28,
           buttonFontWeight: '800'
-        }]
+        }],
+        leftButtons: []
       });
     } else if (id === BUTTON_TWO) {
       Navigation.setOptions(this.props.containerId, {
@@ -88,6 +92,13 @@ class OptionsScreen extends Component {
           testID: BUTTON_ONE,
           title: 'One',
           buttonColor: 'red'
+        }],
+        leftButtons: [{
+          id: BUTTON_LEFT,
+          testID: BUTTON_LEFT,
+          icon: require('../../img/navicon_add.png'),
+          title: 'Left',
+          buttonColor: 'purple'
         }]
       });
     } else if (id === BUTTON_LEFT) {