[Android] border radius is not set for views that initially has a transparent background color and transitions to an opaque color
Abierto
@devanshsaini11 ya está trabajando en esto.
Desde el 2/9/2025.
Issue: Author Provided Repro
Platform: Android
- Lenguaje dominante
- C++
- Estrellas
- 127k
- Forks
- 25.3k
- Merge medio
- 1 d 23 h
- PR fusionados (30 d)
- 4
Descripción
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 ❌) |
|---|---|
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Evaluación
Este issue todavía no se ha evaluado.