implement gradient fot iOS new arch text

packages/react-native/Libraries/Text/Text.d.ts

@@ -11,7 +11,7 @@ import type * as React from 'react';
 import {Constructor} from '../../types/private/Utilities';
 import {AccessibilityProps} from '../Components/View/ViewAccessibility';
 import {NativeMethods} from '../../types/public/ReactNativeTypes';
-import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet';
+import {ColorValue, OpaqueColorValue, StyleProp} from '../StyleSheet/StyleSheet';
 import {TextStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes';
 import {
   GestureResponderEvent,
@@ -222,7 +222,7 @@ export interface TextProps
   /**
    * Adds a horizontal gradient using the int based color values.
    */
-  gradientColors?: number[] | undefined;
+  gradientColors?: Array<number | OpaqueColorValue> | undefined;
 
   /**
    * Gradient angle in degrees. Default is 0 (horizontal).

packages/react-native/ReactCommon/react/renderer/attributedstring/TextAttributes.h

@@ -144,6 +144,7 @@ struct hash<facebook::react::TextAttributes> {
         textAttributes.textShadowColor,
         textAttributes.textStrokeWidth,
         textAttributes.textStrokeColor,
+        textAttributes.gradientColors,
         textAttributes.gradientAngle,
         textAttributes.gradientWidth,
         textAttributes.gradientMode,

packages/react-native/ReactCommon/react/renderer/graphics/Color.h

@@ -9,6 +9,7 @@
 
 #include <functional>
 #include <limits>
+#include <vector>
 
 #include <react/renderer/graphics/ColorComponents.h>
 #include <react/renderer/graphics/HostPlatformColor.h>
@@ -85,3 +86,16 @@ struct std::hash<facebook::react::SharedColor> {
     return std::hash<facebook::react::Color>{}(*color);
   }
 };
+
+template <>
+struct std::hash<std::vector<facebook::react::SharedColor>> {
+  size_t operator()(
+      const std::vector<facebook::react::SharedColor>& colors) const {
+    size_t seed = 0;
+    std::hash<facebook::react::SharedColor> hasher;
+    for (const auto& color : colors) {
+      seed ^= hasher(color) + 0x9e3779b9 + (seed << 6) + (seed >> 2);
+    }
+    return seed;
+  }
+};

packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm

@@ -140,6 +140,54 @@ inline static CGFloat RCTEffectiveFontSizeMultiplierFromTextAttributes(const Tex
 {
   UIColor *effectiveForegroundColor = RCTUIColorFromSharedColor(textAttributes.foregroundColor) ?: [UIColor blackColor];
 
+  if (textAttributes.gradientColors.has_value() && !textAttributes.gradientColors->empty()) {
+    NSMutableArray *cgColors = [NSMutableArray array];
+    for (const auto &sharedColor : *textAttributes.gradientColors) {
+      UIColor *color = RCTUIColorFromSharedColor(sharedColor);
+      if (color != nil) {
+        [cgColors addObject:(id)color.CGColor];
+      }
+    }
+
+    if ([cgColors count] > 0) {
+      BOOL isClampMode = textAttributes.gradientMode.value_or("") == "clamp";
+      if (!isClampMode) {
+        // Mirror mode (default) duplicates the first color at the end.
+        [cgColors addObject:cgColors[0]];
+      }
+
+      CAGradientLayer *gradient = [CAGradientLayer layer];
+      CGFloat patternWidth =
+          (!isnan(textAttributes.gradientWidth) && textAttributes.gradientWidth > 0) ? textAttributes.gradientWidth : 100;
+      CGFloat lineHeight = !isnan(textAttributes.lineHeight)
+          ? textAttributes.lineHeight
+          : (!isnan(textAttributes.fontSize) ? textAttributes.fontSize : 14);
+      CGFloat height = lineHeight * RCTEffectiveFontSizeMultiplierFromTextAttributes(textAttributes);
+      gradient.frame = CGRectMake(0, 0, patternWidth, height);
+      gradient.colors = cgColors;
+
+      CGFloat angle = !isnan(textAttributes.gradientAngle) ? textAttributes.gradientAngle : 0.0;
+      CGFloat radians = angle * M_PI / 180.0;
+
+      CGFloat startX = 0.5 - 0.5 * cos(radians);
+      CGFloat startY = 0.5 - 0.5 * sin(radians);
+      CGFloat endX = 0.5 + 0.5 * cos(radians);
+      CGFloat endY = 0.5 + 0.5 * sin(radians);
+
+      gradient.startPoint = CGPointMake(startX, startY);
+      gradient.endPoint = CGPointMake(endX, endY);
+
+      UIGraphicsBeginImageContextWithOptions(gradient.frame.size, NO, 0.0);
+      [gradient renderInContext:UIGraphicsGetCurrentContext()];
+      UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();
+      UIGraphicsEndImageContext();
+
+      if (gradientImage) {
+        effectiveForegroundColor = [UIColor colorWithPatternImage:gradientImage];
+      }
+    }
+  }
+
   if (!isnan(textAttributes.opacity)) {
     effectiveForegroundColor = [effectiveForegroundColor
         colorWithAlphaComponent:CGColorGetAlpha(effectiveForegroundColor.CGColor) * textAttributes.opacity];
@@ -174,7 +222,8 @@ inline static CGFloat RCTEffectiveFontSizeMultiplierFromTextAttributes(const Tex
   // Colors
   UIColor *effectiveForegroundColor = RCTEffectiveForegroundColorFromTextAttributes(textAttributes);
 
-  if (textAttributes.foregroundColor || !isnan(textAttributes.opacity)) {
+  if (textAttributes.foregroundColor || !isnan(textAttributes.opacity) ||
+      textAttributes.gradientColors.has_value()) {
     attributes[NSForegroundColorAttributeName] = effectiveForegroundColor;
   }