-
Notifications
You must be signed in to change notification settings - Fork 24.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
RN 0.72: Broken border colors / radius on Android #37753
Comments
@MicroDroid could you test on 0.71 and check if this is a regression introduced in 0.72? |
@cortinico this bug appeared after upgrading to 0.72 so presumably yeah |
(the app was on 0.71.8 iirc) |
Iirc there were some changes here added for impl of web props. Let me see if I can find the commit. |
thanks for reporting! This looks like something that needs to be addressed ASAP |
So once you fix this, could I install I ask because I am not sure how native code is bundled or whatever. |
(and I don't want to wait 2 more weeks for another RC) |
@MicroDroid Actually,
Hopefully, that won't be the case, as Lorenzo said 👇:
|
👍 |
@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. |
I can start working on this task. I remain available. What timeframe do I have? Thanks |
|
|
@fabriziobertoglio1987 I don't know if the example I put up is accurate, but I expect my UI elements to not lose borders due to a RN upgrade, is all |
Individual border colors do not work with border radius
The logic that does not work when using border radius + borderTopColor Lines 462 to 473 in 03f70bf
Using borderColorTop instead of borderColor (commit) const styles = StyleSheet.create({
view: {
width: 128,
height: 128,
borderTopWidth: 5,
borderRadius: 5,
borderColor: 'orange',
backgroundColor: 'green',
},
button: {},
});
function TextExample() {
const [redColor, setRedColor] = React.useState(true);
return (
<>
<View
style={[
styles.view,
// works with borderColor
{borderTopColor: redColor ? '#ff0000' : '#3399ff'},
]}
/>
<Button title="change color" onPress={() => setRedColor(prev => !prev)} />
<Text>
Current color is {redColor ? '#ff0000' : '#3399ff'} which corresponds to{' '}
{redColor ? 'red color' : 'blue color'}
</Text>
</>
);
}
|
Individual border color work with individual border width
The logic without border-radius does not experience this issue. Lines 1306 to 1317 in 03f70bf
Lines 1343 to 1370 in 03f70bf
|
The issue is caused by the missing clipping effect of the top border when using borderColorTop. This is the result after commenting the logic responsible for drawing top border.
The clipping is done from updatePath: Line 581 in 03f70bf
Lines 792 to 814 in 03f70bf
|
Borders are drawn by using an inner and outer rectangle responsible for clipping the original view.
STEP 1 - Drawing inner rectangle with rounded borders (1 for each side when using individual colors with borderTopColor).
After: Changed logic to
STEP 2 - The borderRadius is applied by clipping the View with an outside rectangle with rounded corners. Line 343 in 03f70bf
|
STEP 1) Using hardcoded logic to draw top border (step 1 from this comment)
STEP 2) Commenting line clip path inner border Line 402 in 03f70bf
STEP 3) Using borderTopWidth instead of borderWidth (separate issue with setBorderWidth) const styles = StyleSheet.create({
view: {
width: 128,
height: 128,
borderTopWidth: 5,
borderRadius: 5,
backgroundColor: 'green',
},
button: {},
});
function TextExample() {
const [redColor, setRedColor] = React.useState(true);
return (
<>
<View
style={[
styles.view,
{borderTopColor: redColor ? '#ff0000' : '#3399ff'},
]}
/>
<Button title="change color" onPress={() => setRedColor(prev => !prev)} />
<Text>
Current color is {redColor ? '#ff0000' : '#3399ff'} which corresponds to{' '}
{redColor ? 'red color' : 'blue color'}
</Text>
</>
);
}
|
Borders are drawn by using an inner and outer rectangle responsible for clipping the original view.
STEP 1 - The borderRadius is applied by clipping the View with an outside rectangle with rounded corners. Line 343 in 03f70bf
STEP 2 - Clipping inner rectangle (borders) Line 402 in 03f70bf
Difference when clipping view with 3 borders instead of 4 borders
Clipping a View with 3 bordersconst styles = StyleSheet.create({
view: {
width: 128,
height: 128,
borderTopWidth: 5,
borderLeftWidth: 5,
borderRightWidth: 5,
borderRadius: 5,
borderTopColor: 'orange',
backgroundColor: 'green',
},
});
Clipping a View with 4 bordersconst styles = StyleSheet.create({
view: {
width: 128,
height: 128,
borderTopWidth: 5,
borderLeftWidth: 5,
borderRightWidth: 5,
borderBottomWidth: 5,
borderRadius: 5,
borderTopColor: 'orange',
backgroundColor: 'green',
},
});
STEP 3 - Drawing inner rectangle with rounded borders (1 for each side when using individual colors with borderTopColor).
Conclusions:
|
Thanks @fabriziobertoglio1987 for the investigation! I've spent some time this morning diving a bit more into this from the perspective of trying to figure out which commit created the problem; here are a few things I've learned. First off, to repro this problem is also possible to quickly just add the sample code in RNTester, under So, yes, the Android issue is fully confirmed there. After setting that up, I made a local branch and tried to revert the commits that @NickGerleman pointed out. By reverting "feat: Add logical border block color properties" 597a1ff I actually got some improvement to the situation, shown here: Reverting "feat: Add logical border radius implementation" 4ae4984 on top of the other revert didn't change anything: And this is consistent with what Fabrizio is saying, meaning that there was a second underlying bug already present since 0.71.x. I didn't dig into what in 0.71 might have caused the problem. So this leaves us into a position where:
I think that if viable, we should properly fix both. If that's too complicated/would take more than a couple days, we should revert the commit by Gabriel, bring back the status of things to the one we had in 0.71, and proceed with 0.72.0 while proper fixes are landed in main and then backported to 0.71 and 0.72. |
This is fixed here #37828 |
For sake of completeness, @cortinico found this commit which touched that file in 0.72
|
Summary: Instead of requiring all types of border color values to be present we should only take into consideration the left, top, right, bottom, and allEdges values and inject block values into colorBottom and colorTop. This PR only addresses the first issue described here (#37753 (comment)) by kelset ## Changelog: [ANDROID] [FIXED] - Fix border clip check Pull Request resolved: #37828 Test Plan: Test through rn-tester if border color is being applied <img width="482" alt="image" src="https://github.com/facebook/react-native/assets/11707729/c8c8772c-da8d-4393-bc3f-5868eca5df15"> Reviewed By: lunaleaps Differential Revision: D46643773 Pulled By: cipolleschi fbshipit-source-id: efb1ea81bf2462c14767a2554880eb7c44989975
Thanks @gabrieldonadel for your amazing help! We'll pick the following into 0.72 |
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. |
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) |
Summary: Instead of requiring all types of border color values to be present we should only take into consideration the left, top, right, bottom, and allEdges values and inject block values into colorBottom and colorTop. This PR only addresses the first issue described here (#37753 (comment)) by kelset ## Changelog: [ANDROID] [FIXED] - Fix border clip check Pull Request resolved: #37828 Test Plan: Test through rn-tester if border color is being applied <img width="482" alt="image" src="https://github.com/facebook/react-native/assets/11707729/c8c8772c-da8d-4393-bc3f-5868eca5df15"> Reviewed By: lunaleaps Differential Revision: D46643773 Pulled By: cipolleschi fbshipit-source-id: efb1ea81bf2462c14767a2554880eb7c44989975
…37840) Summary: In an effort to fix #37753, this PR reverts the changes introduced by cd6a913 and 1d51032 so border-radius width calculations work as expected ## Changelog: [ANDROID] [FIXED] - Fix border-radius width calculations Pull Request resolved: #37840 Test Plan: Test border colors along with border-radius through RNTester <img width="538" alt="image" src="https://github.com/facebook/react-native/assets/11707729/4b148d4b-35dc-4737-be00-c5ff156b0865"> Reviewed By: dmytrorykun Differential Revision: D46684071 Pulled By: cipolleschi fbshipit-source-id: cf7a80d0d63009b457f03d690b632e332a9b4a02
RC.6 LET'S GOOOOOOOOO |
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 |
Summary: Instead of requiring all types of border color values to be present we should only take into consideration the left, top, right, bottom, and allEdges values and inject block values into colorBottom and colorTop. This PR only addresses the first issue described here (facebook#37753 (comment)) by kelset ## Changelog: [ANDROID] [FIXED] - Fix border clip check Pull Request resolved: facebook#37828 Test Plan: Test through rn-tester if border color is being applied <img width="482" alt="image" src="https://github.com/facebook/react-native/assets/11707729/c8c8772c-da8d-4393-bc3f-5868eca5df15"> Reviewed By: lunaleaps Differential Revision: D46643773 Pulled By: cipolleschi fbshipit-source-id: efb1ea81bf2462c14767a2554880eb7c44989975 (cherry picked from commit 2d15f50)
…acebook#37840) Summary: In an effort to fix facebook#37753, this PR reverts the changes introduced by facebook@cd6a913 and facebook@1d51032 so border-radius width calculations work as expected ## Changelog: [ANDROID] [FIXED] - Fix border-radius width calculations Pull Request resolved: facebook#37840 Test Plan: Test border colors along with border-radius through RNTester <img width="538" alt="image" src="https://github.com/facebook/react-native/assets/11707729/4b148d4b-35dc-4737-be00-c5ff156b0865"> Reviewed By: dmytrorykun Differential Revision: D46684071 Pulled By: cipolleschi fbshipit-source-id: cf7a80d0d63009b457f03d690b632e332a9b4a02 (cherry picked from commit 0817eaa)
update, released both:
thanks again everyone for your work, it's really important to find and tackle this type of issues before stable release 🙇♂️ |
Description
When
borderRadius
is set,borderColor
isbackgroundColor
by default (which is wrong), and onlyborderColor
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
Steps to reproduce
borderTopColor
toborderColor
Snack, code example, screenshot, or link to a repository
The text was updated successfully, but these errors were encountered: