fix(ios): Correct gradient interpolation for when transitioning to transparent color

packages/react-native/React/Fabric/Utils/RCTGradientUtils.h

@@ -23,6 +23,11 @@ NS_ASSUME_NONNULL_BEGIN
 + (std::pair<CGPoint, CGPoint>)pointsForCAGradientLayerLinearGradient:(CGPoint)startPoint
                                                              endPoint:(CGPoint)endPoint
                                                                bounds:(CGSize)bounds;
+
++ (void)getColors:(NSMutableArray<id> *)colors
+     andLocations:(NSMutableArray<NSNumber *> *)locations
+   fromColorStops:(const std::vector<facebook::react::ProcessedColorStop> &)colorStops;
+
 @end
 
 NS_ASSUME_NONNULL_END

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

@@ -374,4 +374,35 @@ @implementation RCTGradientUtils
 
   return {startPoint, endPoint};
 }
++ (void)getColors:(NSMutableArray<id> *)colors
+     andLocations:(NSMutableArray<NSNumber *> *)locations
+   fromColorStops:(const std::vector<facebook::react::ProcessedColorStop> &)colorStops
+{
+  // iOS's CAGradientLayer interpolates colors in a way that can cause unexpected results.
+  // For example, a gradient from a color to `transparent` (which is transparent black) will
+  // fade the color's RGB components to black, creating a "muddy" or dark appearance.
+  // To fix this, we detect when a color stop is transparent black and replace it with
+  // a transparent version of the *previous* color stop. This creates a smooth fade-out effect
+  // by only interpolating the alpha channel, matching web and Android behavior.
+  UIColor *lastColor = nil;
+  for (const auto &colorStop : colorStops) {
+    UIColor *currentColor = RCTUIColorFromSharedColor(colorStop.color);
+
+    CGFloat red, green, blue, alpha;
+    [currentColor getRed:&red green:&green blue:&blue alpha:&alpha];
+
+    BOOL isTransparentBlack = alpha == 0 && red == 0  && green == 0 && blue == 0;
+
+    if (isTransparentBlack && lastColor) {
+      [colors addObject:(id)[lastColor colorWithAlphaComponent:0.0].CGColor];
+    } else {
+      [colors addObject:(id)currentColor.CGColor];
+    }
+
+    if (!isTransparentBlack) {
+      lastColor = currentColor;
+    }
+    [locations addObject:@(std::max(std::min(colorStop.position.value(), 1.0), 0.0))];
+  }
+}
 @end

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

@@ -58,11 +58,8 @@ + (CALayer *)gradientLayerWithSize:(CGSize)size gradient:(const LinearGradient &
   gradientLayer.startPoint = fixedStartPoint;
   gradientLayer.endPoint = fixedEndPoint;
 
-  for (const auto &colorStop : colorStops) {
-    [colors addObject:(id)RCTUIColorFromSharedColor(colorStop.color).CGColor];
-    [locations addObject:@(std::max(std::min(colorStop.position.value(), 1.0), 0.0))];
-  }
-
+  [RCTGradientUtils getColors:colors andLocations:locations fromColorStops:colorStops];
+
   gradientLayer.colors = colors;
   gradientLayer.locations = locations;
 

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

@@ -182,10 +182,8 @@ + (CALayer *)gradientLayerWithSize:(CGSize)size gradient:(const RadialGradient &
 
   NSMutableArray<id> *colors = [NSMutableArray array];
   NSMutableArray<NSNumber *> *locations = [NSMutableArray array];
-  for (const auto &colorStop : colorStops) {
-    [colors addObject:(id)RCTUIColorFromSharedColor(colorStop.color).CGColor];
-    [locations addObject:@(std::max(std::min(colorStop.position.value(), 1.0), 0.0))];
-  }
+
+  [RCTGradientUtils getColors:colors andLocations:locations fromColorStops:colorStops];
 
   gradientLayer.colors = colors;
   gradientLayer.locations = locations;

packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js

@@ -290,4 +290,18 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Gradient with transparent color transition',
+    name: 'transparent-color-transition',
+    render(): React.Node {
+      return (
+        <GradientBox
+          style={{
+            experimental_backgroundImage:
+              'linear-gradient(to right, red, transparent)',
+          }}
+        />
+      );
+    },
+  },
 ];