react-native-responsive-metrics

Responsive scaling utilities for React Native. Scales UI consistently across phones and tablets based on a baseline design size of 390×844 (iPhone 14).

Made by Umang Thakkar

Installation

npm install react-native-responsive-metrics
# or
yarn add react-native-responsive-metrics

Usage

import {
  horizontalScale,
  verticalScale,
  moderateScale,
  responsiveFontSize,
  getResponsiveIconSize,
  isTablet,
} from "react-native-responsive-metrics";

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: horizontalScale(16),
    paddingVertical: verticalScale(12),
    borderRadius: moderateScale(8),
  },
  title: {
    fontSize: responsiveFontSize(18),
  },
  icon: {
    width: getResponsiveIconSize(24),
    height: getResponsiveIconSize(24),
  },
});

API

| Function | Signature | Description | | ----------------------- | ------------------------------------------- | ------------------------------------------------------------------- | | horizontalScale | (size: number) => number | Scales based on screen width | | verticalScale | (size: number) => number | Scales based on screen height | | moderateScale | (size: number, factor?: number) => number | Balanced scale, less aggressive (default factor: 0.5) | | responsiveFontSize | (size: number) => number | Font size scaled to screen width, pixel-rounded for crisp rendering | | getResponsiveIconSize | (baseSize?: number) => number | Scales icon size to smallest screen dimension | | isTablet | boolean | true if device width ≥ 768px |

When to use which

| Function | Best for | | ----------------------- | ----------------------------- | | horizontalScale | padding, margin, width | | verticalScale | height, top/bottom spacing | | moderateScale | border radius, general sizing | | responsiveFontSize | all text / font sizes | | getResponsiveIconSize | SVG icons, image sizes |

Baseline

| Property | Value | | --------------------- | ------------------- | | Design width | 390px (iPhone 14) | | Design height | 844px (iPhone 14) | | Tablet max width cap | 550px | | Tablet max height cap | 900px |

Also check out

🗂 React Native Base Template — A ready-to-use React Native project structure to get started fast.

👉 @umang-thakkar/base-template on npm

License

MIT © Umang Thakkar