Fix textTransform when used with other text styles on Android (#22670)

Summary:
On Android `textTransform` breaks other styles applied to the text. It seems related to the usage of `ReplacementSpan` which allows drawing the text manually but seems to throw away some changes made by other span applied to the text.

To fix it I removed the usage of `ReplacementSpan` and simply transform the text before appending it to the `Spannable` string. To make sure textTransform is inherited correctly I added it to TextAttributes which handles this.
Pull Request resolved: #22670

Differential Revision: D13494819

Pulled By: cpojer

fbshipit-source-id: 1c69591084aa906c2d3b10153b354d39c0936340

Author: janicduplessis

RNTester/js/TextExample.android.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+/* eslint-disable react-native/no-inline-styles */
+
 'use strict';
 
 const React = require('react');
@@ -600,6 +602,18 @@ class TextExample extends React.Component<{}> {
               '.aa\tbb\t\tcc  dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd   '
             }
           </Text>
+          <Text
+            style={{
+              textTransform: 'uppercase',
+              fontSize: 16,
+              color: 'turquoise',
+              backgroundColor: 'blue',
+              lineHeight: 32,
+              letterSpacing: 2,
+              alignSelf: 'flex-start',
+            }}>
+            Works with other text styles
+          </Text>
         </RNTesterBlock>
       </RNTesterPage>
     );

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

@@ -22,6 +22,7 @@
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.yoga.YogaDirection;
+
 import java.util.ArrayList;
 import java.util.List;
 import javax.annotation.Nullable;
@@ -94,7 +95,10 @@ private static void buildSpannedFromShadowNode(
       ReactShadowNode child = textShadowNode.getChildAt(i);
 
       if (child instanceof ReactRawTextShadowNode) {
-        sb.append(((ReactRawTextShadowNode) child).getText());
+        sb.append(
+            TextTransform.apply(
+                ((ReactRawTextShadowNode) child).getText(),
+                textAttributes.getTextTransform()));
       } else if (child instanceof ReactBaseTextShadowNode) {
         buildSpannedFromShadowNode((ReactBaseTextShadowNode) child, sb, ops, textAttributes, sb.length());
       } else if (child instanceof ReactTextInlineImageShadowNode) {
@@ -182,13 +186,6 @@ private static void buildSpannedFromShadowNode(
             new SetSpanOperation(
                 start, end, new CustomLineHeightSpan(effectiveLineHeight)));
       }
-      if (textShadowNode.mTextTransform != TextTransform.UNSET) {
-        ops.add(
-          new SetSpanOperation(
-            start,
-            end,
-            new CustomTextTransformSpan(textShadowNode.mTextTransform)));
-      }
       ops.add(new SetSpanOperation(start, end, new ReactTagSpan(textShadowNode.getReactTag())));
     }
   }
