Discrepancy in the behavior of text-transform: capitalize between React Native and React Native Web.

[Mak-3]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

The current implementation of text-transform: capitalize in react-native-web does not match the behavior found in React Native. In React Native, this transformation converts all characters in a word to lowercase except for the first letter, which is capitalized. However, in react-native-web, the transformation only capitalizes the first letter of each word while leaving the remaining letters unchanged.

Expected behavior

Input: "hello WORLD from ReAcT nAtIvE"
Expected Output: "Hello World From React Native"
Current Output: "Hello WORLD From ReAcT nAtIvE"

Steps to reproduce

1. Set Up Environment:

   • Create a new React Native project using Expo or React Native CLI.
   • Set up a React Native Web environment (e.g., using Expo for web or a separate React project with react-native-web).

2. Create a Component:

   • In both the React Native and React Native Web projects, create a simple component that uses the Text component from both libraries.

3. Add Text with Capitalization:

   • Use the following example text in both projects:

     <Text style={{ textTransform: 'capitalize' }}>
       hello WORLD from ReAcT nAtIvE
     </Text>

4. Run Both Environments:

   • For React Native, run the app on a mobile simulator or device.
   • For React Native Web, run the app in a web browser.

5. Observe the Output:

   • Check the output in both environments:
     • React Native: The expected output should be "Hello World From React Native".
     • React Native Web: The output will likely be "Hello WORLD From ReAcT nAtIvE".

6. Compare Results:

   • Note the difference in behavior between the two platforms, highlighting the mismatch in capitalization.

Expected Result

• React Native should properly capitalize the first letter of each word while converting the rest to lowercase.
• React Native Web should only capitalize the first letter of each word without altering the case of the remaining letters.

Test case

https://codesandbox.io/s/sad-morning-79dhqp?file=/src/App.js

Additional comments

No response

[necolas]

You should open an issue against React Native so that it matches the browser behavior

[Mak-3]

React Native uses the NSString class from Objective-C, where this behavior is expected and intentional.
Reference: capitalized

[necolas]

React Native implements the CSS property, so it should match how the web works.

[necolas]

This has been fixed in RN facebook/react-native#47219