Skip to content
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

[IOS] Text transform capitalize doesn't have the same behavior than on web #32697

Closed
pierrezimmermannbam opened this issue Dec 2, 2021 · 2 comments
Labels
Needs: Triage 🔍 Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@pierrezimmermannbam
Copy link

pierrezimmermannbam commented Dec 2, 2021

Description

When using css property textTransform: capitalize on ios, if the text has a word which starts with a character that cannot be upper cased, it will uppercase the next character that can.

For instance, the displayed text when using capitalize on the following text ven 1er déc will be Ven 1Er Déc when we'd expect Ven 1er Déc

Version

0.65.0

Output of react-native info

System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 373.45 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 16.7.0 - /var/folders/5k/5gdhqr3j1ns9bw3svh0qp0br0000gn/T/yarn--1638443023216-0.32496224876558455/node
Yarn: 1.22.11 - /var/folders/5k/5gdhqr3j1ns9bw3svh0qp0br0000gn/T/yarn--1638443023216-0.32496224876558455/yarn
npm: 2.15.12 - ~/pump/node_modules/.bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3
System Images: android-29 | Automotive with Play Store Intel x86 Atom, android-29 | Android TV Intel x86 Atom, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.7042882
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_282 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

  • Create a component using react native Text with the text ven 1er déc
  • Add a style with textTransform: capitalize
  • Check the displayed text

Snack, code example, screenshot, or link to a repository

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const Component = () => <Text style={styles.text}>vend 1er dec</Text>;

const styles = StyleSheet.create({
  text: { textTransform: 'capitalize' },
});
@pierrezimmermannbam pierrezimmermannbam changed the title Text transform capitalize doesn't have the same behavior than on web [IOS] Text transform capitalize doesn't have the same behavior than on web Dec 2, 2021
@react-native-bot react-native-bot added the Platform: iOS iOS applications. label Dec 2, 2021
facebook-github-bot pushed a commit that referenced this issue Jan 25, 2022
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
@github-actions
Copy link

github-actions bot commented Jun 1, 2022

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jun 1, 2022
@github-actions
Copy link

github-actions bot commented Jun 9, 2022

This issue was closed because it has been stalled for 7 days with no activity.

@github-actions github-actions bot closed this as completed Jun 9, 2022
@facebook facebook locked as resolved and limited conversation to collaborators Jun 9, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Needs: Triage 🔍 Platform: iOS iOS applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

2 participants