RN 0.72: Broken border colors / radius on Android

[MicroDroid]

Description

When borderRadius is set, borderColor is backgroundColor by default (which is wrong), and only borderColor can change its color, borderTopColor etc. don't work (also wrong).

React Native Version

0.72.0-rc.5

Output of npx react-native info

info Fetching system and libraries information...
System:
 OS: Linux 5.15 Arch Linux
 CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
 Memory: 13.05 GB / 31.35 GB
 Shell:
 version: "5.9"
 path: /bin/zsh
Binaries:
 Node:
 version: 18.14.2
 path: ~/.nvm/versions/node/v18.14.2/bin/node
 Yarn:
 version: 3.5.0
 path: /usr/sbin/yarn
 npm:
 version: 9.5.0
 path: ~/.nvm/versions/node/v18.14.2/bin/npm
 Watchman:
 version: 20221016.020512.0
 path: /usr/sbin/watchman
SDKs:
 Android SDK:
 API Levels:
 - "31"
 - "33"
 - "33"
 Build Tools:
 - 30.0.2
 - 30.0.3
 - 31.0.0
 - 33.0.0
 - 33.0.2
 System Images:
 - android-33 | Google APIs Intel x86_64 Atom
 Android NDK: Not Found
IDEs:
 Android Studio: AI-222.4459.24.2221.9971841
Languages:
 Java:
 version: 11.0.17
 path: /usr/sbin/javac
 Ruby: Not Found
npmPackages:
 "@react-native-community/cli": Not Found
 react: Not Found
 react-native: Not Found
npmGlobalPackages:
 "*react-native*": Not Found
Android:
 hermesEnabled: true
 newArchEnabled: false
iOS:
 hermesEnabled: true
 newArchEnabled: Not found

Steps to reproduce

1. Use the example code I provided
2. Observe border color is green (same as background)
3. Change borderTopColor to borderColor
4. Observe border color becomes orange

Snack, code example, screenshot, or link to a repository

<View
	style={{
		width: 128,
		height: 128,
		borderWidth: 5,
		borderRadius: 5,
		borderTopColor: 'orange',
		backgroundColor: 'green',
	}}
/>

[cortinico]

@MicroDroid could you test on 0.71 and check if this is a regression introduced in 0.72?

[MicroDroid]

@cortinico this bug appeared after upgrading to 0.72 so presumably yeah

[MicroDroid]

(the app was on 0.71.8 iirc)

[NickGerleman]

Iirc there were some changes here added for impl of web props. Let me see if I can find the commit.

[NickGerleman]

Relevant changes:

1. feat: Add logical border radius implementation #35572
2. feat: Add logical border block color properties  #35999

cc @gabrieldonadel @lunaleaps @necolas

[kelset]

thanks for reporting! This looks like something that needs to be addressed ASAP

[MicroDroid]

So once you fix this, could I install react-native package from main GitHub branch so that I can make a new release for the app I'm working on? Or would that not work?

I ask because I am not sure how native code is bundled or whatever.

[MicroDroid]

(and I don't want to wait 2 more weeks for another RC)

[Pranav-yadav]

So once you fix this, could I install react-native package from main GitHub branch so that I can make a new release for the app I'm working on? Or would that not work?

I ask because I am not sure how native code is bundled or whatever.

@MicroDroid Actually, main is NOT stable. The stable versions' code lives in their own *-stable branch (e.g.: 0.71-stable) and the respective RCs, stable, and patches are released from these respective branches only.
Once the PR w/ fix is opened/merged you can expect more details about the same under this issue only :)

(and I don't want to wait 2 more weeks for another RC)

Hopefully, that won't be the case, as Lorenzo said 👇:

"This looks like something that needs to be addressed ASAP" - #37753 (comment)

[MicroDroid]

👍

[NickGerleman]

@gabrieldonadel is this something that you might be willing to take a look at as the author of the changes?

We can also otherwise revert these and see if it resolves the issue. Though due to the nature of the source build, it does seem like that might need another RC if we cannot locally repro.

[fabOnReact]

I can start working on this task. I remain available. What timeframe do I have? Thanks