react-native-responsive-metrics 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Umang Thakkar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# react-native-responsive-metrics
+
+[![npm version](https://img.shields.io/npm/v/react-native-responsive-metrics)](https://www.npmjs.com/package/react-native-responsive-metrics)
+[![license](https://img.shields.io/npm/l/react-native-responsive-metrics)](./LICENSE)
+
+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](https://github.com/Umang2809)
+
+---
+
+## Installation
+
+```bash
+npm install react-native-responsive-metrics
+# or
+yarn add react-native-responsive-metrics
+```
+
+---
+
+## Usage
+
+```ts
+import {
+  horizontalScale,
+  verticalScale,
+  moderateScale,
+  getResponsiveIconSize,
+  isTablet,
+} from "react-native-responsive-metrics";
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: horizontalScale(16),
+    paddingVertical: verticalScale(12),
+    borderRadius: moderateScale(8),
+  },
+  title: {
+    fontSize: moderateScale(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`) |
+| `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`         | font sizes, border radius, icon 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](https://www.npmjs.com/package/@umang-thakkar/base-template)
+
+---
+
+## License
+
+MIT © [Umang Thakkar](https://github.com/Umang2809)

package/lib/index.d.ts

@@ -0,0 +1,23 @@
+export declare const isTablet: boolean;
+/**
+ * Scale based on screen width.
+ * Use for: padding, margin, width
+ */
+export declare const horizontalScale: (size: number) => number;
+/**
+ * Scale based on screen height.
+ * Use for: height, top/bottom spacing
+ */
+export declare const verticalScale: (size: number) => number;
+/**
+ * Balanced scale — less aggressive than horizontalScale.
+ * Use for: font sizes, border radius, icon sizes
+ * @param factor - scaling aggressiveness (default: 0.5)
+ */
+export declare const moderateScale: (size: number, factor?: number) => number;
+/**
+ * Icon size scaled to the smallest screen dimension.
+ * Use for: SVG icons, image sizes
+ */
+export declare const getResponsiveIconSize: (baseSize?: number) => number;
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ,EAAE,OAAsB,CAAC;AAQ9C;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,KAAG,MACD,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,KAAG,MACG,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,EAAE,SAAQ,MAAY,KAAG,MACnB,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAAI,WAAU,MAAY,KAAG,MAM9D,CAAC"}

package/lib/index.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getResponsiveIconSize = exports.moderateScale = exports.verticalScale = exports.horizontalScale = exports.isTablet = void 0;
+const react_native_1 = require("react-native");
+const { width, height } = react_native_1.Dimensions.get("window");
+const guidelineBaseWidth = 390;
+const guidelineBaseHeight = 844;
+exports.isTablet = width >= 768;
+const tabletMaxWidth = 550;
+const tabletMaxHeight = 900;
+const effectiveWidth = exports.isTablet ? Math.min(width, tabletMaxWidth) : width;
+const effectiveHeight = exports.isTablet ? Math.min(height, tabletMaxHeight) : height;
+/**
+ * Scale based on screen width.
+ * Use for: padding, margin, width
+ */
+const horizontalScale = (size) => (effectiveWidth / guidelineBaseWidth) * size;
+exports.horizontalScale = horizontalScale;
+/**
+ * Scale based on screen height.
+ * Use for: height, top/bottom spacing
+ */
+const verticalScale = (size) => (effectiveHeight / guidelineBaseHeight) * size;
+exports.verticalScale = verticalScale;
+/**
+ * Balanced scale — less aggressive than horizontalScale.
+ * Use for: font sizes, border radius, icon sizes
+ * @param factor - scaling aggressiveness (default: 0.5)
+ */
+const moderateScale = (size, factor = 0.5) => size + ((0, exports.horizontalScale)(size) - size) * factor;
+exports.moderateScale = moderateScale;
+/**
+ * Icon size scaled to the smallest screen dimension.
+ * Use for: SVG icons, image sizes
+ */
+const getResponsiveIconSize = (baseSize = 100) => {
+    const scaleFactor = Math.min(effectiveWidth / guidelineBaseWidth, effectiveHeight / guidelineBaseHeight);
+    return baseSize * scaleFactor;
+};
+exports.getResponsiveIconSize = getResponsiveIconSize;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAE1C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAEnD,MAAM,kBAAkB,GAAW,GAAG,CAAC;AACvC,MAAM,mBAAmB,GAAW,GAAG,CAAC;AAE3B,QAAA,QAAQ,GAAY,KAAK,IAAI,GAAG,CAAC;AAE9C,MAAM,cAAc,GAAG,GAAG,CAAC;AAC3B,MAAM,eAAe,GAAG,GAAG,CAAC;AAE5B,MAAM,cAAc,GAAG,gBAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;AAC1E,MAAM,eAAe,GAAG,gBAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;AAE9E;;;GAGG;AACI,MAAM,eAAe,GAAG,CAAC,IAAY,EAAU,EAAE,CACtD,CAAC,cAAc,GAAG,kBAAkB,CAAC,GAAG,IAAI,CAAC;AADlC,QAAA,eAAe,mBACmB;AAE/C;;;GAGG;AACI,MAAM,aAAa,GAAG,CAAC,IAAY,EAAU,EAAE,CACpD,CAAC,eAAe,GAAG,mBAAmB,CAAC,GAAG,IAAI,CAAC;AADpC,QAAA,aAAa,iBACuB;AAEjD;;;;GAIG;AACI,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,SAAiB,GAAG,EAAU,EAAE,CAC1E,IAAI,GAAG,CAAC,IAAA,uBAAe,EAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,MAAM,CAAC;AADpC,QAAA,aAAa,iBACuB;AAEjD;;;GAGG;AACI,MAAM,qBAAqB,GAAG,CAAC,WAAmB,GAAG,EAAU,EAAE;IACtE,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAC1B,cAAc,GAAG,kBAAkB,EACnC,eAAe,GAAG,mBAAmB,CACtC,CAAC;IACF,OAAO,QAAQ,GAAG,WAAW,CAAC;AAChC,CAAC,CAAC;AANW,QAAA,qBAAqB,yBAMhC"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "react-native-responsive-metrics",
+  "version": "1.0.0",
+  "description": "Responsive scaling utilities for React Native — phones and tablets",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "responsive",
+    "scale",
+    "scaling",
+    "tablet",
+    "dimensions",
+    "metrics",
+    "ui",
+    "layout",
+    "horizontalScale",
+    "verticalScale",
+    "moderateScale"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react-native": ">=0.60.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react-native": "^0.73.0"
+  }
+}