Skip to content

Commit 8b5a5d4

Browse files
MaeIgfacebook-github-bot
authored andcommitted
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](#32697) and tried to solve it. (code example: https://snack.expo.dev/maelg/capitalize-demo) | Android | IOS | Web | | ------------- | ------------- | ------------- | | ![image](https://user-images.githubusercontent.com/40902940/146158714-c658a83e-d8f3-41c9-92c8-4fc1f722f942.png) | ![image](https://user-images.githubusercontent.com/40902940/146159059-3cec1f7b-9bc7-4060-8164-79c47694b86b.png) | ![image](https://user-images.githubusercontent.com/40902940/146158095-0f94f25f-f245-4e45-9191-73520a0f6568.png) | 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: #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 | | ------------- | ------------- | | ![image](https://user-images.githubusercontent.com/40902940/146191361-e2de26d1-3915-47dc-8707-480504af24d6.png) | ![image](https://user-images.githubusercontent.com/40902940/146161660-c869202a-104e-4d16-8f5e-db1c72b2ea5e.png) | ~~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
1 parent f595a4e commit 8b5a5d4

File tree

3 files changed

+42
-1
lines changed

3 files changed

+42
-1
lines changed

Libraries/Text/RCTTextAttributes.m

+18-1
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,23 @@ - (UIColor *)effectiveBackgroundColor
237237
return effectiveBackgroundColor ?: [UIColor clearColor];
238238
}
239239

240+
static NSString *capitalizeText(NSString *text)
241+
{
242+
NSArray *words = [text componentsSeparatedByString:@" "];
243+
NSMutableArray *newWords = [NSMutableArray new];
244+
NSNumberFormatter *num = [NSNumberFormatter new];
245+
for (NSString *item in words) {
246+
NSString *word;
247+
if ([item length] > 0 && [num numberFromString:[item substringWithRange:NSMakeRange(0, 1)]] == nil) {
248+
word = [item capitalizedString];
249+
} else {
250+
word = [item lowercaseString];
251+
}
252+
[newWords addObject:word];
253+
}
254+
return [newWords componentsJoinedByString:@" "];
255+
}
256+
240257
- (NSString *)applyTextAttributesToText:(NSString *)text
241258
{
242259
switch (_textTransform) {
@@ -248,7 +265,7 @@ - (NSString *)applyTextAttributesToText:(NSString *)text
248265
case RCTTextTransformUppercase:
249266
return [text uppercaseString];
250267
case RCTTextTransformCapitalize:
251-
return [text capitalizedString];
268+
return capitalizeText(text);
252269
}
253270
}
254271

packages/rn-tester/js/examples/Text/TextExample.android.js

+12
Original file line numberDiff line numberDiff line change
@@ -798,6 +798,18 @@ class TextExample extends React.Component<{...}> {
798798
<Text style={{textTransform: 'capitalize'}}>
799799
This text should be CAPITALIZED.
800800
</Text>
801+
<Text>
802+
Capitalize a date:
803+
<Text style={{textTransform: 'capitalize'}}>
804+
the 9th of november, 1998
805+
</Text>
806+
</Text>
807+
<Text>
808+
Capitalize a 2 digit date:
809+
<Text style={{textTransform: 'capitalize'}}>
810+
the 25th of december
811+
</Text>
812+
</Text>
801813
<Text style={{textTransform: 'capitalize'}}>
802814
Mixed: <Text style={{textTransform: 'uppercase'}}>uppercase </Text>
803815
<Text style={{textTransform: 'lowercase'}}>LoWeRcAsE </Text>

packages/rn-tester/js/examples/Text/TextExample.ios.js

+12
Original file line numberDiff line numberDiff line change
@@ -1160,6 +1160,18 @@ exports.examples = [
11601160
<Text style={{textTransform: 'capitalize'}}>
11611161
This text should be CAPITALIZED.
11621162
</Text>
1163+
<Text>
1164+
Capitalize a date:
1165+
<Text style={{textTransform: 'capitalize'}}>
1166+
the 9th of november, 1998
1167+
</Text>
1168+
</Text>
1169+
<Text>
1170+
Capitalize a 2 digit date:
1171+
<Text style={{textTransform: 'capitalize'}}>
1172+
the 25th of december
1173+
</Text>
1174+
</Text>
11631175
<Text style={{textTransform: 'capitalize'}}>
11641176
Mixed: <Text style={{textTransform: 'uppercase'}}>uppercase </Text>
11651177
<Text style={{textTransform: 'lowercase'}}>LoWeRcAsE </Text>

0 commit comments

Comments
 (0)