[iOS 0.20] On some devices border radius produces artefacts (gradient).

[neciu]

Code to reproduce the problem gist:

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

const BorderRadiusProblem = () => {
    const styles = StyleSheet.create({
        wrapper: {
            padding: 16,
            paddingTop: 40,
            backgroundColor: 'purple',
        },
        button: {
            flex: 1,
            borderColor: 'white',
            borderWidth: 2,
            padding: 8,
            borderRadius: 10,
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0,
        }
    });

    return (
        <View style={styles.wrapper}>
            <View style={styles.button}/>
        </View>
    );
};


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

Note that these artefacts does not appear on simulators.

Screenshot with artefacts (iPod touch, 6th generation, iOS 9.2.1):

[wcastand]

Hello,

I have the same problem on my ipad mini 2 (IOS: 9.3.1)

const styles = StyleSheet.create({
  item: {
    flex: 1
  , flexDirection: 'row'
  , justifyContent: 'center'
  , alignItems: 'center'
  , height: 50
  , padding: 10
  , margin: 5
  , backgroundColor: '#FAFDFF'
  , borderRadius: 4
  , borderLeftWidth: 4
  , elevation: 1
  }
, text: {
    flex: 1
  , fontSize: 18
  , textAlign: 'left'
  , marginLeft: 10
  }
})

class Item extends Component {
  render(){
    const color = (this.props.active && this.props.seen)
      ? "#CCFC8E"
      : this.props.active
        ? this.props.color
        : "#D8D8D8"
    return (
      <View style={[styles.item, {
        borderLeftColor: this.props.active ? this.props.color : '#D8D8D8'
      }]}>
        <Beacon color={ this.props.active ? this.props.color : '#D8D8D8' }/>
        <Text style={styles.text}>{this.props.name}</Text>
      </View>
    )
  }
}

I don't know if i need to make an other issue for this but i also have a issue on Android (Android: 5.1.1 on a Mi4c).
The borderLeftColor doesn't appear on my phone, when i put borderLeftWidth: 2, i see a change on my phone but the color never appear.

[lacker]

This issue seems like it has been lost in the mists of time. I think the most helpful next step would be to check that it repro's on rnplay, but also I suspect that everyone has stopped paying attention, so I am going to close this issue so I'm not going to push hard on that. If this is still bugging people then I suggest opening a new issue with a rnplay.org reproduction.

[sushant6309]

@wcastand were you able to fix this issue... I am currently on 0.47 version and I have given following properties to a view inside a scroll view:
width: '95%',
alignSelf: 'center',
borderLeftWidth: 3,
borderTopLeftRadius: 3,
borderBottomLeftRadius: 3,
marginTop: 7.5,
marginBottom: 7.5,
backgroundColor: '#ffffff',
shadowColor: '#e1e6f9',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 1,
shadowRadius: 5,