You might have noticed that Expo and React Native don’t always use units, like pixels (
px), when setting dimensions or font sizes.
That’s because using pixels in mobile apps will cause a lot of deviations when running the app on older and newer devices.
Older phones usually have screens with lower precision or pixels per inch. Lower precision means that the screen has fewer pixels available to control. When using pixels on older devices, you content might appear larger than intended compared to newer devices with higher precision.
On the right you can see the Samsung Galaxy S20, released in 2020, and the LG Nexus 4 from 2012. With 8 years of technological improvements, they managed to increase the pixels per inch from 320dpi to 563dpi. If you used pixels to size your content, it will appear smaller on the higher precision screen and bigger on the lower precision screen.
In mobile development, it’s common to use a different type of unit called “Density-independent Pixels” or
dp unit takes the screen precision into account when setting the actual amount of pixels.
This unit type is also the default unit for React Native when setting styling properties, such as
Some styling properties, like width and height, also accept percentage values.
This format doesn’t have the same pixel-related limitation because it’s a relative value.
If you have a parent view with a total width of
50% is relative to these density-independent pixels.
The image on the right visualises the different outcomes when using fixed pixels compared to density-independent pixels. When using fixed pixels, the display size is relative to the screen precision.
- For higher screen precision, this means the image will have a width of 320 pixels from a total of 1440 pixels.
- For lower screen precision, the image will have a width of 320 pixels from a total of 768 pixels.
Because 320 out of 1440 pixels is significantly less compared to 320 out of 768 pixels, the image is rendered with a different size.
Density-independent pixels help to remove these precision differences. They transform the pixels based on the screen precision to make the image appear similar in size on both high and low precision screens.