Creating CSS circles in react-native

Question

I'm having some trouble creating CSS circles in react-native. The following works in iPhone 6 Plus but in all the other iPhones, they become diamonds.

circle: {   height: 30,   width: 30,   borderRadius: 30, } 

Now if I use PixelRatio on borderRadius it works in everything but iPhone 6 plus. iPhone 6 plus renders it as boxes with rounded corners.

circle: {   height: 30,   width: 30,   borderRadius: 30 / PixelRatio.get(), } 

Answer 1

Your border radius should be a half of width and your height. like below:

circle: {    width: 44,    height: 44,    borderRadius: 44/2 }