Implement background in FlatShadowNode

Summary: @public Similar to a `DrawBorder` patch, this diff adds `DrawBackground` and implements `ViewProps.BACKGROUND_COLOR` property in `FlatShadowNode` with it.

Reviewed By: sriramramani

Differential Revision: D2564466

ReactAndroid/src/main/java/com/facebook/react/flat/DrawBackgroundColor.java

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+package com.facebook.react.flat;
+
+import android.graphics.Canvas;
+import android.graphics.Paint;
+
+/**
+ * Draws background for a FlatShadowNode as a solid rectangle.
+ */
+/* package */ final class DrawBackgroundColor extends AbstractDrawCommand {
+
+  private static final Paint PAINT = new Paint();
+
+  private final int mBackgroundColor;
+
+  /* package */ DrawBackgroundColor(int backgroundColor) {
+    mBackgroundColor = backgroundColor;
+  }
+
+  @Override
+  public void draw(Canvas canvas) {
+    PAINT.setColor(mBackgroundColor);
+    canvas.drawRect(getLeft(), getTop(), getRight(), getBottom(), PAINT);
+  }
+}

ReactAndroid/src/main/java/com/facebook/react/flat/FlatShadowNode.java

@@ -9,7 +9,11 @@
 
 package com.facebook.react.flat;
 
+import javax.annotation.Nullable;
+
 import com.facebook.react.uimanager.LayoutShadowNode;
+import com.facebook.react.uimanager.ReactProp;
+import com.facebook.react.uimanager.ViewProps;
 
 /**
  * FlatShadowNode is a base class for all shadow node used in FlatUIImplementation. It extends
@@ -17,6 +21,8 @@ import com.facebook.react.uimanager.LayoutShadowNode;
  */
 /* package */ class FlatShadowNode extends LayoutShadowNode {
 
+  private @Nullable DrawBackgroundColor mDrawBackground;
+
   /**
    * Collects DrawCommands produced by this FlatShadoNode.
    */
@@ -26,7 +32,20 @@ import com.facebook.react.uimanager.LayoutShadowNode;
       float top,
       float right,
       float bottom) {
-    // do nothing yet.
+    if (mDrawBackground != null) {
+      mDrawBackground = (DrawBackgroundColor) mDrawBackground.updateBoundsAndFreeze(
+          left,
+          top,
+          right,
+          bottom);
+      stateBuilder.addDrawCommand(mDrawBackground);
+    }
+  }
+
+  @ReactProp(name = ViewProps.BACKGROUND_COLOR)
+  public void setBackgroundColor(int backgroundColor) {
+    mDrawBackground = (backgroundColor == 0) ? null : new DrawBackgroundColor(backgroundColor);
+    invalidate();
   }
 
   /**

ReactAndroid/src/main/java/com/facebook/react/flat/RCTView.java

@@ -35,6 +35,7 @@ import com.facebook.react.uimanager.ViewProps;
     }
   }
 
+  @Override
   public void setBackgroundColor(int backgroundColor) {
     getMutableBorder().setBackgroundColor(backgroundColor);
   }

ReactAndroid/src/main/java/com/facebook/react/flat/RCTVirtualText.java

@@ -96,11 +96,23 @@ import com.facebook.react.uimanager.ViewProps;
     }
   }
 
-  @ReactProp(name = ViewProps.BACKGROUND_COLOR)
+  @Override
   public void setBackgroundColor(int backgroundColor) {
-    if (mFontStylingSpan.getBackgroundColor() != backgroundColor) {
-      getSpan().setBackgroundColor(backgroundColor);
-      notifyChanged(false);
+    if (isVirtual()) {
+      // for nested Text elements, we want to apply background color to the text only
+      // e.g. Hello <style backgroundColor=red>World</style>, "World" will have red background color
+      if (mFontStylingSpan.getBackgroundColor() != backgroundColor) {
+        getSpan().setBackgroundColor(backgroundColor);
+        notifyChanged(false);
+      }
+    } else {
+      // for top-level Text element, background needs to be applied for the entire shadow node
+      //
+      // For example: <Text style={flex:1}>Hello World</Text>
+      // "Hello World" may only occupy e.g. 200 pixels, but the node may be measured at e.g. 500px.
+      // In this case, we want background to be 500px wide as well, and this is exactly what
+      // FlatShadowNode does.
+      super.setBackgroundColor(backgroundColor);
     }
   }