-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TextView] [CSS] text-transform support? #2088
Comments
Not sure I understand the request - what do you want exactly that you can't do with plain JavaScript?
|
Well, just wondering what are the pros/cons of implementing |
Our general philosophy on RN is not to provide APIs unless they both
|
Adding on to @sahrens' comment above, if anyone comes across some use cases where there is a significant benefit to doing this in a style rather than with JS, please post them here so we can consider! |
+1 strongly in favor of keeping code in user space. |
Just stumbled upon this thread from Google; I'd say that adding 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. |
@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 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 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 |
Another option is to wrap the Text component with one that adds the capabilities that you want, so then if you have the uppercase prop set on it, it will |
+1 I really need this on a specific app that uses it a lot. Thanks! |
I'm in a situation where I can't access the |
+1 for me as well. I am a designer which likes to develop UI's when I get the chance. Unfortunately, my Javascript skills are not great, yet. Having a more CSS centric approach to building UI's would really help me. Granted I should probably just learn Javascript and be done with it. However, I am sure there are others like me which like to code UI's but have not reached the level where they can use Javascript as an alternative. My 2 cents. |
+1 it's clearly a style concern. it was a concern on the web and now on mobile. |
+1 |
4 similar comments
+1 |
+1 |
+1 |
+1 |
the advantage of css "class" is to not duplicate codes. I strongly think we need "whole supports" css system for RN. |
+1 |
2 similar comments
+1 |
+1 |
For all the folks posting "+1" feedback in this thread, consider that it triggers a notification (often an email) not just for the React Native team, but for anyone subscribed to the thread (which can easily be several hundred people at once). On behalf of those who'd like to keep tabs on this thread's progress without receiving daily "+1" emails, please consider using GitHub's reaction feature — it's a nice new way of registering +1-style feedback without blanket notifications to an entire subscriber list: |
+1 |
So is this happening, or is it just closed and left to die? 😕 |
Why closing this? It seems so immature decision to not support obvious CSS properties and to duplicate the code for cross-universal apps! |
+2 |
It seems like there is enough desire here that if someone wants to submit a PR for this, we'd probably take it. |
+1 We're building components that work in both web and react-native and using JS to transform text in web feels so wrong. |
I'm somewhat surprised that serious developers on a project as big as React Native have suggested using JS to modify text strings when |
+3 |
+1 |
1 similar comment
+1 |
@nmerchant Especially since there's a PR for it by @TomSwift . Maybe @sahrens can reevaluate? |
@nmerchant @philtrep I believe we're really close to having my PR merged. It's a slower process than I'd realized. |
@TomSwift that's only half the solution though...still need Android support :( but nevertheless, bless you for taking this up. |
Summary: Issue [#2088](#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 #18387 Differential Revision: D7583315 Pulled By: shergin fbshipit-source-id: a5d22aea2aa4f494b7b25a055abe64799ccbaa79
+1 |
8 similar comments
+1 |
+1 |
+1 |
+1 |
+1 |
+1 |
+1 |
+1 |
I'm not sure this weird +1 posting will achieve anything, except alerting everyone who is still subscribed to this. There are emoji reactions on github now and since this has been closed it would probably make much more sense to open a new issue about android support for this. What's really needed is someone with the needed Android experience to create a pull request though. |
Summary: Issue [facebook#2088](facebook#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#18387 Differential Revision: D7583315 Pulled By: shergin fbshipit-source-id: a5d22aea2aa4f494b7b25a055abe64799ccbaa79
+1 |
1 similar comment
+1 |
+10 |
+1 |
Seems to be added in 0.56! |
Summary: Issue [facebook#2088](facebook#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#18387 Differential Revision: D7583315 Pulled By: shergin fbshipit-source-id: a5d22aea2aa4f494b7b25a055abe64799ccbaa79
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:but having universal apps in mind, basic support for
upperCase
andlowerCase
would be nice.Depending on how Text is rendered, either basic NSString bindings below might be used or plain JS methods:
capitalize
- NSString -capitalizedStringuppercase
- NSString -uppercaseStringlowercase
- NSString -lowercaseStringIf the answer to my question is Yes - I am happy to add in this in a PR.
The text was updated successfully, but these errors were encountered: