Android: borderStyle: 'dotted' | 'dashed' breaks when backgroundColor has opacity (Expo SDK 54)
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
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
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず、React Native 0.81.4 と Expo SDK 54 を使用して Android で必須の Snack を実行し、その後 SDK 53 で同じ borderStyle と半透明の背景の挙動を比較します。View の点線および破線のボーダーについて、Android のレンダリングパスを追跡します。backgroundColor で rgba または alpha を使用した場合に両方のスタイルが正しくレンダリングされれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- android, react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 50/100