textTransform style does not work under Android with New Arch

[retrixe]

Description

The textTransform style property does not work correctly on Android with the New Architecture enabled, none of the possible values, i.e. capitalize, lowercase or uppercase, function.

As per #39524 (comment) it does work correctly on iOS, this is Android specific.

React Native Version

0.72.4

Output of npx react-native info

System:
OS: Linux 6.5 Fedora Linux 39 (Workstation Edition Prerelease)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-11320H @ 3.20GHz
Memory: 5.03 GB / 15.14 GB
Shell:
version: 5.2.15
path: /bin/bash
Binaries:
Node:
version: 20.6.1
path: /usr/local/bin/node
Yarn: Not Found
npm:
version: 9.8.1
path: /usr/local/bin/npm
Watchman:
version: 20221225.010033.0
path: /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels:
- "31"
- "33"
Build Tools:
- 30.0.3
- 31.0.0
- 33.0.0
System Images:
- android-33 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java:
version: 17.0.8
path: /usr/bin/javac
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Steps to reproduce

1. Create a Text component e.g. <Text>hEllo!</Text>
2. Set textTransform style on it, e.g. <Text> -> <Text style={{ textTransform: 'lowercase' }}> or uppercase or capitalize.
3. Expect the text to become hello!, HELLO! or HEllo! for the 3 values respectively, but this only functions correctly on the Old Architecture, not New Architecture. (Side note: textTransform Capitalize Does Not Behave As it Does in CSS #34117 means capitalize has incorrect behaviour on Old Architecture as well.)

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

https://github.com/retrixe/react-native-texttransform-bug (simply enabled the new arch and put this source code inside App.tsx)

import React from 'react';
import { SafeAreaView, ScrollView, Text, View } from 'react-native';

function App(): JSX.Element {
  return (
    <SafeAreaView>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View>
          <Text style={{textTransform: 'uppercase'}}>uppercase</Text>
          <Text style={{textTransform: 'lowercase'}}>LOWERCASE</Text>
          <Text style={{textTransform: 'capitalize'}}>capitalize</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

export default App;

[enzomanuelmangano]

Hi @retrixe I'm experiencing the same issue on Android and I'm not able to reproduce by running the project on iOS