[TextView] [CSS] text-transform support?

Hey, Given recent updates to text-decoration implementation, I was wondering if this would’ve been in scope of React Native? I know we can pretty easily do this:

<Text>{'something'.toUpperCase()}</Text>

but having universal apps in mind, basic support for upperCase and lowerCase would be nice.

<Text style={{textTransform: 'uppercase'}}>something</Text>

Depending on how Text is rendered, either basic NSString bindings below might be used or plain JS methods:

• capitalize - NSString -capitalizedString
• uppercase - NSString -uppercaseString
• lowercase - NSString -lowercaseString

If the answer to my question is Yes - I am happy to add in this in a PR.

[mikefrancis]

Just stumbled upon this thread from Google; I’d say that adding textTransform support is necessary to separate your concerns. As others have pointed out, you can do this in JS, however what’s the point in having a class full of styles and then having to use JS to force caps.

Say a couple of months down the line you don’t wish to use caps any more then you’ve got to trawl through your app removing all the references to it. Having this as a style would alleviate that problem.

[jonlong]

@brentvatne Just dropping in to echo @mikefrancis’s comments, which are right on the money in my experience.

Here’s a quick example from a project I’m working on. This is the same screen with two different design options — labels rendered in title case, or labels rendered in small caps.

There’s two things that make a textTransform property attractive to me in this case. The first is that I think there’s a semantic difference between setting the actual content of <Text> to CITY rather than City. If preserving that semantic state is important, then I think this becomes a matter of style.

The second is to @mikefrancis’s points around separation of concerns and maintainability. If it’s a matter of style, then it makes sense to manage it with CSS.

Here’s a sample of the JSX for both of those views:

Title Case:

<View { ...style('field') }>
  <TextInput
    { ...style('input') }
  />
  <Text { ...style('label') }>Address Line 1</Text>
</View>

<View { ...style('field') }>
  <TextInput
    { ...style('input') }
  />
  <Text { ...style('label') }>Address Line 2</Text>
</View>

<View { ...style('field') }>
  <TextInput
    { ...style('input') }
  />
  <Text { ...style('label') }>City</Text>
</View>

<View { ...style('field') }>
  <TextInput
    { ...style('input') }
  />
  <Text { ...style('label') }>State</Text>
</View>

<View { ...style('field') }>
  <TextInput
    { ...style('input') }
  />
  <Text { ...style('label') }>Zipcode</Text>
</View>

And the same code modified for small caps:

<View { ...style('field') }>
  <TextInput
    { ...style('input') }
  />
  <Text { ...style('label.upper') }>{'Address Line 1'.toUpperCase()}</Text>
</View>

<View { ...style('field') }>
  <TextInput
    { ...style('input') }
  />
  <Text { ...style('label.upper') }>{'Address Line 2'.toUpperCase()}</Text>
</View>

<View { ...style('field') }>
  <TextInput
    { ...style('input') }
  />
  <Text { ...style('label.upper') }>{'City'.toUpperCase()}</Text>
</View>

<View { ...style('field') }>
  <TextInput
    { ...style('input') }
  />
  <Text { ...style('label.upper') }>{'State'.toUpperCase()}</Text>
</View>

<View { ...style('field') }>
  <TextInput
    { ...style('input') }
  />
  <Text { ...style('label.upper') }>{'Zipcode'.toUpperCase()}</Text>
</View>

In the second version, a simple design change requires a lot of updates to the template content itself. Even going the “Find and Replace” route would be pretty tricky.

I also find that in many scenarios, small caps tend to look better with a little bit of letterSpacing applied. In that case, I’d also end up modifying my styles too.

IMO, it’s a lot of overhead for a common use case, and something that could go from all this to a single line in a stylesheet with textTransform support.