Sizing with physical units (cm, inch) in React Native

Question

I am implementing a "ruler" feature to my app and it is critical that the ruler size/scale, in centimeters, is consistent across multiple devices. That is, 1 'tick' must be always equal to 1 centimenter. Howerver I have not found in any documentation a way to size components using real-world units (cm, inch) like you can do in CSS; Nor have I found a way to accurately get the screen size (in inches or cm) or DPI.

Is there a way to use cm/inches in React Native or get the REAL screen DPI?

Answer 1

Dimensions properties in react native are unitless, so those properties are not available in ReactNative. The best you can do is use PixelRatio's getPixelSizeForLayoutSize() which is documented here: https://reactnative.dev/docs/pixelratio#getpixelsizeforlayoutsize

You would need to also have the pixel density (dpi) for your solution, and the formula: https://www.pixelto.net/px-to-cm-converter

You still might run into some weird situations where pixels are split in half and other rounding errors as you're trying to fit 1cm into tiny pixels on the screen that may not always equal to 1cm, due to physical limitations.