react-native-tvos 0.75.2-0rc0 → 0.76.0-0rc0

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManager.java

@@ -17,7 +17,7 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.common.mapbuffer.MapBuffer;
-import com.facebook.react.config.ReactFeatureFlags;
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
 import com.facebook.react.touch.JSResponderHandler;
 import com.facebook.react.touch.ReactInterceptingViewGroup;
 import com.facebook.react.uimanager.annotations.ReactProp;
@@ -56,16 +56,22 @@ public abstract class ViewManager<T extends View, C extends ReactShadowNode>
 
   /** Call in constructor of concrete ViewManager class to enable. */
   protected void setupViewRecycling() {
-    if (ReactFeatureFlags.enableViewRecycling) {
+    if (ReactNativeFeatureFlags.enableViewRecycling()) {
       mRecyclableViews = new HashMap<>();
     }
   }
 
-  private @Nullable Stack<T> getRecyclableViewStack(int surfaceId) {
+  /**
+   * Returns the stack of recycled views for the surface, if enabled
+   *
+   * @param create Whether to create a new stack if not found for the {@code surfaceId}. Should be
+   *     {@code false} if it's possible the surface has been stopped.
+   */
+  private @Nullable Stack<T> getRecyclableViewStack(int surfaceId, boolean create) {
     if (mRecyclableViews == null) {
       return null;
     }
-    if (!mRecyclableViews.containsKey(surfaceId)) {
+    if (create && !mRecyclableViews.containsKey(surfaceId)) {
       mRecyclableViews.put(surfaceId, new Stack<T>());
     }
     return mRecyclableViews.get(surfaceId);
@@ -177,7 +183,7 @@ public abstract class ViewManager<T extends View, C extends ReactShadowNode>
       @Nullable ReactStylesDiffMap initialProps,
       @Nullable StateWrapper stateWrapper) {
     T view = null;
-    @Nullable Stack<T> recyclableViews = getRecyclableViewStack(reactContext.getSurfaceId());
+    @Nullable Stack<T> recyclableViews = getRecyclableViewStack(reactContext.getSurfaceId(), true);
     if (recyclableViews != null && !recyclableViews.empty()) {
       view = recycleView(reactContext, recyclableViews.pop());
     } else {
@@ -224,18 +230,22 @@ public abstract class ViewManager<T extends View, C extends ReactShadowNode>
     // View recycling
     ThemedReactContext themedReactContext = (ThemedReactContext) viewContext;
     int surfaceId = themedReactContext.getSurfaceId();
-    @Nullable Stack<T> recyclableViews = getRecyclableViewStack(surfaceId);
+    @Nullable Stack<T> recyclableViews = getRecyclableViewStack(surfaceId, false);
     if (recyclableViews != null) {
-      recyclableViews.push(prepareToRecycleView(themedReactContext, view));
+      T recyclableView = prepareToRecycleView(themedReactContext, view);
+      if (recyclableView != null) {
+        recyclableViews.push(recyclableView);
+      }
     }
   }
 
   /**
    * Called when a View is removed from the hierarchy. This should be used to reset any properties.
+   *
+   * @return {@code view} if it was properly recycled, or {@code null} if it could not be recycled
    */
-  protected T prepareToRecycleView(@NonNull ThemedReactContext reactContext, @NonNull T view) {
-    return view;
-  }
+  protected abstract @Nullable T prepareToRecycleView(
+      @NonNull ThemedReactContext reactContext, @NonNull T view);
 
   /** Called when a View is going to be reused. */
   protected T recycleView(@NonNull ThemedReactContext reactContext, @NonNull T view) {

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManagerDelegate.kt

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager
+
+import android.view.View
+import com.facebook.react.bridge.ReadableArray
+
+/**
+ * This is an interface that must be implemented by classes that wish to take over the
+ * responsibility of setting properties of all views managed by the view manager and executing view
+ * commands.
+ *
+ * @param <T> the type of the view supported by this delegate </T>
+ */
+public interface ViewManagerDelegate<T : View?> {
+  public fun setProperty(view: T, propName: String, value: Any?)
+
+  public fun receiveCommand(view: T, commandName: String, args: ReadableArray?)
+}

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt

@@ -74,6 +74,7 @@ public object ViewProps {
   // Props that affect more than just layout
   public const val ENABLED: String = "enabled"
   public const val BACKGROUND_COLOR: String = "backgroundColor"
+  public const val BACKGROUND_IMAGE: String = "experimental_backgroundImage"
   public const val FOREGROUND_COLOR: String = "foregroundColor"
   public const val COLOR: String = "color"
   public const val FONT_SIZE: String = "fontSize"
@@ -135,7 +136,9 @@ public object ViewProps {
   public const val BORDER_START_COLOR: String = "borderStartColor"
   public const val BORDER_END_COLOR: String = "borderEndColor"
   public const val ON_LAYOUT: String = "onLayout"
+  public const val BOX_SHADOW: String = "experimental_boxShadow"
   public const val FILTER: String = "experimental_filter"
+  public const val MIX_BLEND_MODE: String = "experimental_mixBlendMode"
   public const val TRANSFORM: String = "transform"
   public const val TRANSFORM_ORIGIN: String = "transformOrigin"
   public const val ELEVATION: String = "elevation"

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/BoxShadowBorderRadius.kt

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager.drawable
+
+import kotlin.math.abs
+import kotlin.math.pow
+
+/**
+ * Manipulates a corner radius of the shadow-shape according to the radius of the original
+ * background, and the applied spread (negative, if inset). See algorithm at
+ * https://drafts.csswg.org/css-backgrounds/#shadow-shape
+ */
+internal fun adjustRadiusForSpread(
+    radius: Float,
+    spread: Float,
+): Float {
+  val spreadMultiplier =
+      if (radius < abs(spread)) {
+        1 + (radius / abs(spread) - 1).pow(3)
+      } else {
+        1f
+      }
+  return (radius + spread * spreadMultiplier).coerceAtLeast(0f)
+}

package/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java

@@ -12,30 +12,39 @@ import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.ColorFilter;
+import android.graphics.ComposeShader;
 import android.graphics.DashPathEffect;
 import android.graphics.Outline;
 import android.graphics.Paint;
 import android.graphics.Path;
 import android.graphics.PathEffect;
 import android.graphics.PointF;
+import android.graphics.PorterDuff;
 import android.graphics.Rect;
 import android.graphics.RectF;
 import android.graphics.Region;
+import android.graphics.Shader;
 import android.graphics.drawable.Drawable;
 import android.view.View;
 import androidx.annotation.Nullable;
 import androidx.core.graphics.ColorUtils;
 import androidx.core.util.Preconditions;
 import com.facebook.infer.annotation.Nullsafe;
+import com.facebook.react.common.annotations.UnstableReactNativeAPI;
 import com.facebook.react.common.annotations.VisibleForTesting;
 import com.facebook.react.modules.i18nmanager.I18nUtil;
 import com.facebook.react.uimanager.FloatUtil;
 import com.facebook.react.uimanager.LengthPercentage;
 import com.facebook.react.uimanager.LengthPercentageType;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.Spacing;
+import com.facebook.react.uimanager.style.BackgroundImageLayer;
 import com.facebook.react.uimanager.style.BorderRadiusProp;
 import com.facebook.react.uimanager.style.BorderRadiusStyle;
+import com.facebook.react.uimanager.style.BorderStyle;
 import com.facebook.react.uimanager.style.ComputedBorderRadius;
+import com.facebook.react.uimanager.style.CornerRadii;
+import java.util.List;
 import java.util.Locale;
 import java.util.Objects;
 
@@ -51,6 +60,7 @@ import java.util.Objects;
  * have a rectangular borders we allocate {@code mBorderWidthResult} and similar. When only
  * background color is set we won't allocate any extra/unnecessary objects.
  */
+@UnstableReactNativeAPI
 @Nullsafe(Nullsafe.Mode.LOCAL)
 public class CSSBackgroundDrawable extends Drawable {
 
@@ -62,29 +72,23 @@ public class CSSBackgroundDrawable extends Drawable {
   // 0 == 0x00000000, all bits set to 0.
   private static final int ALL_BITS_UNSET = 0;
 
-  private enum BorderStyle {
-    SOLID,
-    DASHED,
-    DOTTED;
+  private static @Nullable PathEffect getPathEffect(BorderStyle style, float borderWidth) {
+    switch (style) {
+      case SOLID:
+        return null;
 
-    public static @Nullable PathEffect getPathEffect(BorderStyle style, float borderWidth) {
-      switch (style) {
-        case SOLID:
-          return null;
+      case DASHED:
+        return new DashPathEffect(
+            new float[] {borderWidth * 3, borderWidth * 3, borderWidth * 3, borderWidth * 3}, 0);
 
-        case DASHED:
-          return new DashPathEffect(
-              new float[] {borderWidth * 3, borderWidth * 3, borderWidth * 3, borderWidth * 3}, 0);
+      case DOTTED:
+        return new DashPathEffect(
+            new float[] {borderWidth, borderWidth, borderWidth, borderWidth}, 0);
 
-        case DOTTED:
-          return new DashPathEffect(
-              new float[] {borderWidth, borderWidth, borderWidth, borderWidth}, 0);
-
-        default:
-          return null;
-      }
+      default:
+        return null;
     }
-  };
+  }
 
   /* Value at Spacing.ALL index used for rounded borders, whole array used by rectangular borders */
   private @Nullable Spacing mBorderWidth;
@@ -112,6 +116,7 @@ public class CSSBackgroundDrawable extends Drawable {
   /* Used by all types of background and for drawing borders */
   private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
   private int mColor = Color.TRANSPARENT;
+  private @Nullable List<BackgroundImageLayer> mBackgroundImageLayers = null;
   private int mAlpha = 255;
 
   // There is a small gap between the edges of adjacent paths
@@ -219,9 +224,12 @@ public class CSSBackgroundDrawable extends Drawable {
     }
   }
 
-  public void setBorderColor(int position, float rgb, float alpha) {
-    this.setBorderRGB(position, rgb);
-    this.setBorderAlpha(position, alpha);
+  public void setBorderColor(int position, @Nullable Integer color) {
+    float rgbComponent = color == null ? Float.NaN : (float) ((int) color & 0x00FFFFFF);
+    float alphaComponent = color == null ? Float.NaN : (float) ((int) color >>> 24);
+
+    this.setBorderRGB(position, rgbComponent);
+    this.setBorderAlpha(position, alphaComponent);
     mNeedUpdatePathForBorderRadius = true;
   }
 
@@ -250,6 +258,10 @@ public class CSSBackgroundDrawable extends Drawable {
   public void setBorderStyle(@Nullable String style) {
     BorderStyle borderStyle =
         style == null ? null : BorderStyle.valueOf(style.toUpperCase(Locale.US));
+    setBorderStyle(borderStyle);
+  }
+
+  public void setBorderStyle(@Nullable BorderStyle borderStyle) {
     if (mBorderStyle != borderStyle) {
       mBorderStyle = borderStyle;
       mNeedUpdatePathForBorderRadius = true;
@@ -257,9 +269,14 @@ public class CSSBackgroundDrawable extends Drawable {
     }
   }
 
+  public @Nullable BorderStyle getBorderStyle() {
+    return mBorderStyle;
+  }
+
   /**
    * @deprecated Use {@link #setBorderRadius(BorderRadiusProp, LengthPercentage)} instead.
    */
+  @Deprecated(since = "0.75.0", forRemoval = true)
   public void setRadius(float radius) {
     @Nullable Float boxedRadius = Float.isNaN(radius) ? null : Float.valueOf(radius);
     if (boxedRadius == null) {
@@ -274,11 +291,13 @@ public class CSSBackgroundDrawable extends Drawable {
   /**
    * @deprecated Use {@link #setBorderRadius(BorderRadiusProp, LengthPercentage)} instead.
    */
+  @Deprecated(since = "0.75.0", forRemoval = true)
   public void setRadius(float radius, int position) {
     @Nullable Float boxedRadius = Float.isNaN(radius) ? null : Float.valueOf(radius);
 
     if (boxedRadius == null) {
       mBorderRadius.set(BorderRadiusProp.values()[position], null);
+      invalidateSelf();
     } else {
       setBorderRadius(
           BorderRadiusProp.values()[position],
@@ -302,6 +321,15 @@ public class CSSBackgroundDrawable extends Drawable {
     return mBorderRadius;
   }
 
+  // Here, "inner" refers to the border radius on the inside of the border. So
+  // it ends up being the "outer" border radius inset by the respective width.
+  public float getInnerBorderRadius(float computedRadius, float borderWidth) {
+    return Math.max(computedRadius - borderWidth, 0);
+  }
+
+  // TODO: This API is unsafe and should be removed when
+  // BackgroundStyleApplicator is rolled out
+  @Deprecated(forRemoval = true, since = "0.76.0")
   public ComputedBorderRadius getComputedBorderRadius() {
     return mComputedBorderRadius;
   }
@@ -311,6 +339,11 @@ public class CSSBackgroundDrawable extends Drawable {
     invalidateSelf();
   }
 
+  public void setBackgroundImage(@Nullable List<BackgroundImageLayer> backgroundImageLayers) {
+    mBackgroundImageLayers = backgroundImageLayers;
+    invalidateSelf();
+  }
+
   @VisibleForTesting
   public int getColor() {
     return mColor;
@@ -360,12 +393,19 @@ public class CSSBackgroundDrawable extends Drawable {
 
     // Draws the View without its border first (with background color fill)
     int useColor = ColorUtils.setAlphaComponent(mColor, getOpacity());
-    if (Color.alpha(useColor) != 0) { // color is not transparent
+    if (Color.alpha(useColor) != 0) {
       mPaint.setColor(useColor);
       mPaint.setStyle(Paint.Style.FILL);
       canvas.drawPath(Preconditions.checkNotNull(mBackgroundColorRenderPath), mPaint);
     }
 
+    if (mBackgroundImageLayers != null && !mBackgroundImageLayers.isEmpty()) {
+      mPaint.setShader(getBackgroundImageShader());
+      mPaint.setStyle(Paint.Style.FILL);
+      canvas.drawPath(Preconditions.checkNotNull(mBackgroundColorRenderPath), mPaint);
+      mPaint.setShader(null);
+    }
+
     final RectF borderWidth = getDirectionAwareBorderInsets();
     int colorLeft = getBorderColor(Spacing.LEFT);
     int colorTop = getBorderColor(Spacing.TOP);
@@ -605,6 +645,7 @@ public class CSSBackgroundDrawable extends Drawable {
     }
 
     // Clip border ONLY if its color is non transparent
+    float pathAdjustment = 0f;
     if (Color.alpha(colorLeft) != 0
         && Color.alpha(colorTop) != 0
         && Color.alpha(colorRight) != 0
@@ -615,6 +656,10 @@ public class CSSBackgroundDrawable extends Drawable {
       mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom;
       mInnerClipTempRectForBorderRadius.left += borderWidth.left;
       mInnerClipTempRectForBorderRadius.right -= borderWidth.right;
+
+      // only close gap between border and main path if we draw the border, otherwise
+      // we wind up pixelating small pixel-radius curves
+      pathAdjustment = mGapBetweenPaths;
     }
 
     mTempRectForCenterDrawPath.top += borderWidth.top * 0.5f;
@@ -626,21 +671,29 @@ public class CSSBackgroundDrawable extends Drawable {
         mBorderRadius.resolve(
             getLayoutDirection(),
             mContext,
-            mOuterClipTempRectForBorderRadius.width(),
-            mOuterClipTempRectForBorderRadius.height());
-    float topLeftRadius = mComputedBorderRadius.getTopLeft();
-    float topRightRadius = mComputedBorderRadius.getTopRight();
-    float bottomLeftRadius = mComputedBorderRadius.getBottomLeft();
-    float bottomRightRadius = mComputedBorderRadius.getBottomRight();
-
-    final float innerTopLeftRadiusX = Math.max(topLeftRadius - borderWidth.left, 0);
-    final float innerTopLeftRadiusY = Math.max(topLeftRadius - borderWidth.top, 0);
-    final float innerTopRightRadiusX = Math.max(topRightRadius - borderWidth.right, 0);
-    final float innerTopRightRadiusY = Math.max(topRightRadius - borderWidth.top, 0);
-    final float innerBottomRightRadiusX = Math.max(bottomRightRadius - borderWidth.right, 0);
-    final float innerBottomRightRadiusY = Math.max(bottomRightRadius - borderWidth.bottom, 0);
-    final float innerBottomLeftRadiusX = Math.max(bottomLeftRadius - borderWidth.left, 0);
-    final float innerBottomLeftRadiusY = Math.max(bottomLeftRadius - borderWidth.bottom, 0);
+            PixelUtil.toDIPFromPixel(mOuterClipTempRectForBorderRadius.width()),
+            PixelUtil.toDIPFromPixel(mOuterClipTempRectForBorderRadius.height()));
+    CornerRadii topLeftRadius = mComputedBorderRadius.getTopLeft().toPixelFromDIP();
+    CornerRadii topRightRadius = mComputedBorderRadius.getTopRight().toPixelFromDIP();
+    CornerRadii bottomLeftRadius = mComputedBorderRadius.getBottomLeft().toPixelFromDIP();
+    CornerRadii bottomRightRadius = mComputedBorderRadius.getBottomRight().toPixelFromDIP();
+
+    final float innerTopLeftRadiusX =
+        getInnerBorderRadius(topLeftRadius.getHorizontal(), borderWidth.left);
+    final float innerTopLeftRadiusY =
+        getInnerBorderRadius(topLeftRadius.getVertical(), borderWidth.top);
+    final float innerTopRightRadiusX =
+        getInnerBorderRadius(topRightRadius.getHorizontal(), borderWidth.right);
+    final float innerTopRightRadiusY =
+        getInnerBorderRadius(topRightRadius.getVertical(), borderWidth.top);
+    final float innerBottomRightRadiusX =
+        getInnerBorderRadius(bottomRightRadius.getHorizontal(), borderWidth.right);
+    final float innerBottomRightRadiusY =
+        getInnerBorderRadius(bottomRightRadius.getVertical(), borderWidth.bottom);
+    final float innerBottomLeftRadiusX =
+        getInnerBorderRadius(bottomLeftRadius.getHorizontal(), borderWidth.left);
+    final float innerBottomLeftRadiusY =
+        getInnerBorderRadius(bottomLeftRadius.getVertical(), borderWidth.bottom);
 
     mInnerClipPathForBorderRadius.addRoundRect(
         mInnerClipTempRectForBorderRadius,
@@ -661,10 +714,10 @@ public class CSSBackgroundDrawable extends Drawable {
     // (mInnerClipTempRectForBorderRadius), ensuring the border can be
     // drawn on top without the gap.
     mBackgroundColorRenderPath.addRoundRect(
-        mInnerClipTempRectForBorderRadius.left - mGapBetweenPaths,
-        mInnerClipTempRectForBorderRadius.top - mGapBetweenPaths,
-        mInnerClipTempRectForBorderRadius.right + mGapBetweenPaths,
-        mInnerClipTempRectForBorderRadius.bottom + mGapBetweenPaths,
+        mInnerClipTempRectForBorderRadius.left - pathAdjustment,
+        mInnerClipTempRectForBorderRadius.top - pathAdjustment,
+        mInnerClipTempRectForBorderRadius.right + pathAdjustment,
+        mInnerClipTempRectForBorderRadius.bottom + pathAdjustment,
         new float[] {
           innerTopLeftRadiusX,
           innerTopLeftRadiusY,
@@ -680,14 +733,14 @@ public class CSSBackgroundDrawable extends Drawable {
     mOuterClipPathForBorderRadius.addRoundRect(
         mOuterClipTempRectForBorderRadius,
         new float[] {
-          topLeftRadius,
-          topLeftRadius,
-          topRightRadius,
-          topRightRadius,
-          bottomRightRadius,
-          bottomRightRadius,
-          bottomLeftRadius,
-          bottomLeftRadius
+          topLeftRadius.getHorizontal(),
+          topLeftRadius.getVertical(),
+          topRightRadius.getHorizontal(),
+          topRightRadius.getVertical(),
+          bottomRightRadius.getHorizontal(),
+          bottomRightRadius.getVertical(),
+          bottomLeftRadius.getHorizontal(),
+          bottomLeftRadius.getVertical()
         },
         Path.Direction.CW);
 
@@ -700,44 +753,28 @@ public class CSSBackgroundDrawable extends Drawable {
     mPathForBorderRadiusOutline.addRoundRect(
         mTempRectForBorderRadiusOutline,
         new float[] {
-          topLeftRadius + extraRadiusForOutline,
-          topLeftRadius + extraRadiusForOutline,
-          topRightRadius + extraRadiusForOutline,
-          topRightRadius + extraRadiusForOutline,
-          bottomRightRadius + extraRadiusForOutline,
-          bottomRightRadius + extraRadiusForOutline,
-          bottomLeftRadius + extraRadiusForOutline,
-          bottomLeftRadius + extraRadiusForOutline
+          topLeftRadius.getHorizontal() + extraRadiusForOutline,
+          topLeftRadius.getVertical() + extraRadiusForOutline,
+          topRightRadius.getHorizontal() + extraRadiusForOutline,
+          topRightRadius.getVertical() + extraRadiusForOutline,
+          bottomRightRadius.getHorizontal() + extraRadiusForOutline,
+          bottomRightRadius.getVertical() + extraRadiusForOutline,
+          bottomLeftRadius.getHorizontal() + extraRadiusForOutline,
+          bottomLeftRadius.getVertical() + extraRadiusForOutline
         },
         Path.Direction.CW);
 
     mCenterDrawPath.addRoundRect(
         mTempRectForCenterDrawPath,
         new float[] {
-          Math.max(
-              topLeftRadius - borderWidth.left * 0.5f,
-              (borderWidth.left > 0.0f) ? (topLeftRadius / borderWidth.left) : 0.0f),
-          Math.max(
-              topLeftRadius - borderWidth.top * 0.5f,
-              (borderWidth.top > 0.0f) ? (topLeftRadius / borderWidth.top) : 0.0f),
-          Math.max(
-              topRightRadius - borderWidth.right * 0.5f,
-              (borderWidth.right > 0.0f) ? (topRightRadius / borderWidth.right) : 0.0f),
-          Math.max(
-              topRightRadius - borderWidth.top * 0.5f,
-              (borderWidth.top > 0.0f) ? (topRightRadius / borderWidth.top) : 0.0f),
-          Math.max(
-              bottomRightRadius - borderWidth.right * 0.5f,
-              (borderWidth.right > 0.0f) ? (bottomRightRadius / borderWidth.right) : 0.0f),
-          Math.max(
-              bottomRightRadius - borderWidth.bottom * 0.5f,
-              (borderWidth.bottom > 0.0f) ? (bottomRightRadius / borderWidth.bottom) : 0.0f),
-          Math.max(
-              bottomLeftRadius - borderWidth.left * 0.5f,
-              (borderWidth.left > 0.0f) ? (bottomLeftRadius / borderWidth.left) : 0.0f),
-          Math.max(
-              bottomLeftRadius - borderWidth.bottom * 0.5f,
-              (borderWidth.bottom > 0.0f) ? (bottomLeftRadius / borderWidth.bottom) : 0.0f)
+          topLeftRadius.getHorizontal() - borderWidth.left * 0.5f,
+          topLeftRadius.getVertical() - borderWidth.top * 0.5f,
+          topRightRadius.getHorizontal() - borderWidth.right * 0.5f,
+          topRightRadius.getVertical() - borderWidth.top * 0.5f,
+          bottomRightRadius.getHorizontal() - borderWidth.right * 0.5f,
+          bottomRightRadius.getVertical() - borderWidth.bottom * 0.5f,
+          bottomLeftRadius.getHorizontal() - borderWidth.left * 0.5f,
+          bottomLeftRadius.getVertical() - borderWidth.bottom * 0.5f,
         },
         Path.Direction.CW);
 
@@ -1005,14 +1042,23 @@ public class CSSBackgroundDrawable extends Drawable {
   }
 
   public float getBorderWidthOrDefaultTo(final float defaultValue, final int spacingType) {
-    if (mBorderWidth == null) {
+    @Nullable Float width = getBorderWidth(spacingType);
+    if (width == null) {
       return defaultValue;
     }
 
+    return width;
+  }
+
+  public @Nullable Float getBorderWidth(int spacingType) {
+    if (mBorderWidth == null) {
+      return null;
+    }
+
     final float width = mBorderWidth.getRaw(spacingType);
 
     if (Float.isNaN(width)) {
-      return defaultValue;
+      return null;
     }
 
     return width;
@@ -1022,7 +1068,7 @@ public class CSSBackgroundDrawable extends Drawable {
   private void updatePathEffect() {
     // Used for rounded border and rounded background
     PathEffect mPathEffectForBorderStyle =
-        mBorderStyle != null ? BorderStyle.getPathEffect(mBorderStyle, getFullBorderWidth()) : null;
+        mBorderStyle != null ? getPathEffect(mBorderStyle, getFullBorderWidth()) : null;
 
     mPaint.setPathEffect(mPathEffectForBorderStyle);
   }
@@ -1030,7 +1076,7 @@ public class CSSBackgroundDrawable extends Drawable {
   private void updatePathEffect(int borderWidth) {
     PathEffect pathEffectForBorderStyle = null;
     if (mBorderStyle != null) {
-      pathEffectForBorderStyle = BorderStyle.getPathEffect(mBorderStyle, borderWidth);
+      pathEffectForBorderStyle = getPathEffect(mBorderStyle, borderWidth);
     }
     mPaint.setPathEffect(pathEffectForBorderStyle);
   }
@@ -1077,11 +1123,17 @@ public class CSSBackgroundDrawable extends Drawable {
     mPaint.setStyle(Paint.Style.FILL);
 
     int useColor = multiplyColorAlpha(mColor, mAlpha);
-    if (Color.alpha(useColor) != 0) { // color is not transparent
+    if (Color.alpha(useColor) != 0) {
       mPaint.setColor(useColor);
       canvas.drawRect(getBounds(), mPaint);
     }
 
+    if (mBackgroundImageLayers != null && !mBackgroundImageLayers.isEmpty()) {
+      mPaint.setShader(getBackgroundImageShader());
+      canvas.drawRect(getBounds(), mPaint);
+      mPaint.setShader(null);
+    }
+
     final RectF borderWidth = getDirectionAwareBorderInsets();
 
     final int borderLeft = Math.round(borderWidth.left);
@@ -1373,6 +1425,27 @@ public class CSSBackgroundDrawable extends Drawable {
     return new RectF(borderLeftWidth, borderTopWidth, borderRightWidth, borderBottomWidth);
   }
 
+  private @Nullable Shader getBackgroundImageShader() {
+    if (mBackgroundImageLayers == null) {
+      return null;
+    }
+
+    Shader compositeShader = null;
+    for (BackgroundImageLayer backgroundImageLayer : mBackgroundImageLayers) {
+      Shader currentShader = backgroundImageLayer.getShader(getBounds());
+      if (currentShader == null) {
+        continue;
+      }
+      if (compositeShader == null) {
+        compositeShader = currentShader;
+      } else {
+        compositeShader =
+            new ComposeShader(currentShader, compositeShader, PorterDuff.Mode.SRC_OVER);
+      }
+    }
+    return compositeShader;
+  }
+
   /**
    * Multiplies the color with the given alpha.
    *