From f8d122ec3d499381c6921caaa662044dad711f5d Mon Sep 17 00:00:00 2001
From: lazerg <lazerg2@gmail.com>
Date: Thu, 29 Oct 2026 10:07:32 +0500
Subject: [PATCH] Accept unitless zero stops and reject invalid layers in
 backgroundImage strings

---
 .../__tests__/processBackgroundImage-itest.js    | 16 ++++++++++++++++
 .../StyleSheet/processBackgroundImage.js         | 10 ++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-itest.js b/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-itest.js
index 5dc05646b27e..4eb927aa9e4e 100644
--- a/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-itest.js
+++ b/packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-itest.js
@@ -353,6 +353,22 @@ describe('processBackgroundImage', () => {
     expect(result).toEqual([]);
   });
 
+  it('should process unitless zero color stop position', () => {
+    const input = 'linear-gradient(red 0, blue 100%)';
+    const result = processBackgroundImage(input);
+    expect(result[0].colorStops).toEqual([
+      {color: processColor('red'), position: 0},
+      {color: processColor('blue'), position: '100%'},
+    ]);
+  });
+
+  it('should return empty array if one of multiple gradients is invalid', () => {
+    const input =
+      'linear-gradient(red, blue), linear-gradient(notacolor, blue)';
+    const result = processBackgroundImage(input);
+    expect(result).toEqual([]);
+  });
+
   it('should process an array of style objects', () => {
     const input: ReadonlyArray<BackgroundImageValue> | string = [
       {
diff --git a/packages/react-native/Libraries/StyleSheet/processBackgroundImage.js b/packages/react-native/Libraries/StyleSheet/processBackgroundImage.js
index 23c0b20cc525..e7985e2737a6 100644
--- a/packages/react-native/Libraries/StyleSheet/processBackgroundImage.js
+++ b/packages/react-native/Libraries/StyleSheet/processBackgroundImage.js
@@ -271,9 +271,11 @@ function parseBackgroundImageCSSString(
         ? parseRadialGradientCSSString(gradientContent)
         : parseLinearGradientCSSString(gradientContent);
 
-      if (gradient != null) {
-        gradients.push(gradient);
+      if (gradient == null) {
+        // If a gradient is invalid, return an empty array and do not apply any gradient. Same as web.
+        return [];
       }
+      gradients.push(gradient);
     }
   }
   return gradients;
@@ -803,6 +805,10 @@ function getAngleInDegrees(angle?: string): ?number {
 }
 
 function getPositionFromCSSValue(position: string) {
+  if (position === '0') {
+    return 0;
+  }
+
   if (position.endsWith('px')) {
     return parseFloat(position);
   }