Does Flexbox in React Native use dp or pixel?

Question

As mentioned in the title, I am confused about the units of layout size values ​​used in RN. The documentation shows the code below, which suggests using dp instead of a pixel as a unit of measure for size. Here, the getPixelSizeForLayoutSize () function tries to convert dp values ​​to pixel values. However, in real applications, my components go beyond the screen when they do not divide the size values ​​(height / width, etc.) Using PixelRatio.get (). Would like your clarification!

var image = getImage({ width: PixelRatio.getPixelSizeForLayoutSize(200), height: PixelRatio.getPixelSizeForLayoutSize(100), }); <Image source={image} style={{width: 200, height: 100}} /> 

Answer 1

React Native uses logical pixels (also known as “dots” on iOS), unlike device pixels at the JavaScript level. When working at your own level, sometimes you may need to work with the pixels of the device, multiplying the logical pixels by the screen scale (for example, 2x, 3x).

When you work with images, you need to specify their sizes in logical pixels. In addition, React Native supports fractional pixels. When you need to specify exact layouts when detailing the pixels of a device, use 1 / PixelRatio.get() .