react-native-responsive-scaler

Production-ready responsive scaling library for React Native. Handles horizontal, vertical, moderate scaling and device-aware font sizing across phones and tablets.

Installation

npm install react-native-responsive-scaler

Or copy the folder into your project and import directly.

Quick Start

// App.tsx — configure once at app startup
import { configure } from 'react-native-responsive-scaler';

configure({ baseWidth: 375, baseHeight: 812 }); // Your design's base dimensions

// Any component or style file
import {
  horizontalScale,
  verticalScale,
  moderateScale,
  getFontSize,
} from 'react-native-responsive-scaler';

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: horizontalScale(16),
    paddingVertical: verticalScale(12),
    borderRadius: moderateScale(8),
  },
  title: {
    fontSize: getFontSize(20),
  },
});

API Reference

configure(options)

Set base design dimensions for your project. Call once before any scaling functions.

| Option | Type | Default | Description | | ------------ | ------ | ------- | ------------------------------ | | baseWidth | number | 375 | Design base width (e.g. 375) | | baseHeight | number | 812 | Design base height (e.g. 812) |

horizontalScale(size)

Scales a value proportionally to screen width.

Use for: width, paddingHorizontal, marginHorizontal, gap, left, right

horizontalScale(16) // 16 on 375px width, ~18.6 on 436px width

verticalScale(size)

Scales a value proportionally to screen height.

Use for: height, paddingVertical, marginVertical, top, bottom

verticalScale(12) // 12 on 812px height, ~13.2 on 896px height

moderateScale(size, factor?)

Linear interpolation between no scaling and full horizontal scaling. Default factor is 0.5.

• factor = 0 → no scaling (returns original size)
• factor = 0.5 → halfway between original and horizontalScale (default)
• factor = 1 → same as horizontalScale

Use for: borderRadius, icon sizes, elevation, or anywhere full scaling feels too aggressive.

moderateScale(10)       // moderate scaling with default factor 0.5
moderateScale(10, 0.3)  // gentler scaling
moderateScale(10, 0.8)  // more aggressive scaling

getFontSize(size)

Device-aware font scaling. Detects phone vs tablet and screen size category (small/medium/large), applies clamped scaling, adds a 10% boost on tablets, and respects the user's accessibility font scale.

getFontSize(16) // adapts to device type + screen size
getFontSize(24) // larger heading, still properly scaled

getDeviceType()

Returns 'phone' or 'tablet'. Result is cached after first call.

getScreenSizeCategory()

Returns 'small', 'medium', or 'large'. Result is cached after first call.

getDimensions()

Returns { width, height } — reactive to orientation changes.

getPortraitWidth()

Returns min(width, height) — stable reference regardless of orientation.

adjustFontConfig(deviceType, sizeCategory, minScale, maxScale)

Override font scaling bounds at runtime.

adjustFontConfig('tablet', 'large', 1.6, 1.8);

moderateScale — When to use what?

| Property | Function | Why | | ------------------- | ----------------- | ------------------------------------------- | | width | horizontalScale | Scales with screen width | | height | verticalScale | Scales with screen height | | paddingHorizontal | horizontalScale | Horizontal spacing | | paddingVertical | verticalScale | Vertical spacing | | fontSize | getFontSize | Device-aware with clamping | | borderRadius | moderateScale | Full scaling looks off on large screens | | iconSize | moderateScale | Icons shouldn't grow as aggressively | | elevation | moderateScale | Shadows need subtle scaling | | lineHeight | getFontSize | Should match font scaling |

Shorthand Aliases

For convenience, you can create shorthand aliases in your project:

import {
  horizontalScale as hs,
  verticalScale as vs,
  moderateScale as ms,
  getFontSize as fs,
} from 'react-native-responsive-scaler';

export { hs, vs, ms, fs };

Requirements

• React Native >= 0.60.0

License

MIT