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

Summary:
This change fixes an issue on iOS where gradients that fade to a transparent color-stop appear dark or "muddy." The fix ensures that the color's hue is preserved during the transition, matching the behavior on Android and web.

### The Problem
When creating a gradient on iOS (e.g., linear-gradient(red, transparent)), the transparent keyword is treated as transparent black (rgba(0,0,0,0)). The `CAGradientLayer` on iOS then interpolates all color channels linearly, causing the red, green, and blue components of the start color to fade to 0. This transition through black results in an undesirable dark or "muddy" appearance in the middle of the gradient.

## Changelog:
[IOS][FIXED] - Gradient interpolation for transparent colors
<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: #52249

Test Plan:
Checkout `LinearGradient` example in RNTester, checkout the newly added transparent color transition example, it should render same on android and iOS.

| Before | After |
| --- | --- |
| <img src="https://github.com/user-attachments/assets/c0bb54ad-ed0e-4a80-b37f-0458af0f1f77" width="300"> | <img src="https://github.com/user-attachments/assets/02da921a-bd0e-45c1-881c-cf6460d5ed43" width="300"> |
| `linear-gradient(to right, red, transparent)` transitions to black on iOS, creating a dark effect. | The gradient correctly fades the red color's alpha channel to zero |

Reviewed By: javache

Differential Revision: D77312194

Pulled By: NickGerleman

fbshipit-source-id: 053df8e44f52cd22a3f28fd01f583f7d03c66af5

Author: intergalacticspacehighway

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,38 @@ @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 = 0.0;
+    CGFloat green = 0.0;
+    CGFloat blue = 0.0;
+    CGFloat alpha = 0.0;
+    [currentColor getRed:&red green:&green blue:&blue alpha:&alpha];
+
+    BOOL isTransparentBlack = alpha == 0.0 && red == 0.0 && green == 0.0 && blue == 0.0;
+
+    if (isTransparentBlack && (lastColor != nullptr)) {
+      [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,10 +58,7 @@ + (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,19 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Gradient with transparent color transition',
+    name: 'transparent-color-transition',
+    render(): React.Node {
+      return (
+        <GradientBox
+          testID="linear-gradient-transparent-color-transition"
+          style={{
+            experimental_backgroundImage:
+              'linear-gradient(to right, red, transparent)',
+          }}
+        />
+      );
+    },
+  },
 ];