What is the unit of measurement of CSS measures in React-Native

Asked

Viewed 1,374 times

3

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

That’s when I came up with a big question, because the measurements of the button 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?

react-native

  • React-Native does not use CSS

  • So what are the names of these measures?

  • https://facebook.github.io/react-native/docs/pixelratio.html

  • 1

    When we program in Kotlin (for example) we use dp and not px, which, if I’m not mistaken, is the case with React Native and NativeScript.

  • I did a search on the dp here, and this would be to convert the image to the ratio set depending on the pixel density of the screen, that’s it?

  • And in this case then there would be an exact value, because it depends on the device

  • 1

    http://labs.rampinteractive.co.uk/android_dp_px_calculator/

Show 2 more comments

1 answer

2


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 measurement) and represent density independent pixels (resolution).

The factor that multiplies the units of measure and gives rise to the values in real pixels is called pixel ratio for it is always the reason (ratio) between two pixel densities. You can get it through the method PixelRatio.get() (source: https://facebook.github.io/react-native/docs/pixelratio.html).

Exemplifying how is the calculation of pixel ratio, 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 measurement unit in React Native equals exactly 1 px in mdpi and for the other resolutions you can multiply by the ratio between the pixel density of the current resolution and the resolution density in mdpi. Thus, 1 would amount to 1 × 480 dpi/160 dpi px = 3 px in xxhdpi for the pixel ratio is 480 dpi/160 dpi = 3.

For iOS, the default resolution is 163 dpi and the rest are whole multiples of it. So, 1 may amount to 1 px, 2 px, 3 px etc..

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.