[Android] borderRadius & border(Top|Right|LeftBottom)Color='transparent' don't work properly together

[TheAdamBorek]

Description

Hello,

When both borderRadius and on the borderRightColor (or any other edge) is set to transparent then Android ignores other borderColors set resulting with no borders being rendered.

Bug is only reproducible on Android. It works perfectly fine on iOS.
We encountered this issue after bumping react-native version from 0.74.3 -> 0.76.2. Bug still exists in RN 0.76.3.

Example

Example says more than 1000 words so here it is:
https://snack.expo.dev/@adamfromattio/borderradius-and-transparent-borderright-bug?platform=android

    borderTopColor: 'orange',
    borderBottomColor: 'magenta',
    borderLeftColor: 'transparent',
    borderRightColor: 'blue',
    borderRadius: 10,

iOS	Android

Steps to reproduce

Set styles of a view to:

    borderTopColor: 'orange',
    borderBottomColor: 'magenta',
    borderLeftColor: 'transparent',
    borderRightColor: 'blue',
    borderRadius: 10,

React Native Version

0.76.3

Affected Platforms

Runtime - Android

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 14.7
  CPU: (12) arm64 Apple M2 Max
  Memory: 99.81 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.11.0
    path: ~/.nvm/versions/node/v22.11.0/bin/node
  Yarn:
    version: 4.5.1
    path: ~/.nvm/versions/node/v22.11.0/bin/yarn
  npm:
    version: 10.9.0
    path: ~/.nvm/versions/node/v22.11.0/bin/npm
  Watchman:
    version: 2024.09.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/adamborek/.rvm/gems/ruby-3.2.2/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/adamborek/.rvm/rubies/ruby-3.2.2/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

N/A

Reproducer

https://snack.expo.dev/@adamfromattio/borderradius-and-transparent-borderright-bug?platform=ios

Screenshots and Videos

No response

[migueldaipre]

Hey @TheAdamBorek,

Thank you for reporting this. Does this same issue occur with the new architecture enabled?

[NickGerleman]

@jorge-cab

[jorge-cab]

Looking into it

[jorge-cab]

Found the issue, will update later with PR fix

[marqroldan]

Could this also be related?

#43298

[jorge-cab]

Could this also be related?

#43298

This is more an issue with how we render the background, I'm also investigating a fix currently