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

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.

[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.