Repository navigation
RN 0.72: Broken border colors / radius on Android #37753
Description
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
- Use the example code I provided
- Observe border color is green (same as background)
- Change
borderTopColortoborderColor - 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',
}}
/>
Activity
cortinico commentedon Jun 7, 2023
@MicroDroid could you test on 0.71 and check if this is a regression introduced in 0.72?
MicroDroid commentedon Jun 7, 2023
@cortinico this bug appeared after upgrading to 0.72 so presumably yeah
MicroDroid commentedon Jun 7, 2023
(the app was on 0.71.8 iirc)
NickGerleman commentedon Jun 8, 2023
Iirc there were some changes here added for impl of web props. Let me see if I can find the commit.
NickGerleman commentedon Jun 8, 2023
Relevant changes:
cc @gabrieldonadel @lunaleaps @necolas
kelset commentedon Jun 8, 2023
thanks for reporting! This looks like something that needs to be addressed ASAP
MicroDroid commentedon Jun 8, 2023
So once you fix this, could I install
react-nativepackage frommainGitHub 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 commentedon Jun 8, 2023
(and I don't want to wait 2 more weeks for another RC)
Pranav-yadav commentedon Jun 8, 2023
@MicroDroid Actually,
mainis NOT stable. The stable versions' code lives in their own*-stablebranch (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 :)
Hopefully, that won't be the case, as Lorenzo said 👇:
MicroDroid commentedon Jun 8, 2023
👍
NickGerleman commentedon Jun 9, 2023
@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 commentedon Jun 9, 2023
I can start working on this task. I remain available. What timeframe do I have? Thanks
19 remaining items
Fix Android border clip check (#37828)
gabrieldonadel commentedon Jun 12, 2023
Ok, I did some more investigation on this. I tested multiple versions of react-native until I found the one where
borderColor+borderRadiuswas working, the last version where this was working 100% was0.70.6, which means that something on 0.71 broke thislunaleaps commentedon Jun 12, 2023
Thanks @gabrieldonadel for your amazing help!
We'll pick the following into 0.72
leymytel commentedon Jun 12, 2023
Hello everyone.
This issue seems to have similarities with a previously reported issue in version 0.71.x.
Here's the link to the previous issue for reference: #36569.
kelset commentedon Jun 13, 2023
great stuff @gabrieldonadel! I locally applied both of your PRs on top of 0.72 locally and I can confirm that with both, the regression is fully addressed 🎉
And by doing the revert of relevant commit in 0.71 I can confirm it fixes that problem too -> #36569 (comment)
Fix Android border clip check (#37828)
Revert "fix: border width top/bottom not matching the border radius" (#…
MicroDroid commentedon Jun 13, 2023
RC.6 LET'S GOOOOOOOOO
kelset commentedon Jun 13, 2023
we've done the cherry picking, we're starting testing, unless something unexpected goes horribly wrong in the next 12/24hrs RC6 should come out and soon after 0.71.11
kelset commentedon Jun 15, 2023
update, released both:
thanks again everyone for your work, it's really important to find and tackle this type of issues before stable release 🙇♂️
Revert "fix: border width top/bottom not matching the border radius" …