What is the unit of measure for CSS measurements in react-native

Question:

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

That's when a big question arose, because the button measures are:

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

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

Answer:

All dimensions in React Native are unitless, and represent density-independent pixels. https://facebook.github.io/react-native/docs/height-and-width.html

Translating:

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

The factor that multiplies the measurement units and gives rise to the actual pixel values ​​is called the pixel ratio because it is always the ratio ( ratio ) between two pixel densities. You can get it via the PixelRatio.get() method (source: https://facebook.github.io/react-native/docs/pixelratio.html ).

Exemplifying how 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 between the pixel density of the current resolution and the density of the resolution in mdpi . Thus, 1 equivalent to 1 × 480 dpi/160 dpi px = 3 px in xxhdpi since the pixel ratio is 480 dpi/160 dpi = 3 .

For iOS, the default resolution is 163 dpi and the rest are integer multiples of it. So, 1 can equal 1 px , 2 px , 3 px etc.

Post Views: 2
Scroll to Top