What is the unit of measure of CSS measures in react-native


When I create an application, I put the CSS buttons with the layout, but now I have to create images to put in place of these buttons.

That's when a big question came to me, as the button measures are:

botao: {
  width: 140, 
  height: 140, 
  marginLeft: 10,
  marginRight: 10,
  marginBottom: 20,

But this 140 represents what measure? 140px? What measures should I use in the image?

asked by anonymous 29.09.2017 / 19:46

1 answer


All dimensions in React Native are unitless, and represent density-independent pixels.    link



All dimensions in React Native are dimensionless (without unit of measure) and represent density independent pixels .

The factor that multiplies the units of measurement and gives rise to the real pixel values is called the pixel ratio because it is always the ratio ( ratio ) between two densities of pixels. You can get it through the PixelRatio.get() method (source: link ).

Exemplifying how the pixel ratio is calculated, on Android systems there are six densities:

  • ldpi : 120 dpi
  • mdpi : 160 dpi
  • hdpi : 240 dpi
  • xhdpi : 320 dpi
  • xxhdpi : 480 dpi
  • xxxhdpi : 640 dpi

A unit of measure in React Native equals exactly 1 px in mdpi and for other resolutions you can multiply by the ratio of the pixel density of the current resolution to the density of the resolution in% cos_de%. Thus, mdpi would be equivalent to 1 = 1 × 480 dpi/160 dpi px in 3 px because pixel ratio

22.10.2017 / 16:33