tezvyn:

PixelRatio: Bridge Layout Units to Physical Pixels

Source: reactnative.devintermediate

PixelRatio is your app's translator, converting abstract layout units into physical pixels and respecting the user's chosen font size. Use it to fetch correct image sizes and make fonts accessible. Ignoring `getFontScale()` creates a fixed, inaccessible UI.

PixelRatio is React Native's bridge between abstract layout units (dp) and the physical device, providing both screen density and user font scaling. Use `getPixelSizeForLayoutSize()` for sharp images on high-res screens and `getFontScale()` to make fonts adapt to system accessibility settings. The biggest footgun is ignoring `getFontScale()`, which results in a fixed, inaccessible UI that breaks user expectations.

Read the original → reactnative.dev

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.

PixelRatio: Bridge Layout Units to Physical Pixels · Tezvyn