- Use CAGradientLayer for linear gradient (#52096)

Summary:
This PR replaces Core Graphics implementation with Core Animation for linear gradients. I came across a great [solution](https://stackoverflow.com/questions/38821631/cagradientlayer-diagonal-gradient/43176174#43176174) that makes the `CAGradientLayer`'s start and end point behaviour CSS spec compliant. This will make gradients much more performant.

## Changelog:

[IOS] [CHANGED] - Optimised Linear Gradients.
<!-- 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: #52096

Test Plan:
Non breaking change. Test Linear gradient example from RNTester. Compare results with web, android and iOS. Each platform should render the gradients identically.

## Note:

I will be doing a PR to use `CAGradientLayer` for radial gradients as well. The next properties that I have locally working are `background-size`, `background-position` and `background-repeat`. These will be addressed in small PRs.

Reviewed By: NickGerleman

Differential Revision: D76905215

Pulled By: javache

fbshipit-source-id: 0094bdf70869d619272d491dd496983316b0dbf0

Author: intergalacticspacehighway

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

@@ -16,6 +16,12 @@ NS_ASSUME_NONNULL_BEGIN
 + (std::vector<facebook::react::ProcessedColorStop>)getFixedColorStops:
                                                         (const std::vector<facebook::react::ColorStop> &)colorStops
                                                     gradientLineLength:(CGFloat)gradientLineLength;
+// CAGradientLayer linear gradient squishes the non-square gradient to square gradient.
+// This function fixes the "squished" effect.
+// See https://stackoverflow.com/a/43176174 for more information.
++ (std::pair<CGPoint, CGPoint>)pointsForCAGradientLayerLinearGradient:(CGPoint)startPoint
+                                                             endPoint:(CGPoint)endPoint
+                                                               bounds:(CGSize)bounds;
 @end
 
 NS_ASSUME_NONNULL_END

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

@@ -9,10 +9,140 @@
 #import <React/RCTAnimationUtils.h>
 #import <React/RCTConversions.h>
 #import <react/utils/FloatComparison.h>
+#include <optional>
 #import <vector>
 
 using namespace facebook::react;
 
+namespace {
+
+struct Line;
+
+struct LineSegment {
+  CGPoint p1;
+  CGPoint p2;
+
+  LineSegment(CGPoint p1, CGPoint p2) : p1(p1), p2(p2) {}
+
+  LineSegment(CGPoint p1, CGFloat m, CGFloat distance);
+
+  CGFloat getLength() const
+  {
+    CGFloat dx = p2.x - p1.x;
+    CGFloat dy = p2.y - p1.y;
+    return sqrt(dx * dx + dy * dy);
+  }
+
+  CGFloat getDistance() const
+  {
+    return p1.x <= p2.x ? getLength() : -getLength();
+  }
+
+  CGPoint getMidpoint() const
+  {
+    return CGPointMake((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);
+  }
+
+  CGFloat getSlope() const
+  {
+    CGFloat dx = p2.x - p1.x;
+    if (floatEquality(dx, 0.0)) {
+      return std::numeric_limits<CGFloat>::infinity();
+    }
+    return (p2.y - p1.y) / dx;
+  }
+
+  CGFloat getPerpendicularSlope() const
+  {
+    CGFloat slope = getSlope();
+    if (std::isinf(slope)) {
+      return 0.0;
+    }
+    if (floatEquality(slope, 0.0)) {
+      return -std::numeric_limits<CGFloat>::infinity();
+    }
+    return -1 / slope;
+  }
+
+  Line toLine() const;
+
+  LineSegment perpendicularBisector() const
+  {
+    CGPoint midpoint = getMidpoint();
+    CGFloat perpSlope = getPerpendicularSlope();
+    CGFloat dist = getDistance();
+    return {LineSegment(midpoint, perpSlope, -dist / 2).p2, LineSegment(midpoint, perpSlope, dist / 2).p2};
+  }
+
+  LineSegment multiplied(CGSize multipliers) const
+  {
+    return {
+        CGPointMake(p1.x * multipliers.width, p1.y * multipliers.height),
+        CGPointMake(p2.x * multipliers.width, p2.y * multipliers.height)};
+  }
+
+  LineSegment divided(CGSize divisors) const
+  {
+    return multiplied(CGSizeMake(1 / divisors.width, 1 / divisors.height));
+  }
+};
+
+struct Line {
+  CGFloat m;
+  CGFloat b;
+
+  Line(CGFloat m, CGFloat b) : m(m), b(b) {}
+  Line(CGFloat m, CGPoint p) : m(m), b(p.y - m * p.x) {}
+  Line(CGPoint p1, CGPoint p2) : m(LineSegment(p1, p2).getSlope()), b(p1.y - m * p1.x) {}
+
+  CGFloat y(CGFloat x) const
+  {
+    return m * x + b;
+  }
+
+  CGPoint point(CGFloat x) const
+  {
+    return CGPointMake(x, y(x));
+  }
+
+  std::optional<CGPoint> intersection(const Line &other) const
+  {
+    CGFloat n = other.m;
+    CGFloat c = other.b;
+    if (floatEquality(m, n)) {
+      return std::nullopt;
+    }
+    CGFloat x = (c - b) / (m - n);
+    return point(x);
+  }
+};
+
+LineSegment::LineSegment(CGPoint p1, CGFloat m, CGFloat distance) : p1(p1)
+{
+  Line line(m, p1);
+  CGPoint measuringPoint = line.point(p1.x + 1);
+  LineSegment measuringSegment(p1, measuringPoint);
+  CGFloat measuringDeltaH = measuringSegment.getDistance();
+  CGFloat deltaX = !floatEquality(measuringDeltaH, 0.0) ? distance / measuringDeltaH : 0.0;
+  p2 = line.point(p1.x + deltaX);
+}
+
+Line LineSegment::toLine() const
+{
+  return {p1, p2};
+}
+
+CGSize calculateMultipliers(CGSize bounds)
+{
+  if (bounds.height <= bounds.width) {
+    return CGSizeMake(1, bounds.width / bounds.height);
+  } else {
+    return CGSizeMake(bounds.height / bounds.width, 1);
+  }
+}
+
+} // namespace
+
 static std::optional<Float> resolveColorStopPosition(ValueUnit position, CGFloat gradientLineLength)
 {
   if (position.unit == UnitType::Point) {
@@ -52,21 +182,21 @@
     auto leftDist = offset - offsetLeft;
     auto rightDist = offsetRight - offset;
     auto totalDist = offsetRight - offsetLeft;
-    SharedColor leftSharedColor = colorStops[x - 1].color;
-    SharedColor rightSharedColor = colorStops[x + 1].color;
+    const SharedColor &leftSharedColor = colorStops[x - 1].color;
+    const SharedColor &rightSharedColor = colorStops[x + 1].color;
 
-    if (facebook::react::floatEquality(leftDist, rightDist)) {
+    if (floatEquality(leftDist, rightDist)) {
       colorStops.erase(colorStops.begin() + x);
       --indexOffset;
       continue;
     }
 
-    if (facebook::react::floatEquality(leftDist, .0f)) {
+    if (floatEquality(leftDist, 0.0)) {
       colorStops[x].color = rightSharedColor;
       continue;
     }
 
-    if (facebook::react::floatEquality(rightDist, .0f)) {
+    if (floatEquality(rightDist, 0.0)) {
       colorStops[x].color = leftSharedColor;
       continue;
     }
@@ -120,7 +250,7 @@
       auto green = (interpolatedColor >> 8) & 0xFF;
       auto blue = interpolatedColor & 0xFF;
 
-      newStop.color = facebook::react::colorFromRGBA(red, green, blue, alpha);
+      newStop.color = colorFromRGBA(red, green, blue, alpha);
     }
 
     // Replace the color hint with new color stops
@@ -201,4 +331,47 @@ @implementation RCTGradientUtils
   }
   return processColorTransitionHints(fixedColorStops);
 }
+
+// CAGradientLayer linear gradient squishes the non-square gradient to square gradient.
+// This function fixes the "squished" effect.
+// See https://stackoverflow.com/a/43176174 for more information.
++ (std::pair<CGPoint, CGPoint>)pointsForCAGradientLayerLinearGradient:(CGPoint)startPoint
+                                                             endPoint:(CGPoint)endPoint
+                                                               bounds:(CGSize)bounds
+{
+  if (floatEquality(startPoint.x, endPoint.x) || floatEquality(startPoint.y, endPoint.y)) {
+    // Apple's implementation of horizontal and vertical gradients works just fine
+    return {startPoint, endPoint};
+  }
+
+  LineSegment startEnd(startPoint, endPoint);
+  LineSegment ab = startEnd.multiplied({bounds.width, bounds.height});
+  const CGPoint a = ab.p1;
+  const CGPoint b = ab.p2;
+
+  LineSegment cd = ab.perpendicularBisector();
+
+  CGSize multipliers = calculateMultipliers(bounds);
+  LineSegment lineSegmentCD = cd.multiplied(multipliers);
+
+  LineSegment lineSegmentEF = lineSegmentCD.perpendicularBisector();
+
+  LineSegment ef = lineSegmentEF.divided(multipliers);
+
+  Line efLine = ef.toLine();
+
+  Line aParallelLine(cd.getSlope(), a);
+  Line bParallelLine(cd.getSlope(), b);
+
+  std::optional<CGPoint> g_opt = efLine.intersection(aParallelLine);
+  std::optional<CGPoint> h_opt = efLine.intersection(bParallelLine);
+
+  if (g_opt && h_opt) {
+    LineSegment gh(*g_opt, *h_opt);
+    LineSegment result = gh.divided({bounds.width, bounds.height});
+    return {result.p1, result.p2};
+  }
+
+  return {startPoint, endPoint};
+}
 @end

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

@@ -19,54 +19,52 @@ @implementation RCTLinearGradient
 
 + (CALayer *)gradientLayerWithSize:(CGSize)size gradient:(const LinearGradient &)gradient
 {
-  UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:size];
   const auto &direction = gradient.direction;
-  UIImage *gradientImage = [renderer imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
-    CGPoint startPoint;
-    CGPoint endPoint;
-
-    if (direction.type == GradientDirectionType::Angle) {
-      CGFloat angle = std::get<Float>(direction.value);
-      std::tie(startPoint, endPoint) = getPointsFromAngle(angle, size);
-    } else if (direction.type == GradientDirectionType::Keyword) {
-      auto keyword = std::get<GradientKeyword>(direction.value);
-      CGFloat angle = getAngleForKeyword(keyword, size);
-      std::tie(startPoint, endPoint) = getPointsFromAngle(angle, size);
-    } else {
-      // Default to top-to-bottom gradient
-      startPoint = CGPointMake(0.0, 0.0);
-      endPoint = CGPointMake(0.0, size.height);
-    }
-
-    CGFloat dx = endPoint.x - startPoint.x;
-    CGFloat dy = endPoint.y - startPoint.y;
-    CGFloat gradientLineLength = sqrt(dx * dx + dy * dy);
-    const auto colorStops = [RCTGradientUtils getFixedColorStops:gradient.colorStops
-                                              gradientLineLength:gradientLineLength];
-
-    CGContextRef context = rendererContext.CGContext;
-    NSMutableArray *colors = [NSMutableArray array];
-    CGFloat locations[colorStops.size()];
-
-    for (size_t i = 0; i < colorStops.size(); ++i) {
-      const auto &colorStop = colorStops[i];
-      CGColorRef cgColor = RCTCreateCGColorRefFromSharedColor(colorStop.color);
-      [colors addObject:(__bridge id)cgColor];
-      locations[i] = std::max(std::min(colorStop.position.value(), 1.0), 0.0);
-    }
-
-    CGGradientRef cgGradient = CGGradientCreateWithColors(NULL, (__bridge CFArrayRef)colors, locations);
-
-    CGContextDrawLinearGradient(context, cgGradient, startPoint, endPoint, 0);
+  CAGradientLayer *gradientLayer = [CAGradientLayer layer];
+  CGPoint startPoint;
+  CGPoint endPoint;
+
+  if (direction.type == GradientDirectionType::Angle) {
+    CGFloat angle = std::get<Float>(direction.value);
+    std::tie(startPoint, endPoint) = getPointsFromAngle(angle, size);
+  } else if (direction.type == GradientDirectionType::Keyword) {
+    auto keyword = std::get<GradientKeyword>(direction.value);
+    CGFloat angle = getAngleForKeyword(keyword, size);
+    std::tie(startPoint, endPoint) = getPointsFromAngle(angle, size);
+  } else {
+    // Default to top-to-bottom gradient
+    CGFloat centerX = size.width / 2;
+    startPoint = CGPointMake(centerX, 0.0);
+    endPoint = CGPointMake(centerX, size.height);
+  }
 
-    for (id color in colors) {
-      CGColorRelease((__bridge CGColorRef)color);
-    }
-    CGGradientRelease(cgGradient);
-  }];
+  CGFloat dx = endPoint.x - startPoint.x;
+  CGFloat dy = endPoint.y - startPoint.y;
+  CGFloat gradientLineLength = sqrt(dx * dx + dy * dy);
+  const auto colorStops = [RCTGradientUtils getFixedColorStops:gradient.colorStops
+                                            gradientLineLength:gradientLineLength];
+  NSMutableArray<id> *colors = [NSMutableArray array];
+  NSMutableArray<NSNumber *> *locations = [NSMutableArray array];
+  CGPoint relativeStartPoint = CGPointMake(startPoint.x / size.width, startPoint.y / size.height);
+  CGPoint relativeEndPoint = CGPointMake(endPoint.x / size.width, endPoint.y / size.height);
+
+  CGPoint fixedStartPoint;
+  CGPoint fixedEndPoint;
+
+  std::tie(fixedStartPoint, fixedEndPoint) = [RCTGradientUtils pointsForCAGradientLayerLinearGradient:relativeStartPoint
+                                                                                             endPoint:relativeEndPoint
+                                                                                               bounds:size];
+
+  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))];
+  }
 
