Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Vertical borders leave gaps on rounded Views #33950

Closed
douugdev opened this issue Jun 1, 2022 · 5 comments
Closed

Vertical borders leave gaps on rounded Views #33950

douugdev opened this issue Jun 1, 2022 · 5 comments
Labels
Component: View Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Impact: Bug The issue represents a bug somewhere Platform: Android Android applications. Platform: Linux Building on Linux. Type: Old Architecture For issues related to the old architecture

Comments

@douugdev
Copy link

douugdev commented Jun 1, 2022 •
edited
Loading

Description

When using top or bottom borders on rounded Views, it will leave gaps on Android (this does not occur on left and right), also the design differs greatly between platforms, especially compared to the expected web version. See snack and more screenshots below for examples on border design differences

Gap example:
image

Version

0.68.2

Output of npx react-native info

System:
OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
Memory: 3.97 GB / 7.72 GB
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 23, 28, 29, 30, 31
Build Tools: 28.0.3, 29.0.2, 30.0.2, 31.0.0
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 11.0.15 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.65.1 => 0.65.1
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Add borderBottomWidth or borderTopWidth to any View with any borderRadius and it will not wrap properly on Android and IOS will greatly differ from the Web Version.

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

Snack: https://snack.expo.dev/@douugbr/vertical-borders-bug

Web (Details: Microsoft Edge 64-bit, Version: 101.0.1210.53):
image

Snack IOS Emulator:
image

PS.: Android Snack emulator shows the same as my Redmi Note 7
@react-native-bot react-native-bot added the Platform: Linux Building on Linux. label Jun 1, 2022
@cortinico cortinico added Platform: Android Android applications. Component: View Type: Old Architecture For issues related to the old architecture Impact: Bug The issue represents a bug somewhere and removed Needs: Triage 🔍 labels Jun 1, 2022
@cortinico
Copy link
Contributor

Thanks for flagging this. I believe this is a legit bug. This is up for grab if someone wants to look into it.

@cortinico cortinico added the Good first issue Interested in collaborating? Take a stab at fixing one of these issues. label Jun 1, 2022
@douugdev
Copy link
Author

douugdev commented Jun 1, 2022

Thanks for flagging this. I believe this is a legit bug. This is up for grab if someone wants to look into it.

Also is the platform disparity intentional? Because all of my Figma designs follow the web implementation of such rounded borders so the design doesn't quite work when it's implemented the same way in all platforms.

@adi-ydv-1
Copy link

Can I solve this issue...I am starting an open-source contribution with react native repository...

@adi-ydv-1
Copy link

by the way, how show I proceed can anyone can guide me??

@ankit-tailor
Copy link
Contributor

Hey @cortinico, I want to work on this issue. Can I take this up?

@hurali97 hurali97 mentioned this issue Aug 7, 2022
Closed
raykle pushed a commit to raykle/react-native that referenced this issue Aug 27, 2022
@hurali97 @raykle
fix: border width top/bottom not matching the border radius (facebook…
ac5cd5e 
…#34362)

Summary:
Fixes facebook#33950

After analysing the values used for drawing the border specifically the top and bottom values of `mInnerClipTempRectForBorderRadius` weren't matching the needs when it comes to the case of borderTopWidth and borderBottomWidth, when the borderRadius is applied.

Asking for reviews cortinico

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[Android] [Fixed] - Border width top/bottom not matching the border radius

Pull Request resolved: facebook#34362

Test Plan:
Tested in a local project, following are the outputs(Details are in the issue attached):

Before:
<img src="https://user-images.githubusercontent.com/47336142/183289227-96b20f86-1507-46f5-a79d-f61457624e8b.png" height="550">

After:
<img src="https://user-images.githubusercontent.com/47336142/183289177-6148df29-f0de-4b99-bdf0-c28a9c7d3ac7.png" height="550">

Reviewed By: hramos

Differential Revision: D38805873

Pulled By: lunaleaps

fbshipit-source-id: 69f8ff9a9caeeaf88d1c76b639271f642c2e7ea2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: View Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Impact: Bug The issue represents a bug somewhere Platform: Android Android applications. Platform: Linux Building on Linux. Type: Old Architecture For issues related to the old architecture
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: border width top/bottom not matching the border radius hurali97/react-native
5 participants
@cortinico @react-native-bot @ankit-tailor @adi-ydv-1 @douugdev