diff --git a/ReactAndroid/src/main/java/com/facebook/react/flat/DrawBackgroundColor.java b/ReactAndroid/src/main/java/com/facebook/react/flat/DrawBackgroundColor.java
new file mode 100644
index 000000000..f04da77bc
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/ReactAndroid/src/main/java/com/facebook/react/flat/FlatShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/flat/FlatShadowNode.java
index 9820553ad..7623caf0b 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/flat/FlatShadowNode.java
+++ b/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();
}
/**
diff --git a/ReactAndroid/src/main/java/com/facebook/react/flat/RCTView.java b/ReactAndroid/src/main/java/com/facebook/react/flat/RCTView.java
index 83dd936fb..c2f071ef0 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/flat/RCTView.java
+++ b/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);
}
diff --git a/ReactAndroid/src/main/java/com/facebook/react/flat/RCTVirtualText.java b/ReactAndroid/src/main/java/com/facebook/react/flat/RCTVirtualText.java
index 95f28c98e..ec1a1ef1b 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/flat/RCTVirtualText.java
+++ b/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 , "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: Hello World
+ // "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);
}
}