PixelRatio: Bridge Layout Units to Physical Pixels

Why it exists

Modern devices have vastly different screen sizes and pixel densities. A 100x100 pixel square looks huge on an old monitor but tiny on a 4K phone screen. Furthermore, users expect apps to respect their system-wide accessibility settings for text size. PixelRatio exists to bridge the gap between your abstract layout code and the physical reality of a user's device and preferences.

The mental model

Think of PixelRatio as a translator. Your app's layout speaks in an abstract language called 'density-independent pixels' (dp). PixelRatio translates this abstract language into two concrete outputs: the number of physical screen pixels required (get()) and the font size multiplier the user has requested (getFontScale()). It lets your UI adapt correctly to any environment.

How it works

PixelRatio provides several static methods to get device-specific information.

PixelRatio.get() returns the device's pixel density. A value of 2 means it's a '@2x' or 'retina' display, where one layout point corresponds to a 2x2 grid of physical pixels. A value of 3 means '@3x'.

PixelRatio.getFontScale() returns the user's preferred font size multiplier from the OS accessibility settings. If a user sets their system font to be larger, this value might be 1.2 or higher. Your app should multiply its base font sizes by this factor.

PixelRatio.getPixelSizeForLayoutSize(size) is a helper that converts a layout size in dp to a physical pixel size, effectively doing size * PixelRatio.get() and rounding to the nearest integer.

When to use it

Use PixelRatio when fetching images to request a higher-resolution asset for a high-density screen. For example, for a 100x100dp image view on a '@3x' device, you should request a 300x300px image to avoid blurriness. Most importantly, use it to calculate font sizes, line heights, and padding around text to ensure your UI is accessible and respects user settings.

When not to use it

Avoid scaling elements that are meant to be a fixed, absolute size. A 1dp hairline border should almost always render as the thinnest possible line on the device, regardless of font scaling. Applying font scale to everything can break layouts that rely on fixed-size icons or separators. Be intentional about what scales with text and what remains static.

One canonical example

To implement dynamic font scaling that respects user accessibility settings, you multiply your base font size by the font scale factor. This ensures your text is readable for all users.

import { PixelRatio, StyleSheet } from 'react-native';

const baseFontSize = 16;

const styles = StyleSheet.create({

title: { fontSize: baseFontSize * PixelRatio.getFontScale(), }, body: { fontSize: (baseFontSize 0.8) PixelRatio.getFontScale(), } });