Allow for styling of ToolbarAndroid's overflow icon

Summary: Fixes #2858.

Here's a screenshot of the custom overflow icon in action:
<img width="638" alt="overflow" src="https://cloud.githubusercontent.com/assets/1309177/10567090/693e395a-75ae-11e5-84cd-20b19149c620.png">
Closes https://github.com/facebook/react-native/pull/3497

Reviewed By: svcscm

Differential Revision: D2559787

Pulled By: foghina

fb-gh-sync-id: f188711ec094af3fa307722527f22aefff722e64

Examples/UIExplorer/ToolbarAndroidExample.android.js

@@ -101,6 +101,12 @@ var ToolbarAndroidExample = React.createClass({
             title="Bunny and Hawk"
             style={styles.toolbar} />
         </UIExplorerBlock>
+        <UIExplorerBlock title="Toolbar with custom overflowIcon">
+          <ToolbarAndroid
+            actions={toolbarActions}
+            overflowIcon={require('./bunny.png')}
+            style={styles.toolbar} />
+        </UIExplorerBlock>
       </UIExplorerPage>
     );
   },

Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js

@@ -103,6 +103,10 @@ var ToolbarAndroid = React.createClass({
      * Callback called when the icon is selected.
      */
     onIconClicked: ReactPropTypes.func,
+    /**
+     * Sets the overflow icon.
+     */
+    overflowIcon: optionalImageSource,
     /**
      * Sets the toolbar subtitle.
      */
@@ -135,6 +139,9 @@ var ToolbarAndroid = React.createClass({
     if (this.props.navIcon) {
       nativeProps.navIcon = resolveAssetSource(this.props.navIcon);
     }
+    if (this.props.overflowIcon) {
+      nativeProps.overflowIcon = resolveAssetSource(this.props.overflowIcon);
+    }
     if (this.props.actions) {
       nativeProps.actions = [];
       for (var i = 0; i < this.props.actions.length; i++) {
@@ -169,6 +176,7 @@ var toolbarAttributes = {
   actions: true,
   logo: true,
   navIcon: true,
+  overflowIcon: true,
   subtitle: true,
   subtitleColor: true,
   title: true,

ReactAndroid/src/main/java/com/facebook/react/views/toolbar/ReactToolbar.java

@@ -6,6 +6,7 @@ import javax.annotation.Nullable;
 
 import android.content.Context;
 import android.graphics.drawable.Animatable;
+import android.graphics.drawable.Drawable;
 import android.net.Uri;
 import android.support.v7.widget.Toolbar;
 import android.view.Menu;
@@ -36,6 +37,7 @@ public class ReactToolbar extends Toolbar {
 
   private final DraweeHolder mLogoHolder;
   private final DraweeHolder mNavIconHolder;
+  private final DraweeHolder mOverflowIconHolder;
   private final MultiDraweeHolder<GenericDraweeHierarchy> mActionsHolder =
       new MultiDraweeHolder<>();
 
@@ -69,6 +71,21 @@ public class ReactToolbar extends Toolbar {
         }
       };
 
+  private final ControllerListener<ImageInfo> mOverflowIconControllerListener =
+      new BaseControllerListener<ImageInfo>() {
+        @Override
+        public void onFinalImageSet(
+            String id,
+            @Nullable final ImageInfo imageInfo,
+            @Nullable Animatable animatable) {
+          if (imageInfo != null) {
+            final DrawableWithIntrinsicSize overflowIconDrawable =
+                new DrawableWithIntrinsicSize(mOverflowIconHolder.getTopLevelDrawable(), imageInfo);
+            setOverflowIcon(overflowIconDrawable);
+          }
+        }
+      };
+
   private static class ActionIconControllerListener extends BaseControllerListener<ImageInfo> {
     private final MenuItem mItem;
     private final DraweeHolder mHolder;
@@ -94,6 +111,7 @@ public class ReactToolbar extends Toolbar {
 
     mLogoHolder = DraweeHolder.create(createDraweeHierarchy(), context);
     mNavIconHolder = DraweeHolder.create(createDraweeHierarchy(), context);
+    mOverflowIconHolder = DraweeHolder.create(createDraweeHierarchy(), context);
   }
 
   private final Runnable mLayoutRunnable = new Runnable() {
@@ -136,19 +154,20 @@ public class ReactToolbar extends Toolbar {
   @Override
   public void onFinishTemporaryDetach() {
     super.onFinishTemporaryDetach();
-    mLogoHolder.onAttach();
-    mNavIconHolder.onAttach();
+    attachDraweeHolders();
   }
 
   private void detachDraweeHolders() {
     mLogoHolder.onDetach();
     mNavIconHolder.onDetach();
+    mOverflowIconHolder.onDetach();
     mActionsHolder.onDetach();
   }
 
   private void attachDraweeHolders() {
     mLogoHolder.onAttach();
     mNavIconHolder.onAttach();
+    mOverflowIconHolder.onAttach();
     mActionsHolder.onAttach();
   }
 
@@ -184,6 +203,22 @@ public class ReactToolbar extends Toolbar {
     }
   }
 
+  /* package */ void setOverflowIconSource(@Nullable ReadableMap source) {
+    String uri = source != null ? source.getString("uri") : null;
+    if (uri == null) {
+      setOverflowIcon(null);
+    } else if (uri.startsWith("http://") || uri.startsWith("https://")) {
+      DraweeController controller = Fresco.newDraweeControllerBuilder()
+          .setUri(Uri.parse(uri))
+          .setControllerListener(mOverflowIconControllerListener)
+          .setOldController(mOverflowIconHolder.getController())
+          .build();
+      mOverflowIconHolder.setController(controller);
+    } else {
+      setOverflowIcon(getDrawableByName(uri));
+    }
+  }
+
   /* package */ void setActions(@Nullable ReadableArray actions) {
     Menu menu = getMenu();
     menu.clear();
@@ -247,4 +282,8 @@ public class ReactToolbar extends Toolbar {
         getContext().getPackageName());
   }
 
+  private Drawable getDrawableByName(String name) {
+    return getResources().getDrawable(getDrawableResourceByName(name));
+  }
+
 }

ReactAndroid/src/main/java/com/facebook/react/views/toolbar/ReactToolbarManager.java

@@ -59,6 +59,11 @@ public class ReactToolbarManager extends ViewGroupManager<ReactToolbar> {
     view.setNavIconSource(navIcon);
   }
 
+  @ReactProp(name = "overflowIcon")
+  public void setOverflowIcon(ReactToolbar view, @Nullable ReadableMap overflowIcon) {
+    view.setOverflowIconSource(overflowIcon);
+  }
+
   @ReactProp(name = "subtitle")
   public void setSubtitle(ReactToolbar view, @Nullable String subtitle) {
     view.setSubtitle(subtitle);