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.