Add tint color to inline icons

Reviewed By: achen1

Differential Revision: D7625378

fbshipit-source-id: a60cf79f32f2d4091dbddebd65af4880ebb8c2c7

ReactAndroid/src/main/java/com/facebook/react/views/text/frescosupport/FrescoBasedReactTextInlineImageShadowNode.java

@@ -41,6 +41,7 @@ public class FrescoBasedReactTextInlineImageShadowNode extends ReactTextInlineIm
   private final @Nullable Object mCallerContext;
   private float mWidth = YogaConstants.UNDEFINED;
   private float mHeight = YogaConstants.UNDEFINED;
+  private int mTintColor = 0;
 
   public FrescoBasedReactTextInlineImageShadowNode(
     AbstractDraweeControllerBuilder draweeControllerBuilder,
@@ -54,6 +55,7 @@ private FrescoBasedReactTextInlineImageShadowNode(FrescoBasedReactTextInlineImag
     mHeaders = node.mHeaders; // mHeaders is immutable
     mWidth = node.mWidth;
     mHeight = node.mHeight;
+    mTintColor = node.mTintColor;
     mDraweeControllerBuilder = node.mDraweeControllerBuilder;
     mCallerContext = node.mCallerContext;
     mUri = node.mUri;
@@ -94,6 +96,11 @@ public void setHeaders(ReadableMap headers) {
     mHeaders = headers;
   }
 
+  @ReactProp(name = "tintColor")
+  public void setTintColor(int tintColor) {
+    mTintColor = tintColor;
+  }
+
   /**
    * Besides width/height, all other layout props on inline images are ignored
    */
@@ -116,7 +123,7 @@ public void setHeight(Dynamic height) {
           "Inline images must not have percentage based height");
     }
   }
-
+  
   public @Nullable Uri getUri() {
     return mUri;
   }
@@ -155,6 +162,7 @@ public TextInlineImageSpan buildInlineImageSpan() {
       resources,
       height,
       width,
+      mTintColor,
       getUri(),
       getHeaders(),
       getDraweeControllerBuilder(),

ReactAndroid/src/main/java/com/facebook/react/views/text/frescosupport/FrescoBasedReactTextInlineImageSpan.java

@@ -7,6 +7,8 @@
 
 package com.facebook.react.views.text.frescosupport;
 
+import android.graphics.Color;
+import android.graphics.PorterDuff;
 import javax.annotation.Nullable;
 
 import android.content.res.Resources;
@@ -46,6 +48,7 @@ public class FrescoBasedReactTextInlineImageSpan extends TextInlineImageSpan {
   private final @Nullable Object mCallerContext;
 
   private int mHeight;
+  private int mTintColor;
   private Uri mUri;
   private int mWidth;
   private ReadableMap mHeaders;
@@ -56,6 +59,7 @@ public FrescoBasedReactTextInlineImageSpan(
       Resources resources,
       int height,
       int width,
+      int tintColor,
       @Nullable Uri uri,
       ReadableMap headers,
       AbstractDraweeControllerBuilder draweeControllerBuilder,
@@ -68,6 +72,7 @@ public FrescoBasedReactTextInlineImageSpan(
     mCallerContext = callerContext;
 
     mHeight = height;
+    mTintColor = tintColor;
     mWidth = width;
     mUri = (uri != null) ? uri : Uri.EMPTY;
     mHeaders = headers;
@@ -143,7 +148,11 @@ public void draw(
 
       mDrawable = mDraweeHolder.getTopLevelDrawable();
       mDrawable.setBounds(0, 0, mWidth, mHeight);
+      if(mTintColor != 0) {
+        mDrawable.setColorFilter(mTintColor, PorterDuff.Mode.SRC_IN);
+      }
       mDrawable.setCallback(mTextView);
+
     }
 
     // NOTE: This drawing code is copied from DynamicDrawableSpan