Menu
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(), } 
542
I've been using the styled-components package to style my React Native components and the easiest solution I've found is to set the border radius to a size in px larger than half of the width that the circle will ever have. It'll then default to the equivalent of a 50% border-radius for any size smaller than that.
To add a rounded image with a border with React Native, we can set the borderRadius and overflow styles. to set borderRadius to '50%' to make the Image round. And we set the width and height of the Image to set the dimensions. We set overflow to 'hidden' so the Image stays in the circle.
To create a circle we can set the border-radius on the element. This will create curved corners on the element. If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.
Just add border-radius to create a circle.
Your border radius should be a half of width and your height. like below:
circle: { width: 44, height: 44, borderRadius: 44/2 } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
