add background size cover and contain

Author: intergalacticspacehighway

packages/react-native/React/Fabric/Utils/RCTBackgroundImageUtils.mm

@@ -160,7 +160,23 @@ + (CGSize)calculateBackgroundImageSize:(const CGRect &)positioningArea
   CGSize itemFinalSize = itemIntrinsicSize;
   CGSize positioningAreaSize = positioningArea.size;
 
-  if (std::holds_alternative<facebook::react::BackgroundSizeLengthPercentage>(backgroundSize)) {
+  if (std::holds_alternative<facebook::react::BackgroundSizeKeyword>(backgroundSize)) {
+    auto keyword = std::get<facebook::react::BackgroundSizeKeyword>(backgroundSize);
+    if (itemIntrinsicSize.width > 0 && itemIntrinsicSize.height > 0) {
+      CGFloat scaleX = positioningAreaSize.width / itemIntrinsicSize.width;
+      CGFloat scaleY = positioningAreaSize.height / itemIntrinsicSize.height;
+
+      if (keyword == facebook::react::BackgroundSizeKeyword::Cover) {
+        CGFloat scale = std::max(scaleX, scaleY);
+        itemFinalSize.width = itemIntrinsicSize.width * scale;
+        itemFinalSize.height = itemIntrinsicSize.height * scale;
+      } else if (keyword == facebook::react::BackgroundSizeKeyword::Contain) {
+        CGFloat scale = std::min(scaleX, scaleY);
+        itemFinalSize.width = itemIntrinsicSize.width * scale;
+        itemFinalSize.height = itemIntrinsicSize.height * scale;
+      }
+    }
+  } else if (std::holds_alternative<facebook::react::BackgroundSizeLengthPercentage>(backgroundSize)) {
     auto backgroundSizeLengthPercentage = std::get<facebook::react::BackgroundSizeLengthPercentage>(backgroundSize);
     if (std::holds_alternative<facebook::react::ValueUnit>(backgroundSizeLengthPercentage.x)) {
       auto xValue = std::get<facebook::react::ValueUnit>(backgroundSizeLengthPercentage.x);

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/BackgroundImageDrawable.kt

@@ -383,12 +383,35 @@ internal class BackgroundImageDrawable(
     var finalWidth = imageWidth
     var finalHeight = imageHeight
 
-    if (backgroundSize is BackgroundSize.LengthPercentageAuto) {
-      val w = backgroundSize.lengthPercentage.x
-      val h = backgroundSize.lengthPercentage.y
-      if (w != null && h != null) {
-        finalWidth = positionToPixels(w, containerWidth)
-        finalHeight = positionToPixels(h, containerHeight)
+    when (backgroundSize) {
+      is BackgroundSize.Cover -> {
+        if (imageWidth > 0 && imageHeight > 0) {
+          val scaleX = containerWidth / imageWidth
+          val scaleY = containerHeight / imageHeight
+          val scale = maxOf(scaleX, scaleY)
+          finalWidth = imageWidth * scale
+          finalHeight = imageHeight * scale
+        }
+      }
+      is BackgroundSize.Contain -> {
+        if (imageWidth > 0 && imageHeight > 0) {
+          val scaleX = containerWidth / imageWidth
+          val scaleY = containerHeight / imageHeight
+          val scale = minOf(scaleX, scaleY)
+          finalWidth = imageWidth * scale
+          finalHeight = imageHeight * scale
+        }
+      }
+      is BackgroundSize.LengthPercentageAuto -> {
+        val w = backgroundSize.lengthPercentage.x
+        val h = backgroundSize.lengthPercentage.y
+        if (w != null && h != null) {
+          finalWidth = positionToPixels(w, containerWidth)
+          finalHeight = positionToPixels(h, containerHeight)
+        }
+      }
+      null -> {
+        // Keep intrinsic size
       }
     }
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BackgroundSize.kt

@@ -79,6 +79,10 @@ internal class BackgroundSizeLengthPercentage(
 }
 
 internal sealed class BackgroundSize {
+  public data object Cover : BackgroundSize()
+
+  public data object Contain : BackgroundSize()
+
   public class LengthPercentageAuto(public val lengthPercentage: BackgroundSizeLengthPercentage) :
       BackgroundSize()
 
@@ -87,6 +91,13 @@ internal sealed class BackgroundSize {
       if (backgroundSizeValue == null) return null
 
       return when (backgroundSizeValue.type) {
+        ReadableType.String -> {
+          when (backgroundSizeValue.asString()) {
+            "cover" -> Cover
+            "contain" -> Contain
+            else -> null
+          }
+        }
         ReadableType.Map -> {
           val backgroundSizeValueMap = backgroundSizeValue.asMap() ?: return null
           val lengthPercentage = BackgroundSizeLengthPercentage.parse(backgroundSizeValueMap)

packages/rn-tester/js/examples/BackgroundImage/BackgroundImageExample.js

@@ -499,4 +499,48 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Background Size Cover and Contain',
+    description:
+      'Cover scales the image to completely cover the container. Contain scales to fit entirely within the container',
+    name: 'size-cover-contain',
+    render(): React.Node {
+      return (
+        <View style={styles.row}>
+          <View style={styles.col}>
+            <Text>cover</Text>
+            <BackgroundImageBox
+              style={{
+                width: 150,
+                height: 200,
+                experimental_backgroundImage:
+                  'url(https://reactnative.dev/img/tiny_logo.png)',
+                experimental_backgroundSize: 'cover',
+                experimental_backgroundPosition: 'center',
+                borderWidth: 1,
+                borderColor: '#ccc',
+              }}
+              testID="background-image-size-cover"
+            />
+          </View>
+          <View style={styles.col}>
+            <Text>contain</Text>
+            <BackgroundImageBox
+              style={{
+                width: 150,
+                height: 200,
+                experimental_backgroundImage:
+                  'url(https://reactnative.dev/img/tiny_logo.png)',
+                experimental_backgroundSize: 'contain',
+                experimental_backgroundPosition: 'center',
+                borderWidth: 1,
+                borderColor: '#ccc',
+              }}
+              testID="background-image-size-contain"
+            />
+          </View>
+        </View>
+      );
+    },
+  },
 ] as Array<RNTesterModuleExample>;