style transform on Text component inconsistently applied on iOS
Personne n'a encore pris cette issue.
- Langage dominant
- C++
- Étoiles
- 127k
- Forks
- 25.3k
- Merge moyen
- 1 j 23 h
- PR mergées (30 j)
- 4
Description
Description
CSS transform styles applied directly to <Text> components do not work consistently on iOS. The same code works correctly on Android.
In the example snippet below:
- Android: ✅ Text is translated as expected
- iOS: ❌ Text is not translated
<Text style={{ transform: [{ translateY: 50 }] }}>Transformed text</Text>
Occasionally a fast refresh will correct it but that's not consistent either.
Workaround
Wrapping the <Text> in a <View> and applying the transform to the <View> works on both platforms:
<View style={{ transform: [{ translateY: 50 }] }}>
<Text>Transformed text</Text>
</View>
Steps to reproduce
- Run the provided Expo Snack on an iOS device/sim
https://snack.expo.dev/@jacob-venable-companycam/text-transform-repro - Notice that the 2nd piece of text does not have the expected transform applied
React Native Version
0.81.5
Affected Platforms
Runtime - iOS
Areas
Fabric - The New Renderer
Output of npx @react-native-community/cli info
System:
OS: macOS 26.2
CPU: (14) arm64 Apple M4 Pro
Memory: 501.72 MB / 48.00 GB
Binaries:
Node:
version: 20.19.5
path: /.nvm/versions/node/v20.19.5/bin/node
Yarn:
version: 1.22.22
path: /.nvm/versions/node/v20.19.5/bin/yarn
npm:
version: 10.8.2
path: /.nvm/versions/node/v20.19.5/bin/npm
Watchman:
version: 2025.03.10.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms:
- DriverKit 25.2
- iOS 26.2
- macOS 26.2
- tvOS 26.2
- visionOS 26.2
- watchOS 26.2
Android SDK: Not Found
IDEs:
Android Studio: 2025.1 AI-251.25410.109.2511.13752376
Xcode:
version: 26.2/17C52
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.16
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 19.1.0
wanted: 19.1.0
react-native:
installed: 0.81.5
wanted: 0.81.5
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
N/A
MANDATORY Reproducer
https://snack.expo.dev/@jacob-venable-companycam/text-transform-repro
Screenshots and Videos
| Actual | Expected |
|---|---|
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par exécuter le reproducteur Expo Snack obligatoire sur un appareil ou un simulateur iOS et comparez la transformation directe de Text avec la solution de contournement qui encapsule View. Étudiez le chemin Fabric/New Renderer impliqué par le rapport ; c’est terminé lorsque la transformation directe translateY sur Text est appliquée de manière cohérente sur iOS comme sur Android.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- ios, react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- Calme
- Clarté
- Plutôt claire
- Accessibilité débutants
- 48/100