textTransform style does not work under Android with New Arch #39524
Description
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
- Create a
Textcomponent e.g.<Text>hEllo!</Text> - Set
textTransformstyle on it, e.g.<Text>-><Text style={{ textTransform: 'lowercase' }}>oruppercaseorcapitalize. - Expect the text to become
hello!,HELLO!orHEllo!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 meanscapitalizehas 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;