fix(android): honor textDecorationColor on Text underlines

Android's `Layout.draw` paints the underline produced by
`setUnderlineText(true)` using `paint.color`, ignoring
`paint.underlineColor` on all API levels. This caused
`textDecorationColor` to be silently dropped on Android.

Refactor `ReactUnderlineSpan` to extend `DrawCommandSpan` and paint the
underline itself in `onDraw`, falling back to the text color when no
color was specified. Thread the color through `TextAttributeProps` (both
MapBuffer and ReadableMap ingestion paths) and `TextLayoutManager`. Add
`DrawCommandSpan` invocation to `ReactTextView.onDraw`, mirroring the
existing `PreparedLayoutTextView` behavior so both text view classes
honor custom-drawing spans.

## Changelog

[ANDROID] [FIXED] - Text underlines honor `textDecorationColor`

## Test Plan

Render a Text component with `textDecorationColor` set to a value
distinct from the text color; the underline now renders in the specified
color rather than the text color. Verified on Android API 36 emulator.

Author: quantizor

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java

@@ -46,6 +46,7 @@
 import com.facebook.react.uimanager.style.BorderStyle;
 import com.facebook.react.uimanager.style.LogicalEdge;
 import com.facebook.react.uimanager.style.Overflow;
+import com.facebook.react.views.text.internal.span.DrawCommandSpan;
 import com.facebook.react.views.text.internal.span.ReactFragmentIndexSpan;
 import com.facebook.react.views.text.internal.span.ReactTagSpan;
 import com.facebook.yoga.YogaMeasureMode;
@@ -213,6 +214,24 @@ protected void onDraw(Canvas canvas) {
       }
 
       super.onDraw(canvas);
+
+      if (spanned != null) {
+        Layout layout = getLayout();
+        if (layout != null) {
+          DrawCommandSpan[] drawSpans =
+              spanned.getSpans(0, spanned.length(), DrawCommandSpan.class);
+          if (drawSpans.length > 0) {
+            canvas.save();
+            canvas.translate(getCompoundPaddingLeft(), getExtendedPaddingTop());
+            for (DrawCommandSpan span : drawSpans) {
+              int start = spanned.getSpanStart(span);
+              int end = spanned.getSpanEnd(span);
+              span.onDraw(start, end, canvas, layout);
+            }
+            canvas.restore();
+          }
+        }
+      }
     }
   }
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.kt

