react / react/react-native

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

オープン
#52,415 コメント 5 件 リアクション 4 件 担当者 1 名 GitHub で見る

@devanshsaini11 がすでに取り組んでいます。

2025年9月2日 から。

Issue: Author Provided Repro Platform: Android
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

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 ❌)

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。