[Borders] Lines visible with borderRadius, borderWidth and borderColor

[jeanregisser]

There's a rendering issue when using borderRadius, borderWidth and borderColor, you see lines appearing between each border:

The above image was produced with the following code on the latest master (75b220d), same happens with the latest released version (0.7.1):

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.circle}/>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  circle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    borderWidth: 20,
    borderColor: 'green',
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

[browniefed]

Yep, this is reported here #2017
Edit: At least it appears to be a similar issue. borders + roundness = sadness on IOS

[browniefed]

You can possibly accomplish the same with 2 circles? https://rnplay.org/apps/dhvHVw

[ide]

This looks different than #2017. My initial guess is that this is a bug w Facebook rendering while 2017 is about apple rendering.

[a2]

The visible lines are due to the anti-aliasing when drawing the four trapezoids for the border. Not quite sure how to make them less visible without drawing the image at an unnecessarily larger scale and downsizing the image to be drawn.

[rjoonas]

Another example of rendering glitches that appear when using both border width and border radius on React Native 0.14.2:

Screenshot	Code
	<View style={{ backgroundColor: '#e6e6e6', borderWidth: 1, width: 70, height: 70, borderTopLeftRadius: 10 }}></View>
	<View style={{ backgroundColor: '#e6e6e6', width: 70, height: 70, borderTopLeftRadius: 10 }}></View>

This glitch is only visible when I run the app on my device, not in iOS simulator. If nested inside a ScrollView, the glitch lines flicker around when scrolling.

[brentvatne]

Fixed in b115277