React Native - ios - circle with border - circle background color spilling out of circle

Question

I'm trying to create a circle with a white background in react native and i'm having an issue where the background color of the circle is seen on the outline of the border.

Check out this playground app: https://rnplay.org/apps/TsQ-CA

If you look closely you can see that around the circle there's a thin black line. It's like the border isn't covering the entire background.

Here's the circle style: circle: { borderRadius: 40, width: 80, height: 80, borderWidth: 5, borderColor: 'white', backgroundColor: 'black' }

P.S. this only happens on iOS

Any ideas?? Thanks!

Answer 1

This looks like a bug in React Native. You can work around it by using 2 circles:

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.outerCircle}>
      	  <View style={styles.innerCircle} />
      	</View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  outerCircle: {
    borderRadius: 40,
    width: 80,
    height: 80,
    backgroundColor: 'white',
  },
  innerCircle: {
    borderRadius: 35,
    width: 70,
    height: 70,
    margin: 5,
    backgroundColor: 'black'
  },
});

Answer 2

You can add different border color to a circle. try this

container: {
  width: 60,
  height: 60,
  borderRadius: 60 / 2,
  backgroundColor: 'red',
  borderColor: 'black',
  borderWidth: 3
}