Skip to content

Commit

Permalink
iOS textTransform style support
Browse files Browse the repository at this point in the history
Summary:
Issue [#2088](facebook/react-native#2088).

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

My test plan involves having added a test-case to the RNTester app within the `<Text>` component area.   I then manually verified that the rendered content met my expectation.

Here is the markup that exercises my enhancement:

```
<View>
  <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>
</View>
```

And here is a screenshot of the result:

![screen shot 2018-03-14 at 3 01 02 pm](https://user-images.githubusercontent.com/575821/37433772-7abe7fa0-279a-11e8-9ec9-fb3aa1952dad.png)

[Website Documentation PR](facebook/react-native-website#254)
facebook/react-native-website#254

[IOS] [ENHANCEMENT] [Text] - added textTransform style property enabling declarative casing transformations
Closes facebook/react-native#18387

Differential Revision: D7583315

Pulled By: shergin

fbshipit-source-id: a5d22aea2aa4f494b7b25a055abe64799ccbaa79
  • Loading branch information
TomSwift authored and facebook-github-bot committed Apr 16, 2018
1 parent 91e2d47 commit c29eb22
Showing 1 changed file with 36 additions and 0 deletions.
36 changes: 36 additions & 0 deletions js/TextExample.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -860,6 +860,42 @@ exports.examples = [
title: 'Text `alignItems: \'baseline\'` style',
render: function() {
return <TextBaseLineLayoutExample />;
}
},
{
title: 'Transform',
render: function() {
return (
<View>
<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>
</View>
);
},
},
];

0 comments on commit c29eb22

Please sign in to comment.