Skip to main content
PixelRatio gives access to the device’s pixel density, allowing you to load appropriately sized images and create pixel-perfect layouts.

​
Methods

​
get()

static get(): number
Returns the device pixel density. Returns:
  • Device pixel ratio as a number
Typical Values:
  • 1 - mdpi Android devices (160 dpi)
  • 1.5 - hdpi Android devices (240 dpi)
  • 2 - iPhone 4, 4S, 5, 5c, 5s, 6, 7, 8, SE; xhdpi Android devices (320 dpi)
  • 3 - iPhone 6 Plus, 7 Plus, 8 Plus, X, XS, XR, 11, 12; xxhdpi Android devices (480 dpi)
  • 3.5 - Nexus 6, Pixel XL
Example: 
import { PixelRatio } from 'react-native';

const pixelRatio = PixelRatio.get();
console.log('Device pixel ratio:', pixelRatio);
// On iPhone X: 3
// On standard Android: 2

​
getFontScale()

static getFontScale(): number
Returns the scaling factor for font sizes. This is the ratio used to calculate absolute font size, reflecting the user’s font size preference. Returns:
  • Font scale as a number (defaults to pixel ratio if not set)
User Settings:
  • Android: Settings > Display > Font size
  • iOS: Settings > Display & Brightness > Text Size
Example: 
import { PixelRatio } from 'react-native';

const fontScale = PixelRatio.getFontScale();
const baseFontSize = 16;
const actualFontSize = baseFontSize * fontScale;

console.log('Font scale:', fontScale);
console.log('Actual font size:', actualFontSize);

​
getPixelSizeForLayoutSize()

static getPixelSizeForLayoutSize(layoutSize: number): number
Converts a layout size (dp/pt) to pixel size (px). Guaranteed to return an integer. Parameters:
  • layoutSize: Size in density-independent pixels
Returns:
  • Size in physical pixels (rounded to nearest integer)
Example: 
import { PixelRatio, Image } from 'react-native';

// Fetch appropriately sized image
const layoutSize = 200;
const pixelSize = PixelRatio.getPixelSizeForLayoutSize(layoutSize);

const image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100),
});

// On a 2x device: 200 * 2 = 400px
// On a 3x device: 200 * 3 = 600px

​
roundToNearestPixel()

static roundToNearestPixel(layoutSize: number): number
Rounds a layout size (dp/pt) to the nearest layout size that corresponds to an integer number of pixels. Parameters:
  • layoutSize: Size in density-independent pixels
Returns:
  • Rounded size that maps to whole pixels
Example: 
import { PixelRatio, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  hairline: {
    borderWidth: PixelRatio.roundToNearestPixel(0.5),
  },
  box: {
    width: PixelRatio.roundToNearestPixel(100.7),
    // On 3x device: 100.7 * 3 = 302.1 → 302px → 302/3 = 100.67
  }
});

// Example: on a device with PixelRatio of 3
const rounded = PixelRatio.roundToNearestPixel(8.4);
// 8.4 * 3 = 25.2 → rounds to 25px
// 25 / 3 = 8.33 (returned value)

​
Common Use Cases

​
Loading Appropriately Sized Images

import { PixelRatio } from 'react-native';

function getImageSource(baseUrl, width, height) {
  const pixelWidth = PixelRatio.getPixelSizeForLayoutSize(width);
  const pixelHeight = PixelRatio.getPixelSizeForLayoutSize(height);
  
  return {
    uri: `${baseUrl}?w=${pixelWidth}&h=${pixelHeight}`,
  };
}

// Usage
const source = getImageSource(
  'https://example.com/image.jpg',
  200,
  150
);

<Image source={source} style={{width: 200, height: 150}} />

​
Creating Pixel-Perfect Hairlines

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

const styles = StyleSheet.create({
  hairlineWidth: {
    borderBottomWidth: 1 / PixelRatio.get(),
  },
  // Or use the built-in constant
  separator: {
    borderBottomWidth: StyleSheet.hairlineWidth,
  }
});

​
Responsive Font Sizes

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

const { width } = Dimensions.get('window');
const fontScale = PixelRatio.getFontScale();

// Scale font based on screen width and user preference
const baseFontSize = width < 375 ? 14 : 16;
const fontSize = baseFontSize * fontScale;

​
Pixel Grid Snapping

React Native automatically rounds pixel values to avoid blurry elements. All layout calculations use arbitrary precision numbers, but when setting native element positions and dimensions, values are rounded relative to the root (not the parent) to avoid accumulating rounding errors. Use roundToNearestPixel() when you need to ensure a calculated value snaps correctly to the pixel grid: 
import { PixelRatio } from 'react-native';

const calculated = someValue * 0.33;
const snapped = PixelRatio.roundToNearestPixel(calculated);

Build docs developers (and LLMs) love

Get started for freeTalk to us