react-native

mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00

Files

T

MaeIg 8b5a5d4645 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 |
| ------------- | ------------- | ------------- |
| ![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: 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 |
| ------------- | ------------- |
| ![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