0

I'm new to React Native and I'm very happy with how flexbox automatically fits the content to the screen size.

This works great as long as I'm working with squares, but when it comes to circles it seems that I have to specify the size of the circle using pixels.. This is obviously not optimal when developing to different screen sizes.

I have tried using PixelRatio like this:

height: 90 * pixelRatio,
width: 90 * pixelRatio,
borderRadius: 45 * pixelRatio,

This makes it a little better, but there still seems to be a huge different in the size of the circle as it appears on Iphone 6 vs Iphone 6 plus.

Is there any way to use flexbox to automatically create the size of a circle just like it can with squares?

Or is there another way to make sure the circle will be displayed identical on different devices?

Moeskjaer
  • 15
  • 5

1 Answers1

1

AFAIK, the value you enter for width and height are device independent pixels. Meaning they will scale according to the pixel density of the device in hand. pixelRatio will make it extremely device dependent. Have to tried it without the pixelRatio factor

height:90,
width:90,
borderRadius:45
Nishanth Shankar
  • 1,966
  • 1
  • 14
  • 19
  • Thanks for your answer. You are right - removing the pixelRatio does make the difference smaller, but there still seems to be a pretty big difference in how a circle is displayed on Iphone 5s and 6s plus. It would be nice if there was a way for the circle to just follow the size of a parent view using flexbox. – Moeskjaer Oct 28 '15 at 14:14
  • you could create a view that flexes to the parent and use the onLayout attribute to get the width/height and set the border radius accordingly. Things would have been much more easier if we had a % representation, but react-native is not there yet – Nishanth Shankar Oct 29 '15 at 04:19