[Android] border radius is not set for views that initially has a transparent background color and transitions to an opaque color

Aberta
#52,415 5 comentários 4 reações 1 responsável Ver no GitHub

@devanshsaini11 já está trabalhando nisso.

Desde 2/9/2025.

Avaliação

Esta issue ainda não foi avaliada.

Descrição

Issue: Author Provided Repro Platform: Android
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
  1. create a view with border radius
  2. 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 ❌)
Linguagem predominante
C++
Estrelas
127k
Forks
25.3k
Merge médio
1d 23h
PRs com merge (30d)
4

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de react/react-native

Todas as issues de react/react-native

Issues semelhantes

Mais issues de C++

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.