[Android] border radius is not set for views that initially has a transparent background color and transitions to an opaque color
@devanshsaini11 已經在處理了。
開始於 2025年9月2日。
評估
這個 Issue 還沒有評估資料。
描述
Description
On Android, if the background color of a view with border radius is toggled between a transparent and opaque color, the border radius is lost when transitioning from transparent to opaque.
Steps to reproduce
- create a view with border radius
- conditionally switch its background color from transparent to an opaque color
React Native Version
0.80.1
Affected Platforms
Runtime - Android
Output of npx @react-native-community/cli info
bash
info Fetching system and libraries information...
System:
OS: macOS 15.5
CPU: (14) arm64 Apple M3 Max
Memory: 1.64 GB / 36.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.14.0
path: ~/.nvm/versions/node/v22.14.0/bin/node
Yarn:
version: 1.22.22
path: ~/.nvm/versions/node/v22.14.0/bin/yarn
npm:
version: 10.9.2
path: ~/.nvm/versions/node/v22.14.0/bin/npm
Watchman:
version: 2025.04.14.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /Users/itsramiel/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.5
- iOS 18.5
- macOS 15.5
- tvOS 18.5
- visionOS 2.5
- watchOS 11.5
Android SDK: Not Found
IDEs:
Android Studio: 2024.3 AI-243.24978.46.2431.13363775
Xcode:
version: 16.4/16F6
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 3.4.3
path: /Users/itsramiel/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli":
installed: 19.0.0
wanted: 19.0.0
react:
installed: 19.1.0
wanted: 19.1.0
react-native:
installed: 0.80.1
wanted: 0.80.1
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
There is no crash or failure to provide
MANDATORY Reproducer
https://github.com/itsramiel/BorderRadiusAndroid
Screenshots and Videos
Given the following app(same as reproducer):
Example App
import { useState } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
function App() {
const [isToggled, setIsToggled] = useState(false);
return (
<View style={styles.container}>
<Pressable
onPress={() => setIsToggled(!isToggled)}
style={{ backgroundColor: 'blue' }}
>
<View
style={{
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: isToggled ? 'red' : 'transparent',
}}
/>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
If I press on the blue container, it will switch a state value which toggles the background color from transparent to red. Notice that on Android the red container is square even though border radius is set:
Recording
| iOS(Works ✅) | Android(Buggy ❌) |
|---|---|
- 主要語言
- C++
- 星號
- 127k
- 分支
- 25.3k
- 平均合併
- 1 天 23 小時
- 30 天內合併 PR
- 4
貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
react/react-native 的其他 Issue
-
Needs: Triage :mag:
難度 2/5 1-3 小時 新手友好度 82/100
react/react-native#58565 · 1 則留言 · 2 個 reaction ·
-
Needs: Author Feedback Needs: Repro
難度 2/5 1-3 小時 新手友好度 88/100
react/react-native#58555 · 4 則留言 · 1 個 reaction ·
-
Needs: Attention Needs: Repro
難度 2/5 1-3 小時 新手友好度 85/100
react/react-native#58526 · 2 則留言 ·
-
Needs: Author Feedback Needs: Repro
難度 2/5 1-3 小時 新手友好度 85/100
react/react-native#58448 · 1 則留言 ·
-
Needs: Attention Needs: Repro
難度 2/5 半天 新手友好度 82/100
react/react-native#58441 · 2 則留言 ·
查看 react/react-native 的全部 Issue
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 86/100
-
Sensor initialization takes very long when `--initial-sim-time` is set to current UNIX timestamp 未關閉
難度 2/5 1-3 小時 新手友好度 78/100
gazebosim/gz-sensors#662 · 1 則留言 ·
-
enhancement
難度 2/5 1-3 小時 新手友好度 76/100
-
comp-datalake
難度 2/5 1-3 小時 新手友好度 88/100
ClickHouse/ClickHouse#121222 ·
-
難度 2/5 1-3 小時 新手友好度 68/100
LadybirdBrowser/ladybird#12123 ·