@@ -207,7 +204,7 @@ protected static Spannable spannedFromShadowNode(
     if (text != null) {
       // Handle text that is provided via a prop (e.g. the `value` and `defaultValue` props on
       // TextInput).
-      sb.append(text);
+      sb.append(TextTransform.apply(text, textShadowNode.mTextAttributes.getTextTransform()));
     }
 
     buildSpannedFromShadowNode(textShadowNode, sb, ops, null, 0);
@@ -266,7 +263,6 @@ private static int parseNumericFontWeight(String fontWeightString) {
   protected int mTextAlign = Gravity.NO_GRAVITY;
   protected int mTextBreakStrategy =
       (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) ? 0 : Layout.BREAK_STRATEGY_HIGH_QUALITY;
-  protected TextTransform mTextTransform = TextTransform.UNSET;
 
   protected float mTextShadowOffsetDx = 0;
   protected float mTextShadowOffsetDy = 0;
@@ -528,14 +524,16 @@ public void setTextShadowColor(int textShadowColor) {
 
   @ReactProp(name = PROP_TEXT_TRANSFORM)
   public void setTextTransform(@Nullable String textTransform) {
-    if (textTransform == null || "none".equals(textTransform)) {
-      mTextTransform = TextTransform.NONE;
+    if (textTransform == null) {
+      mTextAttributes.setTextTransform(TextTransform.UNSET);
+    } else if ("none".equals(textTransform)) {
+      mTextAttributes.setTextTransform(TextTransform.NONE);
     } else if ("uppercase".equals(textTransform)) {
-      mTextTransform = TextTransform.UPPERCASE;
+      mTextAttributes.setTextTransform(TextTransform.UPPERCASE);
     } else if ("lowercase".equals(textTransform)) {
-      mTextTransform = TextTransform.LOWERCASE;
+      mTextAttributes.setTextTransform(TextTransform.LOWERCASE);
     } else if ("capitalize".equals(textTransform)) {
-      mTextTransform = TextTransform.CAPITALIZE;
+      mTextAttributes.setTextTransform(TextTransform.CAPITALIZE);
     } else {
       throw new JSApplicationIllegalArgumentException("Invalid textTransform: " + textTransform);
     }

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

@@ -28,6 +28,7 @@ public class TextAttributes {
   private float mLetterSpacing = Float.NaN;
   private float mMaxFontSizeMultiplier = Float.NaN;
   private float mHeightOfTallestInlineImage = Float.NaN;
+  private TextTransform mTextTransform = TextTransform.UNSET;
 
   public TextAttributes() {
   }
@@ -44,6 +45,7 @@ public TextAttributes applyChild(TextAttributes child) {
     result.mLetterSpacing = !Float.isNaN(child.mLetterSpacing) ? child.mLetterSpacing : mLetterSpacing;
     result.mMaxFontSizeMultiplier = !Float.isNaN(child.mMaxFontSizeMultiplier) ? child.mMaxFontSizeMultiplier : mMaxFontSizeMultiplier;
     result.mHeightOfTallestInlineImage = !Float.isNaN(child.mHeightOfTallestInlineImage) ? child.mHeightOfTallestInlineImage : mHeightOfTallestInlineImage;
+    result.mTextTransform = child.mTextTransform != TextTransform.UNSET ? child.mTextTransform : mTextTransform;
 
     return result;
   }
@@ -102,6 +104,14 @@ public void setHeightOfTallestInlineImage(float value) {
     mHeightOfTallestInlineImage = value;
   }
 
+  public TextTransform getTextTransform() {
+    return mTextTransform;
+  }
+
+  public void setTextTransform(TextTransform textTransform) {
+    mTextTransform = textTransform;
+  }
+
   // Getters for effective values
   //
   // In general, these return `Float.NaN` if the property doesn't have a value.
@@ -164,6 +174,7 @@ public String toString() {
       + "\n  getEffectiveLetterSpacing(): " + getEffectiveLetterSpacing()
       + "\n  getLineHeight(): " + getLineHeight()
       + "\n  getEffectiveLineHeight(): " + getEffectiveLineHeight()
+      + "\n  getTextTransform(): " + getTextTransform()
       + "\n  getMaxFontSizeMultiplier(): " + getMaxFontSizeMultiplier()
       + "\n  getEffectiveMaxFontSizeMultiplier(): " + getEffectiveMaxFontSizeMultiplier()
       + "\n}"

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

@@ -57,8 +57,12 @@ private static void buildSpannableFromFragment(
       ReadableMap fragment = fragments.getMap(i);
       int start = sb.length();
 
-      //ReactRawText
-      sb.append(fragment.getString("string"));
+      // ReactRawText
+      TextAttributeProps textAttributes = new TextAttributeProps(new ReactStylesDiffMap(fragment.getMap("textAttributes")));
+
+      sb.append(TextTransform.apply(
+          fragment.getString("string"),
+          textAttributes.mTextTransform));
 
 // TODO: add support for TextInlineImage and BaseText
 //      if (child instanceof ReactRawTextShadowNode) {
@@ -79,7 +83,6 @@ private static void buildSpannableFromFragment(
 //          "Unexpected view type nested under text node: " + child.getClass());
 //      }
 
-      TextAttributeProps textAttributes = new TextAttributeProps(new ReactStylesDiffMap(fragment.getMap("textAttributes")));
       int end = sb.length();
       if (end >= start) {
         if (textAttributes.mIsColorSet) {
@@ -136,13 +139,6 @@ private static void buildSpannableFromFragment(
             new SetSpanOperation(
               start, end, new CustomLineHeightSpan(textAttributes.getEffectiveLineHeight())));
         }
-        if (textAttributes.mTextTransform != TextTransform.UNSET && textAttributes.mTextTransform != TextTransform.NONE) {
-          ops.add(
-            new SetSpanOperation(
-              start,
-              end,
-              new CustomTextTransformSpan(textAttributes.mTextTransform)));
-        }
 
         int reactTag = fragment.getInt("reactTag");
         ops.add(new SetSpanOperation(start, end, new ReactTagSpan(reactTag)));

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

@@ -7,7 +7,54 @@
 
 package com.facebook.react.views.text;
 
+import java.text.BreakIterator;
+
 /**
  * Types of text transforms for CustomTextTransformSpan
  */
-public enum TextTransform { NONE, UPPERCASE, LOWERCASE, CAPITALIZE, UNSET };
+public enum TextTransform {
+  NONE, UPPERCASE, LOWERCASE, CAPITALIZE, UNSET;
+
+  public static String apply(String text, TextTransform textTransform) {
+    if (text == null) {
+      return null;
+    }
+
+    String transformed;
+    switch(textTransform) {
+      case UPPERCASE:
+        transformed = text.toUpperCase();
+        break;
+      case LOWERCASE:
+        transformed = text.toLowerCase();
+        break;
+      case CAPITALIZE:
+        transformed = capitalize(text);
+        break;
+      default:
+        transformed = text;
+    }
+
+    return transformed;
+  }
+
+  private static String capitalize(String text) {
+    BreakIterator wordIterator = BreakIterator.getWordInstance();
+    wordIterator.setText(text);
+
+    StringBuilder res = new StringBuilder(text.length());
+    int start = wordIterator.first();
+    for (int end = wordIterator.next(); end != BreakIterator.DONE; end = wordIterator.next()) {
+      String word = text.substring(start, end);
+      if (Character.isLetterOrDigit(word.charAt(0))) {
+        res.append(Character.toUpperCase(word.charAt(0)));
+        res.append(word.substring(1).toLowerCase());
+      } else {
+        res.append(word);
+      }
+      start = end;
+    }
+
+    return res.toString();
+  }
+};