Skip to content

Commit

Permalink
Fix capitalize Text style on IOS (#32774)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
MaeIg authored and facebook-github-bot committed Jan 25, 2022
1 parent f595a4e commit 8b5a5d4
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 1 deletion.
19 changes: 18 additions & 1 deletion Libraries/Text/RCTTextAttributes.m
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,23 @@ - (UIColor *)effectiveBackgroundColor
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) {
Expand All @@ -248,7 +265,7 @@ - (NSString *)applyTextAttributesToText:(NSString *)text
case RCTTextTransformUppercase:
return [text uppercaseString];
case RCTTextTransformCapitalize:
return [text capitalizedString];
return capitalizeText(text);
}
}

Expand Down
12 changes: 12 additions & 0 deletions packages/rn-tester/js/examples/Text/TextExample.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 12 additions & 0 deletions packages/rn-tester/js/examples/Text/TextExample.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 8b5a5d4

Please sign in to comment.