mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Fix capitalize Text style on IOS (#32774)
Summary: On my project, I realized that capitalize style doesn't work with dates on IOS. I found [this issue](https://github.com/facebook/react-native/issues/32697) and tried to solve it. (code example: https://snack.expo.dev/maelg/capitalize-demo) | Android | IOS | Web | | ------------- | ------------- | ------------- | |  |  |  | As we can see, the behavior is different on IOS, Android and web: - **Android**: Capitalize the first letter of each word, unless it begins with a number. And put the rest in lowercase. - **IOS**: Capitalize the first letter of each word, ~~unless it begins with a number~~. And put the rest in lowercase. - **Web**: Capitalize the first letter of each word, unless it begins with a number. ~~And put the rest in lowercase.~~ This PR aims to unify behavior on Android and Ios. I am not changing the behavior which differs from the web because I don't know if it is desirable to align with the web. ## Changelog [IOS] [Changed] - Don't capitalize the first letter of a word that is starting by a number Pull Request resolved: https://github.com/facebook/react-native/pull/32774 Test Plan: I manually tested my changes on a POC app (same code: https://snack.expo.dev/maelg/capitalize-demo) on react-native v0.66.4 and react-native main branch. You can see the result here: | Android | IOS | | ------------- | ------------- | |  |  | ~~I tried to use rn-tester but it was not taking my code. I think it is because fabric was enabled so it was using other code. I tried to disable fabric but I was not able to build the app on my IOS simulator anymore:~~ On rn-tester: <image src="https://user-images.githubusercontent.com/40902940/146457851-864b2962-5e9c-4c7e-83fd-7686e27cb996.png" width=50% height=50% /> Reviewed By: philIip Differential Revision: D33165963 Pulled By: yungsters fbshipit-source-id: c3bf32bf33d2f109a119798eefdbb9077e904252
This commit is contained in:
committed by
Facebook GitHub Bot
parent
f595a4e681
commit
8b5a5d4645
@@ -237,6 +237,23 @@ NSString *const RCTTextAttributesTagAttributeName = @"RCTTextAttributesTagAttrib
|
||||
return effectiveBackgroundColor ?: [UIColor clearColor];
|
||||
}
|
||||
|
||||
static NSString *capitalizeText(NSString *text)
|
||||
{
|
||||
NSArray *words = [text componentsSeparatedByString:@" "];
|
||||
NSMutableArray *newWords = [NSMutableArray new];
|
||||
NSNumberFormatter *num = [NSNumberFormatter new];
|
||||
for (NSString *item in words) {
|
||||
NSString *word;
|
||||
if ([item length] > 0 && [num numberFromString:[item substringWithRange:NSMakeRange(0, 1)]] == nil) {
|
||||
word = [item capitalizedString];
|
||||
} else {
|
||||
word = [item lowercaseString];
|
||||
}
|
||||
[newWords addObject:word];
|
||||
}
|
||||
return [newWords componentsJoinedByString:@" "];
|
||||
}
|
||||
|
||||
- (NSString *)applyTextAttributesToText:(NSString *)text
|
||||
{
|
||||
switch (_textTransform) {
|
||||
@@ -248,7 +265,7 @@ NSString *const RCTTextAttributesTagAttributeName = @"RCTTextAttributesTagAttrib
|
||||
case RCTTextTransformUppercase:
|
||||
return [text uppercaseString];
|
||||
case RCTTextTransformCapitalize:
|
||||
return [text capitalizedString];
|
||||
return capitalizeText(text);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -798,6 +798,18 @@ class TextExample extends React.Component<{...}> {
|
||||
<Text style={{textTransform: 'capitalize'}}>
|
||||
This text should be CAPITALIZED.
|
||||
</Text>
|
||||
<Text>
|
||||
Capitalize a date:
|
||||
<Text style={{textTransform: 'capitalize'}}>
|
||||
the 9th of november, 1998
|
||||
</Text>
|
||||
</Text>
|
||||
<Text>
|
||||
Capitalize a 2 digit date:
|
||||
<Text style={{textTransform: 'capitalize'}}>
|
||||
the 25th of december
|
||||
</Text>
|
||||
</Text>
|
||||
<Text style={{textTransform: 'capitalize'}}>
|
||||
Mixed: <Text style={{textTransform: 'uppercase'}}>uppercase </Text>
|
||||
<Text style={{textTransform: 'lowercase'}}>LoWeRcAsE </Text>
|
||||
|
||||
@@ -1160,6 +1160,18 @@ exports.examples = [
|
||||
<Text style={{textTransform: 'capitalize'}}>
|
||||
This text should be CAPITALIZED.
|
||||
</Text>
|
||||
<Text>
|
||||
Capitalize a date:
|
||||
<Text style={{textTransform: 'capitalize'}}>
|
||||
the 9th of november, 1998
|
||||
</Text>
|
||||
</Text>
|
||||
<Text>
|
||||
Capitalize a 2 digit date:
|
||||
<Text style={{textTransform: 'capitalize'}}>
|
||||
the 25th of december
|
||||
</Text>
|
||||
</Text>
|
||||
<Text style={{textTransform: 'capitalize'}}>
|
||||
Mixed: <Text style={{textTransform: 'uppercase'}}>uppercase </Text>
|
||||
<Text style={{textTransform: 'lowercase'}}>LoWeRcAsE </Text>
|
||||
|
||||
Reference in New Issue
Block a user