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?
All dimensions in React Native are unitless, and represent density-independent pixels. link
Translating:
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