Fix textTransform when used with other text styles on Android

RNTester/js/TextExample.android.js

@@ -600,6 +600,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/ReactBaseTextShadowNode.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/TextAttributes.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/TextLayoutManager.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/TextTransform.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();
+ }
+};