Android: borderStyle: 'dotted' | 'dashed' breaks when backgroundColor has opacity (Expo SDK 54)
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
When using borderStyle: 'dotted' or borderStyle: 'dashed' on a View, the border renders correctly only if the background color is fully opaque.
If the View has a borderColor with opacity (e.g. rgba(...) or a color with alpha), the border style does not render correctly (or is not applied at all).
This issue happens only on Android and seems to be a regression introduced in Expo SDK 54.
The same code works correctly in Expo SDK 53.
Snack (Android only):
👉 https://snack.expo.dev/@iamarad/border-style-issue?platform=android
Steps to reproduce
- Create a View
- Apply:
- borderWidth
- borderStyle: 'dotted' or borderStyle: 'dashed'
- Set a backgroundColor with opacity (e.g. rgba(0,0,0,0.1))
- Run on Android
React Native Version
0.81.4
Affected Platforms
Runtime - Android
Output of npx @react-native-community/cli info
System:
OS: Windows 11 10.0.26200
CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13400
Memory: 3.94 GB / 15.75 GB
Binaries:
Node:
version: 20.18.0
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 1.22.22
path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm:
version: 11.0.0
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-251.27812.49.2514.14217341
Visual Studio: Not Found
Languages:
Java: 17.0.12
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 19.1.0
wanted: 19.1.0
react-native:
installed: 0.81.4
wanted: 0.81.4
react-native-windows: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
Not available!
MANDATORY Reproducer
https://snack.expo.dev/@iamarad/border-style-issue?platform=android
Screenshots and Videos
No response
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 Snack bắt buộc trên Android với React Native 0.81.4 và Expo SDK 54, sau đó so sánh cùng hành vi của borderStyle và nền bán trong suốt trong SDK 53. Truy vết đường dẫn kết xuất Android cho các viền chấm và nét đứt của View; hoàn thành khi cả hai kiểu đều được kết xuất chính xác khi backgroundColor sử dụng rgba hoặc alpha.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- android, react-native
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 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
- 50/100