When one border of View is transparent, all borders are not displayed

[zhxlp]

Description

When one border of View is transparent, all borders are not displayed

Only Android

Version

0.70.1

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
Memory: 6.34 GB / 15.96 GB
Binaries:
Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-212.5712.43.2112.8609683
Visual Studio: Not Found
Languages:
Java: 11.0.15 - C:\Program Files\Eclipse Adoptium\jdk-11.0.15.10-hotspot\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.1 => 0.70.1
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Starting RN

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

Code

  <View
        style={{
          width: 100,
          height: 100,
          borderWidth: 10,
          borderRadius: 100,
          borderColor: '#FF0000',
          borderBottomColor: 'transparent',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>1</Text>
      </View>
      <View
        style={{
          width: 100,
          height: 100,
          borderWidth: 10,
          borderRadius: 100,
          borderColor: '#FF0000',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>2</Text>
      </View>

screenshot

[danilobuerger]

Does this also happen without a border radius?

[zhxlp]

@danilobuerger

[willLopesz]

I'm having the same problem, any solution?

[joaojeefer]

Does this also happen without a border radius?

I'm having the same problem, but I noticed that it doesn't happen without a border radius.

[ErikHasp]

Took me some to get to the source of the problem and thanks to that found this thread. I found an imperfect quick workaround with using almost transparent color #00000001 or rgba(0, 0, 0, 0.01)

[sumi-svmx]

Took me some to get to the source of the problem and thanks to that found this thread. I found an imperfect quick workaround with using almost transparent color #1 or rgba(0, 0, 0, 0.01)

@ErikHasp the workaround seems to work. Do we know what the issue is? Happens in RN 0.70.6

[brunoro]

Just saw this on RN 0.71.6

[hduoc2003]

any solution for this bug, it's really ridiculous :((

[nazmeln]

Hey all, @brunoro @danilobuerger @zhxlp
The issue seems related to fix by @mdvacca in the 0.70 version. Hence, when this condition is removed, everything works as expected. It can be patched(yarn patch package) unless it will be fixed in an upcoming release. By the way, @mdvacca, could you please clarify why we need this condition on Android?

[yrichard]

I saw this too in 0.70, and 0.66, when you render a view with a transparent border, things would not render properly unless you set a border radius.
Unfortunately that workaround is busted in 0.71.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[JoaoMosmann]

This issue still present on latest react-native release 0.73.6.

[Zweird-958]

This issue still present on latest react-native release 0.73.6.

Still present on 0.74.3

[matej-kaska]

Still present on 0.74.5