@@ -92,6 +92,14 @@ public class TextAttributeProps private constructor() {
   public var isLineThroughTextDecorationSet: Boolean = false
     private set
 
+  /**
+   * Underline color. `Color.TRANSPARENT` (the default) means "fall back to
+   * the text color" so existing call sites that don't pass a value retain
+   * the prior behavior. Honored by `ReactUnderlineSpan` on API 29+.
+   */
+  public var textDecorationColor: Int = android.graphics.Color.TRANSPARENT
+    private set
+
   private var includeFontPadding: Boolean = true
 
   public var accessibilityRole: AccessibilityRole? = null
@@ -415,7 +423,7 @@ public class TextAttributeProps private constructor() {
           TA_KEY_LINE_HEIGHT -> result.lineHeight = entry.doubleValue.toFloat()
           TA_KEY_ALIGNMENT -> {}
           TA_KEY_BEST_WRITING_DIRECTION -> {}
-          TA_KEY_TEXT_DECORATION_COLOR -> {}
+          TA_KEY_TEXT_DECORATION_COLOR -> result.textDecorationColor = entry.intValue
           TA_KEY_TEXT_DECORATION_LINE -> result.setTextDecorationLine(entry.stringValue)
           TA_KEY_TEXT_DECORATION_STYLE -> {}
           TA_KEY_TEXT_SHADOW_RADIUS -> result.textShadowRadius = entry.doubleValue.toFloat()
@@ -462,6 +470,8 @@ public class TextAttributeProps private constructor() {
       result.setFontVariant(getArrayProp(props, ViewProps.FONT_VARIANT))
       result.includeFontPadding = getBooleanProp(props, ViewProps.INCLUDE_FONT_PADDING, true)
       result.setTextDecorationLine(getStringProp(props, ViewProps.TEXT_DECORATION_LINE))
+      result.textDecorationColor =
+          getIntProp(props, "textDecorationColor", android.graphics.Color.TRANSPARENT)
       result.setTextShadowOffset(
           if (props.hasKey(PROP_SHADOW_OFFSET)) props.getMap(PROP_SHADOW_OFFSET) else null
       )

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.kt

@@ -315,7 +315,7 @@ internal object TextLayoutManager {
           )
         }
         if (textAttributes.isUnderlineTextDecorationSet) {
-          ops.add(SetSpanOperation(start, end, ReactUnderlineSpan()))
+          ops.add(SetSpanOperation(start, end, ReactUnderlineSpan(textAttributes.textDecorationColor)))
         }
         if (textAttributes.isLineThroughTextDecorationSet) {
           ops.add(SetSpanOperation(start, end, ReactStrikethroughSpan()))
@@ -494,7 +494,7 @@ internal object TextLayoutManager {
         }
 
         if (fragment.props.isUnderlineTextDecorationSet) {
-          spannable.setSpan(ReactUnderlineSpan(), start, end, spanFlags)
+          spannable.setSpan(ReactUnderlineSpan(fragment.props.textDecorationColor), start, end, spanFlags)
         }
 
         if (fragment.props.isLineThroughTextDecorationSet) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/internal/span/ReactUnderlineSpan.kt

@@ -7,7 +7,62 @@
 
 package com.facebook.react.views.text.internal.span
 
-import android.text.style.UnderlineSpan
+import android.graphics.Canvas
+import android.graphics.Color
+import android.os.Build
+import android.text.Layout
+import kotlin.math.max
 
-/** Wraps [UnderlineSpan] as a [ReactSpan]. */
-internal class ReactUnderlineSpan : UnderlineSpan(), ReactSpan
+/**
+ * Draws an underline whose color may differ from the text color. Subclasses
+ * [DrawCommandSpan] so [PreparedLayoutTextView] invokes [onDraw] after the
+ * layout renders its text, ensuring the underline paints on top of any
+ * descenders. We do NOT extend [android.text.style.UnderlineSpan] here:
+ * the framework's `Layout.draw` reads `paint.color` for underline color
+ * regardless of `paint.underlineColor`, so the only way to get a distinct
+ * underline color is to draw it ourselves.
+ *
+ * When [color] is [Color.TRANSPARENT] (the default when no
+ * `textDecorationColor` prop was passed), the underline is drawn in the
+ * text's foreground color, matching the platform's prior behavior.
+ */
+internal class ReactUnderlineSpan(private val color: Int = Color.TRANSPARENT) :
+    DrawCommandSpan() {
+
+  override fun onDraw(start: Int, end: Int, canvas: Canvas, layout: Layout) {
+    val paint = layout.paint
+    val savedColor = paint.color
+    val savedStrokeWidth = paint.strokeWidth
+    val savedStyle = paint.style
+    val savedAntiAlias = paint.isAntiAlias
+    val effectiveColor = if (color != Color.TRANSPARENT) color else savedColor
+    val thickness =
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+          max(paint.underlineThickness, 1.5f)
+        } else {
+          max(paint.fontMetrics.descent * 0.1f, 1.5f)
+        }
+
+    paint.color = effectiveColor
+    paint.strokeWidth = thickness
+    paint.style = android.graphics.Paint.Style.STROKE
+    paint.isAntiAlias = true
+
+    val startLine = layout.getLineForOffset(start)
+    val endLine = layout.getLineForOffset(end)
+    for (line in startLine..endLine) {
+      val baseline = layout.getLineBaseline(line).toFloat()
+      val x1 =
+          if (line == startLine) layout.getPrimaryHorizontal(start) else layout.getLineLeft(line)
+      val x2 =
+          if (line == endLine) layout.getPrimaryHorizontal(end) else layout.getLineRight(line)
+      val y = baseline + thickness + 1f
+      canvas.drawLine(x1, y, x2, y, paint)
+    }
+
+    paint.color = savedColor
+    paint.strokeWidth = savedStrokeWidth
+    paint.style = savedStyle
+    paint.isAntiAlias = savedAntiAlias
+  }
+}