Artifacts on View with borderRadius on only 2 corners on iOS

[DenJohX]

Description

I need a couple of Views with border radius only on the top or bottom corners, to use as container for TextInputs (its a email/password form).

Reproduction

Using this code:

    // style
    inputExample: {
        borderColor: '#9b9b9b',
        backgroundColor: 'white',
        borderWidth: 1,
        borderStyle: 'solid',
        height: 50,
    },
    inputTop: {
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
    },
    inputBottom: {
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        borderBottomLeftRadius: 6,
        borderBottomRightRadius: 6,
        marginBottom: 60
    },

// render
    <View style={[style.inputExample, style.inputTop]}>
    </View>
    <View style={[style.inputExample, style.inputBottom]}>
    </View>

The result is as expected, but with artifacts on the corners with radius:0

Solution

Don't know yet

Additional Information

• React Native version: 0.36.1
• Platform: iOS
• Operating System: MacOS

[frmrgr]

I confirm, this is a nasty issue (iOS only). However in case you don't need different outer border colors/styles/widths on your blocks, you can wrap both views in a container and give it overflow:'hidden' along with needed borderRadius:6 instead of each half separately.

[farwayer]

I just trapped into this. Enough of one corner

[ismdcf]

try using
borderWidth: StyleSheet.hairlineWidth,
might work

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[malangaveuday]

same issue

[zinoviev]

Got same for RN 0.47 and iPhone 6

In my case, it looks like exactly the same as in kirankalyan5/react-native-segmented-control-tab#10

Folks in issue above describes how to get workaround, but source problem still exists in RN

[AlexanderPinkerton]

Still an issue. Reopen and fix the bug.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[SupriyaKalghatgi]

Facing similar issue
When can we expect the fix for this

[shergin]

It was fixed in master.

[SupriyaKalghatgi]

<View>
  <View
    style={{
      margin: 20,
      width: 100,
      height: 50,
      borderWidth: 1,
      borderColor: "blue",
      borderTopLeftRadius: 5,
      borderBottomLeftRadius: 5
    }}
  />
</View>

with RN 0.53.0

When was this fix pushed? I dont find it in RN 0.53.0 even

Reopen this issue and need fix ASAP

[ismdcf]

@SupriyaKalghatgi did you try

<View
style={{
margin: 20,
width: 100,
height: 50,
borderWidth: StyleSheet.hairlineWidth,
borderColor: "blue",
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5
}}
/>

[zinoviev]

I was lucky enough to meet this bug in one more project. It happens only on iphone, renders fine on emulator

[SupriyaKalghatgi]

@ismdcf Whats difference between snippet i shared and that of yours?

[shergin]

@zinoviev Is it happened on master? Have you tried this on Simulator with same pixel density as device?

[mattijsf]

@SupriyaKalghatgi I tested with 0.55.3

[SupriyaKalghatgi]

I still find this issue with iOS 11

[SupriyaKalghatgi]

@hramos @shergin Its been so long waiting for this fix

[hramos]

@SupriyaKalghatgi which fix? Can you link to the PR?

[SupriyaKalghatgi]

@hramos You can check the above conversation
It was said that, this issue was fixed on master, which is not actually

[mattijsf]

0.55.4 Still there.

I'm peeking at https://github.com/facebook/react-native/blob/master/React/Views/RCTBorderDrawing.m in which I think the bug is caused. But it's pretty mumbo jumbo at first sight...

[hramos]

@SupriyaKalghatgi in that case, this issue is open and waiting for a fix from the community. Feel free to send a PR. Thanks!

[SupriyaKalghatgi]

@hramos Yes, i know that the issue is still kept open

Without any fix!

[SupriyaKalghatgi]

I dont think i am free enough to send PR

[zinoviev]

@SupriyaKalghatgi I assume you one of nativebase maintainers and if you facing this issue for segmented controls it's pretty easy to implement workaround - remove opposite to round corners border with applying a style like borderRightWidth: 0. Bleeding is happening on the side without border-radius, so just remove this side entirely and let another view be its border. You may use 1pt width view if you don't have a logical neighbor.

[mattijsf]

I did create PR #19451 It would be great if some people can confirm if it is fixed.

[mattijsf]

I just tested on iOS 12 beta. Same problem. My PR fixes it there too though.

[Damirikys]

Maybe someone will help it:
I just did instead of borderLeftWidth: 4 like this borderLeftWidth: StyleSheet.hairlineWidth * 6.
And it works for me.

P.S.: Tested on iPhone 6 (real device)

[gbhasha]

@Damirikys issue still there if the borderRadius is more than the borderWidth.

[a-fortunato]

I'm facing this same issue, only in iOS (tested on iPhone 5s). React-native version 0.55.4.

dropDown: {
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    borderColor: 'red',
    borderWidth: 1,
}

--
Added borderStyle: 'dotted', to the dropDown style (the glitch only appears with solid borders) as a temporal workaround until it's fixed.

[Faolain]

Same issue here on Views with React-Native version 0.57.0 and Android

[plopzer]

I'm having the same artifacting issue when all 4 corners have the same border radius, but one side has a different border width.

<View style={{
  borderLeftWidth: 2,
  borderRadius: 2,
  borderColor: 'red',
  height: 50,
  width: 50
}}></View>

[hramos]

#21208 has been merged and the fix is now in master.