Creating CSS circles in react-native

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(),
}

Solution 1:

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

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

Solution 2:

None of these fit my needs, if you need a responsive circle you can try using my solution:

Step 1: Import Dimensions (and other used elements) from react native (or add to existing imports list)

import { Dimensions, TouchableHighlight, Text } from 'react-native';

Step 2: Add your touchable element (you can calculate width or height of a device)

    <TouchableHighlight
      style = {{
        borderRadius: Math.round(Dimensions.get('window').width + Dimensions.get('window').height) / 2,
        width: Dimensions.get('window').width * 0.5,
        height: Dimensions.get('window').width * 0.5,
        backgroundColor:'#f00',
        justifyContent: 'center',
        alignItems: 'center'
      }}
      underlayColor = '#ccc'
      onPress = { () => alert('Yaay!') }
    >
      <Text> Mom, look, I am a circle! </Text>
    </TouchableHighlight>

Step 3: Enjoy your responsive circled element

Solution 3:

borderRadius should be half the side of the square. So 15 in your case - no matter what pixel ratio the device has.

It works with 30 / PixelRatio.get() only for 2x retina devices, cause the result is 15. Then for iPhone 6 Plus, you indeed get a rounded box because the result is 10 (pixel ratio is 3).

I'm surprised your saying it worked on iPhone 6 Plus with 30 for a 30x30 square.