Support simple opacity in nested text

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -7823,6 +7823,7 @@ public class com/facebook/react/views/text/TextAttributeProps {
 	protected field mLineHeight F
 	protected field mLineHeightInput F
 	protected field mNumberOfLines I
+	protected field mOpacity F
 	protected field mRole Lcom/facebook/react/uimanager/ReactAccessibilityDelegate$Role;
 	protected field mTextAlign I
 	protected field mTextShadowColor I
@@ -7846,6 +7847,7 @@ public class com/facebook/react/views/text/TextAttributeProps {
 	public static fun getJustificationMode (Lcom/facebook/react/uimanager/ReactStylesDiffMap;I)I
 	public static fun getLayoutDirection (Ljava/lang/String;)I
 	public fun getLetterSpacing ()F
+	public fun getOpacity ()F
 	public fun getRole ()Lcom/facebook/react/uimanager/ReactAccessibilityDelegate$Role;
 	public static fun getTextAlignment (Lcom/facebook/react/uimanager/ReactStylesDiffMap;ZI)I
 	public static fun getTextBreakStrategy (Ljava/lang/String;)I

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

@@ -84,6 +84,7 @@ public class TextAttributeProps {
   protected int mColor;
   protected boolean mIsBackgroundColorSet = false;
   protected int mBackgroundColor;
+  protected float mOpacity = Float.NaN;
 
   protected int mNumberOfLines = ReactConstants.UNSET;
   protected int mFontSize = ReactConstants.UNSET;
@@ -161,6 +162,7 @@ public static TextAttributeProps fromMapBuffer(MapBuffer props) {
           result.setBackgroundColor(entry.getIntValue());
           break;
         case TA_KEY_OPACITY:
+          result.setOpacity((float) entry.getDoubleValue());
           break;
         case TA_KEY_FONT_FAMILY:
           result.setFontFamily(entry.getStringValue());
@@ -251,6 +253,7 @@ public static TextAttributeProps fromReadableMap(ReactStylesDiffMap props) {
         props.hasKey(ViewProps.BACKGROUND_COLOR)
             ? props.getInt(ViewProps.BACKGROUND_COLOR, 0)
             : null);
+    result.setOpacity(getFloatProp(props, ViewProps.OPACITY, Float.NaN));
     result.setFontFamily(getStringProp(props, ViewProps.FONT_FAMILY));
     result.setFontWeight(getStringProp(props, ViewProps.FONT_WEIGHT));
     result.setFontStyle(getStringProp(props, ViewProps.FONT_STYLE));
@@ -453,6 +456,14 @@ private void setBackgroundColor(Integer color) {
     // }
   }
 
+  public float getOpacity() {
+    return mOpacity;
+  }
+
+  private void setOpacity(float opacity) {
+    mOpacity = opacity;
+  }
+
   public boolean isBackgroundColorSet() {
     return mIsBackgroundColorSet;
   }

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

@@ -40,6 +40,7 @@
 import com.facebook.react.views.text.internal.span.ReactBackgroundColorSpan;
 import com.facebook.react.views.text.internal.span.ReactClickableSpan;
 import com.facebook.react.views.text.internal.span.ReactForegroundColorSpan;
+import com.facebook.react.views.text.internal.span.ReactOpacitySpan;
 import com.facebook.react.views.text.internal.span.ReactStrikethroughSpan;
 import com.facebook.react.views.text.internal.span.ReactTagSpan;
 import com.facebook.react.views.text.internal.span.ReactUnderlineSpan;
@@ -240,6 +241,10 @@ private static void buildSpannableFromFragments(
               new SetSpanOperation(
                   start, end, new ReactBackgroundColorSpan(textAttributes.mBackgroundColor)));
         }
+        if (!Float.isNaN(textAttributes.getOpacity())) {
+          ops.add(
+              new SetSpanOperation(start, end, new ReactOpacitySpan(textAttributes.getOpacity())));
+        }
         if (!Float.isNaN(textAttributes.getLetterSpacing())) {
           ops.add(
               new SetSpanOperation(

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

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.text.internal.span
+
+import android.graphics.Color
+import android.text.TextPaint
+import android.text.style.CharacterStyle
+import android.text.style.UpdateAppearance
+import kotlin.math.roundToInt
+
+/** Multiplies foreground and background alpha channels by given opacity */
+public class ReactOpacitySpan(public val opacity: Float) :
+    CharacterStyle(), UpdateAppearance, ReactSpan {
+
+  override fun updateDrawState(paint: TextPaint) {
+    paint.alpha = (Color.alpha(paint.color) * opacity).roundToInt()
+
+    if (paint.bgColor != 0) {
+      paint.bgColor =
+          Color.argb(
+              (Color.alpha(paint.bgColor) * opacity).roundToInt(),
+              Color.red(paint.bgColor),
+              Color.green(paint.bgColor),
+              Color.blue(paint.bgColor),
+          )
+    }
+  }
+}

packages/rn-tester/js/examples/Text/TextExample.android.js

@@ -675,6 +675,21 @@ function NestedExample(props: {}): React.Node {
         <Text style={{color: 'blue'}}>blue color, </Text>
         and red color again
       </Text>
+      <Text style={{opacity: 0.7}}>
+        (opacity
+        <Text>
+          (is inherited
+          <Text style={{opacity: 0.7}}>
+            (and accumulated
+            <Text style={{opacity: 0.5, backgroundColor: '#ffaaaa'}}>
+              (and also applies to the background)
+            </Text>
+            )
+          </Text>
+          )
+        </Text>
+        )
+      </Text>
     </>
   );
 }