Logical Pixels vs Physical Pixels

In this lesson, you will learn how to architect consistent layouts by using density-independent logical pixels instead of raw hardware pixels.

The Problem of Pixel Density

In the early days of mobile development, one pixel in your code equaled exactly one dot on the screen. However, modern screens are "High-Density," meaning a single inch of screen space can contain hundreds or even thousands of tiny physical hardware pixels. If React Native used physical pixels, a width: 100 box would look massive on a low-resolution phone and microscopic on a high-resolution "Retina" display.

Logical Pixels to the Rescue

To solve this, React Native uses Logical Pixels (often called Density-Independent Pixels or dp).

When you write width: 100 in your stylesheet, you aren't telling the phone to occupy 100 physical hardware dots. Instead, you are providing a unit that the React Native layout engine translates based on the device's Pixel Ratio.

The formula works like this: Physical Pixels = Logical Pixels * Pixel Ratio

If a device has a Pixel Ratio of 3, a width: 100 declaration will occupy 300 physical hardware pixels. By targeting logical pixels, your layout maintains its relative size regardless of how many tiny physical dots the screen hardware packs into that space.

Practical Application

Consider this styling code:

const styles = StyleSheet.create({
  box: {
    width: 150, // Logical pixels
    height: 150,
    backgroundColor: 'skyblue',
  },
});

Because 150 is a logical value, this box will look visually identical in size on a basic budget phone and a high-end flagship device. You don't need to manually calculate the hardware resolution of the device; the layout engine handles the math so your design remains stable across the entire Android and iOS ecosystem.

Key Takeaway: Always define your layout dimensions using logical pixels to ensure your interface maintains its intended size across varying hardware display densities.