style transform on Text component inconsistently applied on iOS
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
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 |
|---|---|
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu bằng cách chạy trình tái hiện Expo Snack bắt buộc trên thiết bị hoặc trình mô phỏng iOS và so sánh phép biến đổi trực tiếp của Text với giải pháp thay thế bọc bằng View. Điều tra đường dẫn Fabric/New Renderer được đề cập trong báo cáo; hoàn thành có nghĩa là phép biến đổi translateY trực tiếp trên Text được áp dụng nhất quán trên iOS như trên Android.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- ios, react-native
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 48/100