Android: Border radius renders in a blurred / choppy way in 0.51.0

[dannycochran]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 6.11.4
Yarn: Not Found
npm: 3.10.10
Watchman: 4.9.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: 0.53.0 => 0.53.0

Target Platform: Android (22)

Steps to Reproduce

Create a simple view:

export default class App extends Component {
  render() {
    return (
      <View style={styles.background}>
        <View style={styles.container}>
          <Text>Welcome to React Native!</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  background: {
    backgroundColor: 'purple',
    flex: 1
  },
  container: {
    position: 'absolute',
    left: 100,
    top: 100,
    width: 200,
    height: 100,
    backgroundColor: 'orange',
    borderWidth: 2,
    borderColor: 'orange',
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Expected Behavior

I would expect that the border does not render in a strange and pixelated way. Previously in react-native 0.49.5, the exact same code would render like so:

Actual Behavior

In react-native 0.53.0, that same code renders this blurry border:

Reproducible Demo

The code snippet above compiles and should be sufficient to reproduce this problem.

[dannycochran]

Pinging @RSNara who is listed on release notes for 0.51.0 for border work, and @AaaChiuuu who worked on "overflow: hidden" for 0.50.0.

edit: this bug is not in 0.50.1, it appears first in 0.51.0 as far as I can tell.

[SirNeuman]

I've also noticed this. It's especially noticeable when you have the border color different from the background color of the button and surrounding view.

[dannycochran]

This appears to be one of a number of bugs related to borders in Android for 0.51.0:

#17286
#17251
#17224
#17144

[jkimbo]

@RSNara any update on this issue? It's currently blocking our upgrade to v0.51

[jkimbo]

Another bug related to this: #17311

[rogoja]

same problem

[dannycochran]

@RSNara are you able to take a look at this, or help us identify which commit might be responsible?

[yedidyak]

This is the android profile GPU rendering on a screen with a couple of circles with borderWidth of 1 in RN 0.51.0. The same screen renders flawlessly on lower versions of RN.

[yedidyak]

I made a PR that fixes the performance issue. The problem was that the new borders calculations didn't support a borderRadius larger than the maximum possible - 50% of the smallest side.

#17514

[atlanteh]

@yedidyak Is this the reason for all of the above bugs mentioned by @dannycochran ?
Will this PR also fix all of those as well?

[yedidyak]

It's possible, I didn't notice any specific issues as shown above, just serious performance issues. My PR is specific to borderRadius > 50% of the view size. I posted it here because it seems that several different border issues in 0.51.0 were merged into here.

[dannycochran]

Still in 0.52.0, 5aa1fb3 and ca7fe72 by @RSNara did not fix, not sure they were intended to?

[SirNeuman]

Yeah, those fixes seemed to address Android API below 18 specifically, however I'm seeing this issue on my Samsung Galaxy Tab running API 24 (Android 7.0).

For reference here is what I'm seeing:

This is with a borderWidth = 1 and a borderRadius = 5 for a touchableOpacity component, which makes it look like there are different border widths on different sides, even though they should all be the same. It also looks jagged:

This is what it looks like with borderWidth = 2 and borderRadius = 5 for the same component. It looks better for some reason:

[Luze26]

We can also see a line between each side of the border (appeared in 0.51 and still present in 0.52).

[sandropoluan]

This issue still exist on RN 0.53

[jamesloper]

Here's a snack to help clarify the rendering issue:

https://snack.expo.io/BytwPGarz

• Only affects 24 and 25.
• I tried on a Note 8 a Galaxy S8, and reproduced the same as the image, using 24 and 25.
• On a Moto G (3rd gen), and a Galaxy J9, the rendering is also off in 24 and 25, but its a lot less noticeable due to the low resolution of the screens.
• On the Moto G the borders looked the best. Probably because the physical screen is a perfect multiple of whatever the density-independent screen is being used in react native. Still, though, the borderRadius has aliasing, but it’s like, sloppy aliasing? Rounding errors?








import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.button}>
          <Text style={styles.buttonText}>Pushy Pushy</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    backgroundColor: '#fff',
    padding: 10,
  },
  button: {
    borderRadius: 2,
    borderColor: 'red',
    borderWidth: 1,
    padding: 10,
  },
  buttonText: {
    fontSize: 16,
    textAlign: 'center',
  },
});

[atlanteh]

@hramos
Guys, how can you release new versions of react-native with such a bug? This issue has been reported almost two months ago and should have been address almost instantly. It there anyone on this?

[jwesselink]

This bug prevents me from updating to newer react native versions (0.50.4 is the latest working version). This bug is still present in the latest 0.52 release.