-  CALayer *gradientLayer = [CALayer layer];
-  gradientLayer.contents = (__bridge id)gradientImage.CGImage;
+  gradientLayer.colors = colors;
+  gradientLayer.locations = locations;
 
   return gradientLayer;
 }

packages/react-native/ReactCommon/react/renderer/graphics/Transform.cpp

@@ -302,11 +302,11 @@ Transform Transform::Interpolate(
 }
 
 bool Transform::isVerticalInversion(const Transform& transform) {
-  return facebook::react::floatEquality(transform.at(1, 1), -1.0f);
+  return floatEquality(transform.at(1, 1), static_cast<Float>(-1.0f));
 }
 
 bool Transform::isHorizontalInversion(const Transform& transform) {
-  return facebook::react::floatEquality(transform.at(0, 0), -1.0f);
+  return floatEquality(transform.at(0, 0), static_cast<Float>(-1.0f));
 }
 
 bool Transform::operator==(const Transform& rhs) const {

packages/react-native/ReactCommon/react/utils/FloatComparison.h

@@ -7,13 +7,17 @@
 
 #pragma once
 
+#include <cmath>
+
 namespace facebook::react {
 
 constexpr float kDefaultEpsilon = 0.005f;
 
-inline bool floatEquality(float a, float b, float epsilon = kDefaultEpsilon) {
+template <typename T>
+inline bool
+floatEquality(T a, T b, T epsilon = static_cast<T>(kDefaultEpsilon)) {
   return (std::isnan(a) && std::isnan(b)) ||
-      (!std::isnan(a) && !std::isnan(b) && fabs(a - b) < epsilon);
+      (!std::isnan(a) && !std::isnan(b) && std::abs(a - b) < epsilon);
 }
 
 } // namespace facebook::react

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

@@ -273,4 +273,21 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Non-square multiple color stops',
+    name: 'non-square-multiple-color-stops',
+    render(): React.Node {
+      return (
+        <GradientBox
+          testID="linear-gradient-non-square-multiple-color-stops"
+          style={{
+            experimental_backgroundImage:
+              'linear-gradient(45deg, black 9%, red 20%, blue 30%, green 50%, black 90%, transparent)',
+            width: 100,
+            height: 200,
+          }}
+        />
+      );
+    },
+  },
 ];