Android textTransform style support

[stephencookdev]

Issue #2088 (closed, but a bit pre-emptively imo, since Android support was skipped)

Related (merged) iOS PR #18387

Related documentation PR facebook/react-native-website#500

The basic desire is to have a declarative mechanism to transform text content to uppercase or lowercase or titlecase ("capitalized").

Test Plan:

My test plan involves having copied exactly the iOS test-case, i.e. adding a test-case to the RNTester app within the component area. I then manually verified that the rendered content met my expectation.

The test itself is:

<RNTesterBlock title="Text transform">
  <Text style={{textTransform: 'uppercase'}}>
    This text should be uppercased.
  </Text>
  <Text style={{textTransform: 'lowercase'}}>
    This TEXT SHOULD be lowercased.
  </Text>
  <Text style={{textTransform: 'capitalize'}}>
    This text should be CAPITALIZED.
  </Text>
  <Text style={{textTransform: 'capitalize'}}>
    Mixed: <Text style={{textTransform: 'uppercase'}}>uppercase </Text>
    <Text style={{textTransform: 'lowercase'}}>LoWeRcAsE </Text>
    <Text style={{textTransform: 'capitalize'}}>
      capitalize each word
    </Text>
  </Text>
  <Text>
    Should be "ABC":
    <Text style={{textTransform: 'uppercase'}}>
      a<Text>b</Text>c
    </Text>
  </Text>
  <Text>
    Should be "AbC":
    <Text style={{textTransform: 'uppercase'}}>
      a<Text style={{textTransform: 'none'}}>b</Text>c
    </Text>
  </Text>
</RNTesterBlock>

And here is what that looks like:

Release Notes:

[ANDROID] [ENHANCEMENT] [Text] - added textTransform style property enabling declarative casing transformations

[janicduplessis]

Thanks for working on this!

Looks good, we just need to improve the capitalize implementation to be more robust and consistent with iOS.

[janicduplessis]

This will need to be a bit more robust to match iOS's [NSString capitalizedString]. I did some testing and something like this seems to work well and produce the same result as iOS.

import java.text.BreakIterator;

...

String text = ".aa\nbb\tcc  dd EE \r\nZZ I like to eat apples. 中文éé 我喜欢吃苹果。awdawd   ";

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;
}
Log.d("test", res.toString());

(based on https://stackoverflow.com/a/42219474)

Might be nice to also add some more complex test cases like this. Could be a good candidate for some unit tests too.

[stephencookdev]

Nice, thanks for this! I've used your suggestion in c580a50 and included your test string in the test view, as well as writing some UTs.

Although, I'm struggling to run them and I've noticed this in the UTs BUCK file:

rn_robolectric_test(
    name = "views",
    # TODO Disabled temporarily until Yoga linking is fixed t14964130
    # srcs = glob(['**/*.java']),
    srcs = glob(["image/*.java"]),

I can't see that issue, or run the Text UTs without hitting the linking issue mentioned 🤔 (so my UTs... probably work? 😅)

Not sure if anyone knows a way around this?

[janicduplessis]

@facebook-github-bot shipit

[facebook-github-bot]

janicduplessis is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was closed by Stephen Cook in 22cf5dc.

Once this commit is added to a release, you will see the corresponding version tag below the description at 22cf5dc. If the commit has a single master tag, it is not yet part of a release.