Fix textTransform when used with other text styles on Android

Author: janicduplessis

RNTester/js/TextExample.android.js

@@ -584,6 +584,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

@@ -85,17 +85,25 @@ public void execute(SpannableStringBuilder sb, int priority) {
   private static void buildSpannedFromShadowNode(
       ReactBaseTextShadowNode textShadowNode,
       SpannableStringBuilder sb,
-      List<SetSpanOperation> ops) {
+      List<SetSpanOperation> ops,
+      TextTransform inheritedTextTransform) {
 
     int start = sb.length();
 
+    if (textShadowNode.mTextTransform != TextTransform.UNSET) {
+      inheritedTextTransform = textShadowNode.mTextTransform;
+    }
+
     for (int i = 0, length = textShadowNode.getChildCount(); i < length; i++) {
       ReactShadowNode child = textShadowNode.getChildAt(i);
 
       if (child instanceof ReactRawTextShadowNode) {
-        sb.append(((ReactRawTextShadowNode) child).getText());
+        sb.append(
+            TextTransform.apply(
+                ((ReactRawTextShadowNode) child).getText(),
+                inheritedTextTransform));
       } else if (child instanceof ReactBaseTextShadowNode) {
-        buildSpannedFromShadowNode((ReactBaseTextShadowNode) child, sb, ops);
+        buildSpannedFromShadowNode((ReactBaseTextShadowNode) child, sb, ops, inheritedTextTransform);
       } else if (child instanceof ReactTextInlineImageShadowNode) {
         // We make the image take up 1 character in the span and put a corresponding character into
         // the text so that the image doesn't run over any following text.
@@ -174,13 +182,6 @@ private static void buildSpannedFromShadowNode(
             new SetSpanOperation(
                 start, end, new CustomLineHeightSpan(textShadowNode.getEffectiveLineHeight())));
       }
-      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())));
     }
   }
@@ -201,10 +202,10 @@ protected static Spannable spannedFromShadowNode(
     // a new spannable will be wiped out
     List<SetSpanOperation> ops = new ArrayList<>();
 
-    buildSpannedFromShadowNode(textShadowNode, sb, ops);
+    buildSpannedFromShadowNode(textShadowNode, sb, ops, TextTransform.UNSET);
 
     if (text != null) {
-      sb.append(text);
+      sb.append(TextTransform.apply(text, textShadowNode.mTextTransform));
     }
 
     if (textShadowNode.mFontSize == UNSET) {

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

@@ -62,8 +62,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) {
@@ -84,7 +88,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) {
@@ -141,13 +144,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();
+  }
+};