I use the border radius to draw radio buttons (https://github.com/jwesselink/react-native-material-kit#radio-button) but they appear as a filled circle on my android phone (s5 mini) since the 0.51 release

[hramos]

@atlanteh the release schedule is fixed, and unless tests are broken, the release will go out.

I'm not sure what you mean by "address almost instantly" -- this is a GitHub issue, not a pull request. We rely on contributors from the community to help address any issues that affect them.

[atlanteh]

@hramos I understand that, but fact is, that border radius doesn't work on latest releases. Someone broke it few releases ago and for some reason nobody cares. This means there's no test coverage on border radius? Almost no one uses it?

[RSNara]

Sorry for not getting to this earlier. But it seems like the calculations in ReactViewBackgroundDrawable.drawRoundedBackgroundWithBorders might be a bit off. That's just a hunch though. Regardless, the problem should be in ReactViewBackgroundDrawable, since that's the class we use to do border drawing in Android.

Unfortunately, I'm a bit swamped with work, so I can't guarantee that I'll get to this fix anytime soon. This comment explains how rounded borders work. It shouldn't be too difficult to understand. So, I'd love it if someone else could take a crack at it.

[Annihil]

The border radii work perfect on Android, but it's just completely aliased unfortunately (whereas antialiased on iOS) (RN .53)

ART.Shape does not suffer from aliasing tho

Edit: After some tests, I found that it only happens when borderWidth & borderColor are specified, radii are antialiased with backgroundColor.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[sandropoluan]

@react-native-bot why is this closed? I'm use v0.53.0 and and still having this problem.

[thangkho]

when I test with old vesion RN 0.49 it working perfect.
<TouchableOpacity style= {{ width: 300, height: 100, borderRadius: 50, borderWidth: 2, borderColor: 'red' }}> </TouchableOpacity>

[alansainz]

Has anyone found a workaround for this?

[almostintuitive]

This is currently blocking us as well.

[Rah1x]

I cant believe its not resolved in all this time.. sick n tired of bloody RN programming half the month I just spend fixing and upgrading dependencies!

[Rah1x]

So I couldnt install my old RN app due to this issue:
#6692

So I had to upgrade RN to another version and try again. Now ive this issue of borderradius. So now ive 2 issues - whats the point of upgrade!

[Rah1x]

Still not fixed:

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: ^0.55.3 => 0.55.3

[iamdurui]

Still not fixed:
react-native: ^0.55.3 => 0.55.3
It is my code

立即申请

sButton: {
alignItems: 'center',
justifyContent: 'center',
height: 36,
borderColor: '#fff',
marginTop: 18,
width: Dimensions.get('window').width - 180,
borderWidth:2,
borderTopRightRadius:10
},
lText: {
fontSize: 16,
color: '#fff',
},
first , I run this code at android 4.3(Coolpad 5200s)

second ,I run this code at android 7.0(HUAWEI P9)

[himabindugadupudi]

Fixed with commit c5ca26a which is now in Master. Please test with Master build.

[Rah1x]

@himabindugadupudi Thanks for getting it fixed
However I manage my system via react-native-git-upgrade X.Y and your commit is not part of any release yet.
https://github.com/facebook/react-native/releases

Can you or someone set it to a release plz?
Thanks a lot

[elicwhite]

@Rah1x, it will be part of the April release.

[newyankeecodeshop]

@TheSavior This is great news. Given the severity of this, any chance we can get that commit cherry-picked into 0.55 as well?

[elicwhite]

It seems like we are pretty close to 0.56 and this bug has existed for many releases. I’ll leave it up to @grabbou to decide on whether it should be cherry picked.

[Rah1x]

I see the new release 0.55.4 at
https://github.com/facebook/react-native/releases
I hope that includes this fix.

However since im using react-native-git-upgrade I cant seem to upgrade. This is what I get when I run it

git-upgrade ERR! Error: The specified version of React Native 0.55.4 doesn't exist

[atlanteh]

React Native 55.4 doesn't include this fix. It probably only includes a cherry-pick or two of critical bugs that couldn't wait until next release.
As much as I want this bug fixed, it's not considered critical.

[yakirbu]

@atlanteh
How isn't it considered critical?
An app UI that is mostly designed with border-radius items will have all its views pixelated.

I hope it will be added to the next release.

[atlanteh]

Since this bug has been discovered quite few releases ago and not fixed until now, it's no longer critical. If it was discovered just after cutting a release, I think it would qualify as critical and a new hotfix would be released, but after so long, it's no longer urgent enough

[elicwhite]

I'm not sure that critical vs non-critical really matters at this point. This issue has been fixed but we haven't had a release since then. This fix will be in the next release.

[JasperVercammen]

When is the next release planned? Because we would really like to include this in our release, but we're waiting for 2 months on a new release.

[atlanteh]

Should be any moment, the release was delayed due to tests failing and there's already a PR fixing them.
See here: #19625

[hramos]

This fix is now part of the latest release candidate: https://github.com/facebook/react-native/releases/tag/v0.56.0-rc

The schedule is meant to provide a reasonably stable release every month or so, but there's nothing preventing anyone from using React Native from master. In the future, you can take advantage of any fixes-in-master-but-not-yet-in-a-release by using React Native from master or pinning your react-native package to the commit that introduced the fix.

I'd also like to take the opportunity to remind everyone that this repo abides to the following Code of Conduct: https://github.com/facebook/react-native/blob/master/CODE_OF_CONDUCT.md. Maintainers will hide comments from first offenders, and they reserve the right to block repeat offenders.