2/n Nested Text textAlignVertical (Android) - adding textAlignVertical prop to NestedText

ReactAndroid/src/main/java/com/facebook/react/views/text/CustomStyleSpan.java

@@ -8,7 +8,6 @@
 package com.facebook.react.views.text;
 
 import android.content.res.AssetManager;
-import android.graphics.Paint;
 import android.graphics.Typeface;
 import android.text.TextPaint;
 import android.text.style.MetricAffectingSpan;
@@ -35,6 +34,10 @@ public class CustomStyleSpan extends MetricAffectingSpan implements ReactSpan {
   private final int mWeight;
   private final @Nullable String mFeatureSettings;
   private final @Nullable String mFontFamily;
+  private int mSize = 0;
+  private TextAlignVertical mTextAlignVertical = TextAlignVertical.CENTER;
+  private int mHighestLineHeight = 0;
+  private int mHighestFontSize = 0;
 
   public CustomStyleSpan(
       int fontStyle,
@@ -49,14 +52,61 @@ public CustomStyleSpan(
     mAssetManager = assetManager;
   }
 
+  public CustomStyleSpan(
+      int fontStyle,
+      int fontWeight,
+      @Nullable String fontFeatureSettings,
+      @Nullable String fontFamily,
+      AssetManager assetManager,
+      TextAlignVertical textAlignVertical,
+      int textSize) {
+    this(fontStyle, fontWeight, fontFeatureSettings, fontFamily, assetManager);
+    mTextAlignVertical = textAlignVertical;
+    mSize = textSize;
+  }
+
+  public enum TextAlignVertical {
+    TOP,
+    BOTTOM,
+    CENTER,
+  }
+
+  public TextAlignVertical getTextAlignVertical() {
+    return mTextAlignVertical;
+  }
+
+  public int getSize() {
+    return mSize;
+  }
+
   @Override
   public void updateDrawState(TextPaint ds) {
-    apply(ds, mStyle, mWeight, mFeatureSettings, mFontFamily, mAssetManager);
+    apply(
+        ds,
+        mStyle,
+        mWeight,
+        mFeatureSettings,
+        mFontFamily,
+        mAssetManager,
+        mTextAlignVertical,
+        mSize,
+        mHighestLineHeight,
+        mHighestFontSize);
   }
 
   @Override
   public void updateMeasureState(TextPaint paint) {
-    apply(paint, mStyle, mWeight, mFeatureSettings, mFontFamily, mAssetManager);
+    apply(
+        paint,
+        mStyle,
+        mWeight,
+        mFeatureSettings,
+        mFontFamily,
+        mAssetManager,
+        mTextAlignVertical,
+        mSize,
+        mHighestLineHeight,
+        mHighestFontSize);
   }
 
   public int getStyle() {
@@ -72,16 +122,68 @@ public int getWeight() {
   }
 
   private static void apply(
-      Paint paint,
+      TextPaint ds,
       int style,
       int weight,
       @Nullable String fontFeatureSettings,
       @Nullable String family,
-      AssetManager assetManager) {
+      AssetManager assetManager,
+      TextAlignVertical textAlignVertical,
+      int textSize,
+      int highestLineHeight,
+      int highestFontSize) {
     Typeface typeface =
-        ReactTypefaceUtils.applyStyles(paint.getTypeface(), style, weight, family, assetManager);
-    paint.setFontFeatureSettings(fontFeatureSettings);
-    paint.setTypeface(typeface);
-    paint.setSubpixelText(true);
+        ReactTypefaceUtils.applyStyles(ds.getTypeface(), style, weight, family, assetManager);
+    ds.setFontFeatureSettings(fontFeatureSettings);
+    ds.setTypeface(typeface);
+    ds.setSubpixelText(true);
+
+    if (textAlignVertical == TextAlignVertical.CENTER || highestLineHeight == 0) {
+      return;
+    }
+
+    // https://stackoverflow.com/a/27631737/7295772
+    // top      -------------  -10
+    // ascent   -------------  -5
+    // baseline __my Text____   0
+    // descent  _____________   2
+    // bottom   _____________   5
+    TextPaint textPaintCopy = new TextPaint();
+    textPaintCopy.set(ds);
+    if (textSize > 0) {
+      textPaintCopy.setTextSize(textSize);
+    }
+
+    if (textSize == highestFontSize) {
+      // aligns text vertically in the lineHeight
+      // and adjust their position depending on the fontSize
+      if (textAlignVertical == TextAlignVertical.TOP) {
+        ds.baselineShift -= highestLineHeight / 2 - textPaintCopy.getTextSize() / 2;
+      }
+      if (textAlignVertical == TextAlignVertical.BOTTOM) {
+        ds.baselineShift +=
+            highestLineHeight / 2 - textPaintCopy.getTextSize() / 2 - textPaintCopy.descent();
+      }
+    } else if (highestFontSize != 0 && textSize < highestFontSize) {
+      // aligns correctly text that has smaller font
+      if (textAlignVertical == TextAlignVertical.TOP) {
+        ds.baselineShift -=
+            highestLineHeight / 2
+                - highestFontSize / 2
+                // smaller font aligns on the baseline of bigger font
+                // moves the baseline of text with smaller font up
+                // so it aligns on the top of the larger font
+                + (highestFontSize - textSize)
+                + (textPaintCopy.getFontMetrics().top - textPaintCopy.ascent());
+      }
+      if (textAlignVertical == TextAlignVertical.BOTTOM) {
+        ds.baselineShift += highestLineHeight / 2 - highestFontSize / 2 - textPaintCopy.descent();
+      }
+    }
+  }
+
+  public void updateSpan(int highestLineHeight, int highestFontSize) {
+    mHighestLineHeight = highestLineHeight;
+    mHighestFontSize = highestFontSize;
   }
 }

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java

@@ -101,6 +101,31 @@ public void updateExtraData(ReactTextView view, Object extraData) {
       ReactAccessibilityDelegate.resetDelegate(
           view, view.isFocusable(), view.getImportantForAccessibility());
     }
+
+    CustomLineHeightSpan[] customLineHeightSpans =
+        spannable.getSpans(0, spannable.length(), CustomLineHeightSpan.class);
+    CustomStyleSpan[] customStyleSpans =
+        spannable.getSpans(0, spannable.length(), CustomStyleSpan.class);
+    if (customLineHeightSpans.length > 0 && customStyleSpans.length > 0) {
+      int highestLineHeight = 0;
+      for (CustomLineHeightSpan span : customLineHeightSpans) {
+        if (highestLineHeight == 0 || span.getLineHeight() > highestLineHeight) {
+          highestLineHeight = span.getLineHeight();
+        }
+      }
+
+      int highestFontSize = 0;
+      if (highestLineHeight != 0) {
+        for (CustomStyleSpan span : customStyleSpans) {
+          if (highestFontSize == 0 || span.getSize() > highestFontSize) {
+            highestFontSize = span.getSize();
+          }
+        }
+        for (CustomStyleSpan span : customStyleSpans) {
+          span.updateSpan(highestLineHeight, highestFontSize);
+        }
+      }
+    }
   }
 
   @Override

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

@@ -54,6 +54,7 @@ public class TextAttributeProps {
   public static final short TA_KEY_IS_HIGHLIGHTED = 20;
   public static final short TA_KEY_LAYOUT_DIRECTION = 21;
   public static final short TA_KEY_ACCESSIBILITY_ROLE = 22;
+  public static final short TA_KEY_ALIGN_VERTICAL = 24;
 
   public static final int UNSET = -1;
 
@@ -100,6 +101,7 @@ public class TextAttributeProps {
   protected boolean mIsUnderlineTextDecorationSet = false;
   protected boolean mIsLineThroughTextDecorationSet = false;
   protected boolean mIncludeFontPadding = true;
+  protected String mTextAlignVertical = "center-child";
 
   protected @Nullable ReactAccessibilityDelegate.AccessibilityRole mAccessibilityRole = null;
   protected boolean mIsAccessibilityRoleSet = false;
@@ -206,6 +208,9 @@ public static TextAttributeProps fromMapBuffer(MapBuffer props) {
         case TA_KEY_ACCESSIBILITY_ROLE:
           result.setAccessibilityRole(entry.getStringValue());
           break;
+        case TA_KEY_ALIGN_VERTICAL:
+          result.setTextAlignVertical(entry.getStringValue());
+          break;
       }
     }
 
@@ -612,6 +617,16 @@ private void setAccessibilityRole(@Nullable String accessibilityRole) {
     }
   }
 
+  private void setTextAlignVertical(String alignVertical) {
+    if (alignVertical.equals("top")) {
+      mTextAlignVertical = "top-child";
+    } else if (alignVertical.equals("center")) {
+      mTextAlignVertical = "center-child";
+    } else if (alignVertical.equals("bottom")) {
+      mTextAlignVertical = "bottom-child";
+    }
+  }
+
   public static int getTextBreakStrategy(@Nullable String textBreakStrategy) {
     int androidTextBreakStrategy = DEFAULT_BREAK_STRATEGY;
     if (textBreakStrategy != null) {

ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManagerMapBuffer.java

@@ -162,7 +162,16 @@ private static void buildSpannableFromFragment(
             new SetSpanOperation(start, end, new ReactAbsoluteSizeSpan(textAttributes.mFontSize)));
         if (textAttributes.mFontStyle != UNSET
             || textAttributes.mFontWeight != UNSET
-            || textAttributes.mFontFamily != null) {
+            || textAttributes.mFontFamily != null
+            || textAttributes.mTextAlignVertical != "center-child") {
+          CustomStyleSpan.TextAlignVertical textAlignVertical =
+              CustomStyleSpan.TextAlignVertical.CENTER;
+          if (textAttributes.mTextAlignVertical == "top-child") {
+            textAlignVertical = CustomStyleSpan.TextAlignVertical.TOP;
+          }
+          if (textAttributes.mTextAlignVertical == "bottom-child") {
+            textAlignVertical = CustomStyleSpan.TextAlignVertical.BOTTOM;
+          }
           ops.add(
               new SetSpanOperation(
                   start,
@@ -172,7 +181,9 @@ private static void buildSpannableFromFragment(
                       textAttributes.mFontWeight,
                       textAttributes.mFontFeatureSettings,
                       textAttributes.mFontFamily,
-                      context.getAssets())));
+                      context.getAssets(),
+                      textAlignVertical,
+                      textAttributes.mFontSize)));
         }
         if (textAttributes.mIsUnderlineTextDecorationSet) {
           ops.add(new SetSpanOperation(start, end, new ReactUnderlineSpan()));

ReactCommon/react/renderer/attributedstring/TextAttributes.cpp

@@ -101,6 +101,7 @@ void TextAttributes::apply(TextAttributes textAttributes) {
   accessibilityRole = textAttributes.accessibilityRole.has_value()
       ? textAttributes.accessibilityRole
       : accessibilityRole;
+  textAlignVertical = !textAttributes.textAlignVertical.empty() ? textAttributes.textAlignVertical : textAlignVertical;
 }
 
 #pragma mark - Operators
@@ -126,6 +127,7 @@ bool TextAttributes::operator==(const TextAttributes &rhs) const {
              isHighlighted,
              layoutDirection,
              accessibilityRole,
+             textAlignVertical,
              textTransform) ==
       std::tie(
              rhs.foregroundColor,
@@ -147,6 +149,7 @@ bool TextAttributes::operator==(const TextAttributes &rhs) const {
              rhs.isHighlighted,
              rhs.layoutDirection,
              rhs.accessibilityRole,
+             rhs.textAlignVertical,
              rhs.textTransform) &&
       floatEquality(opacity, rhs.opacity) &&
       floatEquality(fontSize, rhs.fontSize) &&
@@ -215,6 +218,7 @@ SharedDebugStringConvertibleList TextAttributes::getDebugProps() const {
       debugStringConvertibleItem("isHighlighted", isHighlighted),
       debugStringConvertibleItem("layoutDirection", layoutDirection),
       debugStringConvertibleItem("accessibilityRole", accessibilityRole),
+      debugStringConvertibleItem("textAlignVertical", textAlignVertical),
   };
 }
 #endif

ReactCommon/react/renderer/attributedstring/TextAttributes.h

@@ -81,6 +81,7 @@ class TextAttributes : public DebugStringConvertible {
   // construction.
   std::optional<LayoutDirection> layoutDirection{};
   std::optional<AccessibilityRole> accessibilityRole{};
+  std::string textAlignVertical{};
 
 #pragma mark - Operations
 

ReactCommon/react/renderer/attributedstring/conversions.h

@@ -1036,6 +1036,10 @@ inline folly::dynamic toDynamic(const TextAttributes &textAttributes) {
     _textAttributes(
         "accessibilityRole", toString(*textAttributes.accessibilityRole));
   }
+  if (!textAttributes.textAlignVertical.empty()) {
+    _textAttributes(
+                    "textAlignVertical", textAttributes.textAlignVertical);
+  }
   return _textAttributes;
 }
 
@@ -1110,6 +1114,7 @@ constexpr static MapBuffer::Key TA_KEY_IS_HIGHLIGHTED = 20;
 constexpr static MapBuffer::Key TA_KEY_LAYOUT_DIRECTION = 21;
 constexpr static MapBuffer::Key TA_KEY_ACCESSIBILITY_ROLE = 22;
 constexpr static MapBuffer::Key TA_KEY_LINE_BREAK_STRATEGY = 23;
+constexpr static MapBuffer::Key TA_KEY_VERTICAL_ALIGN = 24;
 
 // constants for ParagraphAttributes serialization
 constexpr static MapBuffer::Key PA_KEY_MAX_NUMBER_OF_LINES = 0;
@@ -1256,6 +1261,10 @@ inline MapBuffer toMapBuffer(const TextAttributes &textAttributes) {
     builder.putString(
         TA_KEY_ACCESSIBILITY_ROLE, toString(*textAttributes.accessibilityRole));
   }
+  if (!textAttributes.textAlignVertical.empty()) {
+    builder.putString(
+                      TA_KEY_VERTICAL_ALIGN, textAttributes.textAlignVertical);
+  }
   return builder.build();
 }
 

ReactCommon/react/renderer/components/text/BaseTextProps.cpp

@@ -197,6 +197,13 @@ static TextAttributes convertRawProp(
       sourceTextAttributes.backgroundColor,
       defaultTextAttributes.backgroundColor);
 
+  textAttributes.textAlignVertical = convertRawProp(
+                                                  context,
+                                                  rawProps,
+                                                  "textAlignVertical",
+                                                  sourceTextAttributes.textAlignVertical,
+                                                  defaultTextAttributes.textAlignVertical);
+
   return textAttributes;
 }
 
@@ -297,6 +304,8 @@ void BaseTextProps::setProp(
         defaults, value, textAttributes, opacity, "opacity");
     REBUILD_FIELD_SWITCH_CASE(
         defaults, value, textAttributes, backgroundColor, "backgroundColor");
+    REBUILD_FIELD_SWITCH_CASE(
+        defaults, value, textAttributes, textAlignVertical, "textAlignVertical");
   }
 }