fix: unsupported background size causing divide by zero crash on android

Author: intergalacticspacehighway

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -428,8 +428,6 @@ export type BackgroundSizeValue =
       x: string | number;
       y: string | number;
     }
-  | 'cover'
-  | 'contain';
 
 export type BackgroundRepeatKeyword =
   | 'repeat'

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

@@ -784,8 +784,6 @@ export type BackgroundSizeValue =
       x: string | number,
       y: string | number,
     }
-  | 'cover'
-  | 'contain';
 
 export type BackgroundRepeatKeyword =
   | 'repeat'

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

@@ -134,9 +134,12 @@ internal class BackgroundImageDrawable(
       // So we draw in reverse (last drawn in canvas appears closest)
       for (index in layers.indices.reversed()) {
         val backgroundImageLayer = layers[index]
-        val size = backgroundSize?.let { it.getOrNull(index % it.size) }
-        val repeat = backgroundRepeat?.let { it.getOrNull(index % it.size) }
-        val position = backgroundPosition?.let { it.getOrNull(index % it.size) }
+        val size =
+            backgroundSize?.takeIf { it.isNotEmpty() }?.let { it.getOrNull(index % it.size) }
+        val repeat =
+            backgroundRepeat?.takeIf { it.isNotEmpty() }?.let { it.getOrNull(index % it.size) }
+        val position =
+            backgroundPosition?.takeIf { it.isNotEmpty() }?.let { it.getOrNull(index % it.size) }
 
         // 2. Calculate the size of a single tile.
         val (tileWidth, tileHeight) =

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt

@@ -167,7 +167,8 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
             backgroundSizes.add(parsedBackgroundSize)
           }
         }
-        BackgroundStyleApplicator.setBackgroundSize(view, backgroundSizes)
+        BackgroundStyleApplicator.setBackgroundSize(
+            view, backgroundSizes.ifEmpty { null })
       }
     } else {
       BackgroundStyleApplicator.setBackgroundSize(view, null)
@@ -186,7 +187,8 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
             backgroundPositions.add(parsedBackgroundPosition)
           }
         }
-        BackgroundStyleApplicator.setBackgroundPosition(view, backgroundPositions)
+        BackgroundStyleApplicator.setBackgroundPosition(
+            view, backgroundPositions.ifEmpty { null })
       } else {
         BackgroundStyleApplicator.setBackgroundPosition(view, null)
       }
@@ -205,7 +207,8 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
             backgroundRepeats.add(parsedBackgroundRepeat)
           }
         }
-        BackgroundStyleApplicator.setBackgroundRepeat(view, backgroundRepeats)
+        BackgroundStyleApplicator.setBackgroundRepeat(
+            view, backgroundRepeats.ifEmpty { null })
       } else {
         BackgroundStyleApplicator.setBackgroundRepeat(view, null)
       }

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

@@ -361,7 +361,6 @@ exports.examples = [
               style={{
                 experimental_backgroundImage:
                   'linear-gradient(45deg, #667eea, #764ba2)',
-                experimental_backgroundSize: 'cover',
                 borderRadius: 20,
               }}
               testID="background-image-borders-1"
@@ -373,7 +372,6 @@ exports.examples = [
               style={{
                 experimental_backgroundImage:
                   'radial-gradient(circle, #f093fb, #f5576c)',
-                experimental_backgroundSize: 'cover',
                 borderWidth: 10,
                 borderColor: 'red',
               }}
@@ -386,7 +384,6 @@ exports.examples = [
               style={{
                 experimental_backgroundImage:
                   'radial-gradient(circle, #f093fb, #f5576c)',
-                experimental_backgroundSize: 'cover',
                 borderTopLeftRadius: 10,
                 borderTopRightRadius: 20,
                 borderBottomLeftRadius: 30,
@@ -401,7 +398,6 @@ exports.examples = [
               style={{
                 experimental_backgroundImage:
                   'radial-gradient(circle, #f093fb, #f5576c)',
-                experimental_backgroundSize: 'cover',
                 borderTopWidth: 10,
                 borderTopColor: 'red',
                 borderBottomWidth: 20,