Vertical borders leave gaps on rounded Views

[douugdev]

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:

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):

Snack IOS Emulator:

PS.: Android Snack emulator shows the same as my Redmi Note 7

[cortinico]

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

[douugdev]

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]

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

[adi-ydv-1]

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

[ankit-tailor]

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