search

necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.59k stars 1.79k forks source link

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

Open Mak-3 opened 6 days ago

Mak-3 commented 6 days ago

Is there an existing issue for this?

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

Test case

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

Additional comments

No response

necolas commented 6 days ago

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

Mak-3 commented 6 days ago

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

necolas commented 5 days ago

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