react-native-dynamic-responsive 1.0.0

package/README.md

@@ -0,0 +1,135 @@
+# react-native-dynamic-responsive
+
+The **best responsive package** for React Native! A **super lightweight**, production-ready responsive styling library built for the modern era of mobile apps.
+
+Whether you are using **Expo** or **React Native CLI**, this package works seamlessly out of the box to handle dynamic orientation changes, foldable devices (inner/outer screen swapping), and tablets seamlessly—all without breaking a sweat!
+
+If you are looking for the ultimate `react-native-size-matters` alternative that fully supports dynamic screen sizes and hooks, you've found it.
+
+## 🌟 Features
+- **Universal Compatibility**: 100% compatible with both **Expo** (managed & bare workflows) and **React Native CLI**.
+- **Ultra Lightweight**: Zero dependencies (only peer dependencies on React & React Native).
+- **Dynamic & Reactive**: Styles instantly recalculate when screen dimensions change (e.g., when a user unfolds a device or rotates their screen).
+- **Familiar API**: Uses industry-standard scaling terminology (`ms`, `s`, `vs`) inspired by `react-native-size-matters`.
+- **Hooks-First Architecture**: Built for modern React Native apps using a `useStyles` pattern to avoid stale `StyleSheet.create` evaluations.
+
+---
+
+## 🚀 Installation
+
+```bash
+npm install react-native-dynamic-responsive
+# or
+yarn add react-native-dynamic-responsive
+```
+
+---
+
+## 📖 Quick Start
+
+The best way to use this package is via the `useStyles` hook. This ensures your styles re-render instantly on fold/unfold or screen rotation.
+
+```tsx
+import React from 'react';
+import { View, Text } from 'react-native';
+import { useStyles, useResponsive, ResponsiveUtils } from 'react-native-dynamic-responsive';
+
+export const MyComponent = () => {
+  // Optional: Pull device status if you need logic inside your component
+  const { isTablet, isFold } = useResponsive();
+  
+  // 1. Pass the createStyles function to the hook
+  const styles = useStyles(createStyles);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>
+        {isTablet ? 'Tablet View' : 'Phone View'}
+      </Text>
+    </View>
+  );
+};
+
+// 2. Define your styles outside the component to keep things clean.
+// The `r` parameter (ResponsiveUtils) gives you access to real-time scaling functions!
+const createStyles = (r: ResponsiveUtils) => ({
+  container: {
+    // scale (s): Standard scaling based on width
+    padding: r.s(16), 
+    
+    // moderateScale (ms): Smart scaling that prevents things from getting too big on tablets
+    marginTop: r.ms(20), 
+    
+    // width/height percentages (wp/hp)
+    width: r.isTablet ? r.wp(50) : r.wp(100), 
+    
+    backgroundColor: '#fff',
+  },
+  title: {
+    // Use ms() for typography!
+    fontSize: r.ms(24),
+    fontWeight: 'bold',
+  }
+});
+```
+
+---
+
+## 🛠 Advanced Usage
+
+### Available Scaling Functions
+
+When using `useStyles((r) => { ... })` or `const r = useResponsive()`, you have access to the following utilities on the `r` object:
+
+| Function | Description | Best Used For |
+| :--- | :--- | :--- |
+| **`r.ms(size, factor?)`** | Moderate Scale. Scales based on width but less aggressively. | **Typography, icons, padding/margins** |
+| **`r.s(size)`** | Standard Scale. Scales directly proportional to screen width. | Widths, horizontal spacing |
+| **`r.vs(size)`** | Vertical Scale. Scales directly proportional to screen height. | Heights, vertical spacing |
+| **`r.wp(percent)`** | Width Percentage. e.g., `r.wp(50)` = 50% of screen width | Containers, Modals |
+| **`r.hp(percent)`** | Height Percentage. e.g., `r.hp(50)` = 50% of screen height | Containers, Modals |
+
+### Available Device Flags
+
+You can easily trigger different UI logic without importing `Platform` or `Dimensions` manually:
+
+- `r.isTablet` (Width >= 768)
+- `r.isFold` (Width >= 600 & < 768)
+- `r.isPhone` (Width < 600)
+- `r.isSmallPhone` (Width <= 360)
+- `r.isLandscape` (Width > Height)
+
+### Legacy / Static Usage (Not Recommended for Foldables)
+
+If you have an older codebase and need to use the scaling utilities inside standard, static `StyleSheet.create`, you can still import them directly. 
+
+*Note: These will evaluate only once when the file loads, so they will not update dynamically if a foldable device unfolds.*
+
+```tsx
+import { StyleSheet, View } from 'react-native';
+import { ms, s, vs } from 'react-native-dynamic-responsive';
+
+const StaticComponent = () => <View style={styles.box} />;
+
+const styles = StyleSheet.create({
+  box: {
+    width: s(100),
+    height: vs(100),
+    padding: ms(10),
+  }
+});
+```
+
+---
+
+## 👤 Author
+
+**Dharmendra**  
+App Developer  
+[LinkedIn Profile](https://www.linkedin.com/in/dharmendra-appdeveloper)
+
+---
+
+## 📝 License
+
+MIT License.

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './responsive';

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./responsive"), exports);

package/dist/responsive.d.ts

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+export declare const SCREEN_WIDTH: () => number;
+export declare const SCREEN_HEIGHT: () => number;
+export declare const IS_TABLET: () => boolean;
+export declare const IS_FOLD: () => boolean;
+export declare const IS_PHONE: () => boolean;
+export declare const IS_SMALL_PHONE: () => boolean;
+export declare const IS_LANDSCAPE: () => boolean;
+export declare const scale: (size: number) => number;
+export declare const s: (size: number) => number;
+export declare const verticalScale: (size: number) => number;
+export declare const vs: (size: number) => number;
+export declare const moderateScale: (size: number, factor?: number) => number;
+export declare const ms: (size: number, factor?: number) => number;
+export declare const wp: (percent: number | string) => number;
+export declare const hp: (percent: number | string) => number;
+/**
+ * ==========================================================
+ * Dynamic React Hooks (Production-Ready)
+ * Automatically updates on:
+ * - Rotation
+ * - Fold / Unfold
+ * - Multi Window
+ * ==========================================================
+ */
+export type ResponsiveUtils = {
+    s: (size: number) => number;
+    scale: (size: number) => number;
+    vs: (size: number) => number;
+    verticalScale: (size: number) => number;
+    ms: (size: number, factor?: number) => number;
+    moderateScale: (size: number, factor?: number) => number;
+    wp: (percent: number | string) => number;
+    hp: (percent: number | string) => number;
+    width: number;
+    height: number;
+    isTablet: boolean;
+    isFold: boolean;
+    isPhone: boolean;
+    isSmallPhone: boolean;
+    isLandscape: boolean;
+};
+export declare const useResponsive: () => ResponsiveUtils;
+/**
+ * Hook to create dynamic stylesheets that recalculate on dimension changes.
+ * Usage:
+ * const styles = useStyles((r) => ({
+ *   container: { padding: r.ms(16) }
+ * }));
+ */
+export declare function useStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(createStyles: (utils: ResponsiveUtils) => T | StyleSheet.NamedStyles<T>): T;

package/dist/responsive.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsive = exports.hp = exports.wp = exports.ms = exports.moderateScale = exports.vs = exports.verticalScale = exports.s = exports.scale = exports.IS_LANDSCAPE = exports.IS_SMALL_PHONE = exports.IS_PHONE = exports.IS_FOLD = exports.IS_TABLET = exports.SCREEN_HEIGHT = exports.SCREEN_WIDTH = void 0;
+exports.useStyles = useStyles;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+/**
+ * ==========================================================
+ * Base Design Size (iPhone 15 / Modern Design Reference)
+ * ==========================================================
+ */
+const BASE_WIDTH = 390;
+const BASE_HEIGHT = 844;
+/**
+ * ==========================================================
+ * Prevent excessive scaling on Tablets / Fold Open
+ * ==========================================================
+ */
+const MAX_SCALE_WIDTH = 420;
+const MAX_SCALE_HEIGHT = 932;
+/**
+ * ==========================================================
+ * Current Window (Static - Evaluated Once)
+ * ==========================================================
+ */
+const getWindow = () => react_native_1.Dimensions.get('window');
+const SCREEN_WIDTH = () => getWindow().width;
+exports.SCREEN_WIDTH = SCREEN_WIDTH;
+const SCREEN_HEIGHT = () => getWindow().height;
+exports.SCREEN_HEIGHT = SCREEN_HEIGHT;
+const IS_TABLET = () => (0, exports.SCREEN_WIDTH)() >= 768;
+exports.IS_TABLET = IS_TABLET;
+const IS_FOLD = () => (0, exports.SCREEN_WIDTH)() >= 600 && (0, exports.SCREEN_WIDTH)() < 768;
+exports.IS_FOLD = IS_FOLD;
+const IS_PHONE = () => (0, exports.SCREEN_WIDTH)() < 600;
+exports.IS_PHONE = IS_PHONE;
+const IS_SMALL_PHONE = () => (0, exports.SCREEN_WIDTH)() <= 360;
+exports.IS_SMALL_PHONE = IS_SMALL_PHONE;
+const IS_LANDSCAPE = () => (0, exports.SCREEN_WIDTH)() > (0, exports.SCREEN_HEIGHT)();
+exports.IS_LANDSCAPE = IS_LANDSCAPE;
+/**
+ * ==========================================================
+ * Static Responsive Scale (For backward compatibility)
+ * ==========================================================
+ */
+const effectiveWidth = () => Math.min((0, exports.SCREEN_WIDTH)(), MAX_SCALE_WIDTH);
+const effectiveHeight = () => Math.min((0, exports.SCREEN_HEIGHT)(), MAX_SCALE_HEIGHT);
+const scale = (size) => (effectiveWidth() / BASE_WIDTH) * size;
+exports.scale = scale;
+exports.s = exports.scale;
+const verticalScale = (size) => (effectiveHeight() / BASE_HEIGHT) * size;
+exports.verticalScale = verticalScale;
+exports.vs = exports.verticalScale;
+const moderateScale = (size, factor = 0.25) => size + ((0, exports.scale)(size) - size) * factor;
+exports.moderateScale = moderateScale;
+exports.ms = exports.moderateScale;
+const wp = (percent) => {
+    const value = typeof percent === 'number' ? percent : parseFloat(percent);
+    return react_native_1.PixelRatio.roundToNearestPixel(((0, exports.SCREEN_WIDTH)() * value) / 100);
+};
+exports.wp = wp;
+const hp = (percent) => {
+    const value = typeof percent === 'number' ? percent : parseFloat(percent);
+    return react_native_1.PixelRatio.roundToNearestPixel(((0, exports.SCREEN_HEIGHT)() * value) / 100);
+};
+exports.hp = hp;
+const useResponsive = () => {
+    const { width, height } = (0, react_native_1.useWindowDimensions)();
+    return (0, react_1.useMemo)(() => {
+        const eWidth = Math.min(width, MAX_SCALE_WIDTH);
+        const eHeight = Math.min(height, MAX_SCALE_HEIGHT);
+        const _s = (size) => (eWidth / BASE_WIDTH) * size;
+        const _vs = (size) => (eHeight / BASE_HEIGHT) * size;
+        const _ms = (size, factor = 0.25) => size + (_s(size) - size) * factor;
+        const _wp = (percent) => {
+            const value = typeof percent === 'number' ? percent : parseFloat(percent);
+            return react_native_1.PixelRatio.roundToNearestPixel((width * value) / 100);
+        };
+        const _hp = (percent) => {
+            const value = typeof percent === 'number' ? percent : parseFloat(percent);
+            return react_native_1.PixelRatio.roundToNearestPixel((height * value) / 100);
+        };
+        return {
+            s: _s,
+            scale: _s,
+            vs: _vs,
+            verticalScale: _vs,
+            ms: _ms,
+            moderateScale: _ms,
+            wp: _wp,
+            hp: _hp,
+            width,
+            height,
+            isSmallPhone: width <= 360,
+            isPhone: width < 600,
+            isFold: width >= 600 && width < 768,
+            isTablet: width >= 768,
+            isLandscape: width > height,
+        };
+    }, [width, height]);
+};
+exports.useResponsive = useResponsive;
+/**
+ * Hook to create dynamic stylesheets that recalculate on dimension changes.
+ * Usage:
+ * const styles = useStyles((r) => ({
+ *   container: { padding: r.ms(16) }
+ * }));
+ */
+function useStyles(createStyles) {
+    const responsive = (0, exports.useResponsive)();
+    // We only want to recreate the stylesheet if responsive changes (width/height), NOT on every render.
+    // Assuming createStyles is a pure function that relies ONLY on the 'utils' parameter.
+    return (0, react_1.useMemo)(() => react_native_1.StyleSheet.create(createStyles(responsive)), [responsive.width, responsive.height]);
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-native-dynamic-responsive",
+  "version": "1.0.0",
+  "description": "Production-ready dynamic responsive setup for React Native apps.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "react-native-responsive",
+    "expo",
+    "react-native-cli",
+    "best-responsive-package",
+    "responsive-design",
+    "scale",
+    "tablet",
+    "foldable",
+    "dynamic",
+    "size-matters",
+    "react-native-size-matters"
+  ],
+  "author": "Dharmendra (https://www.linkedin.com/in/dharmendra-appdeveloper)",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.72.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './responsive';

package/src/responsive.ts

@@ -0,0 +1,146 @@
+import { useMemo } from 'react';
+import { Dimensions, PixelRatio, useWindowDimensions, StyleSheet } from 'react-native';
+
+/**
+ * ==========================================================
+ * Base Design Size (iPhone 15 / Modern Design Reference)
+ * ==========================================================
+ */
+const BASE_WIDTH = 390;
+const BASE_HEIGHT = 844;
+
+/**
+ * ==========================================================
+ * Prevent excessive scaling on Tablets / Fold Open
+ * ==========================================================
+ */
+const MAX_SCALE_WIDTH = 420;
+const MAX_SCALE_HEIGHT = 932;
+
+/**
+ * ==========================================================
+ * Current Window (Static - Evaluated Once)
+ * ==========================================================
+ */
+const getWindow = () => Dimensions.get('window');
+
+export const SCREEN_WIDTH = () => getWindow().width;
+export const SCREEN_HEIGHT = () => getWindow().height;
+
+export const IS_TABLET = () => SCREEN_WIDTH() >= 768;
+export const IS_FOLD = () => SCREEN_WIDTH() >= 600 && SCREEN_WIDTH() < 768;
+export const IS_PHONE = () => SCREEN_WIDTH() < 600;
+export const IS_SMALL_PHONE = () => SCREEN_WIDTH() <= 360;
+export const IS_LANDSCAPE = () => SCREEN_WIDTH() > SCREEN_HEIGHT();
+
+/**
+ * ==========================================================
+ * Static Responsive Scale (For backward compatibility)
+ * ==========================================================
+ */
+const effectiveWidth = () => Math.min(SCREEN_WIDTH(), MAX_SCALE_WIDTH);
+const effectiveHeight = () => Math.min(SCREEN_HEIGHT(), MAX_SCALE_HEIGHT);
+
+export const scale = (size: number) => (effectiveWidth() / BASE_WIDTH) * size;
+export const s = scale;
+
+export const verticalScale = (size: number) => (effectiveHeight() / BASE_HEIGHT) * size;
+export const vs = verticalScale;
+
+export const moderateScale = (size: number, factor: number = 0.25) =>
+  size + (scale(size) - size) * factor;
+export const ms = moderateScale;
+
+export const wp = (percent: number | string) => {
+  const value = typeof percent === 'number' ? percent : parseFloat(percent);
+  return PixelRatio.roundToNearestPixel((SCREEN_WIDTH() * value) / 100);
+};
+
+export const hp = (percent: number | string) => {
+  const value = typeof percent === 'number' ? percent : parseFloat(percent);
+  return PixelRatio.roundToNearestPixel((SCREEN_HEIGHT() * value) / 100);
+};
+
+/**
+ * ==========================================================
+ * Dynamic React Hooks (Production-Ready)
+ * Automatically updates on:
+ * - Rotation
+ * - Fold / Unfold
+ * - Multi Window
+ * ==========================================================
+ */
+
+export type ResponsiveUtils = {
+  s: (size: number) => number;
+  scale: (size: number) => number;
+  vs: (size: number) => number;
+  verticalScale: (size: number) => number;
+  ms: (size: number, factor?: number) => number;
+  moderateScale: (size: number, factor?: number) => number;
+  wp: (percent: number | string) => number;
+  hp: (percent: number | string) => number;
+  width: number;
+  height: number;
+  isTablet: boolean;
+  isFold: boolean;
+  isPhone: boolean;
+  isSmallPhone: boolean;
+  isLandscape: boolean;
+};
+
+export const useResponsive = (): ResponsiveUtils => {
+  const { width, height } = useWindowDimensions();
+
+  return useMemo(() => {
+    const eWidth = Math.min(width, MAX_SCALE_WIDTH);
+    const eHeight = Math.min(height, MAX_SCALE_HEIGHT);
+
+    const _s = (size: number) => (eWidth / BASE_WIDTH) * size;
+    const _vs = (size: number) => (eHeight / BASE_HEIGHT) * size;
+    const _ms = (size: number, factor = 0.25) => size + (_s(size) - size) * factor;
+    const _wp = (percent: number | string) => {
+      const value = typeof percent === 'number' ? percent : parseFloat(percent);
+      return PixelRatio.roundToNearestPixel((width * value) / 100);
+    };
+    const _hp = (percent: number | string) => {
+      const value = typeof percent === 'number' ? percent : parseFloat(percent);
+      return PixelRatio.roundToNearestPixel((height * value) / 100);
+    };
+
+    return {
+      s: _s,
+      scale: _s,
+      vs: _vs,
+      verticalScale: _vs,
+      ms: _ms,
+      moderateScale: _ms,
+      wp: _wp,
+      hp: _hp,
+      width,
+      height,
+      isSmallPhone: width <= 360,
+      isPhone: width < 600,
+      isFold: width >= 600 && width < 768,
+      isTablet: width >= 768,
+      isLandscape: width > height,
+    };
+  }, [width, height]);
+};
+
+/**
+ * Hook to create dynamic stylesheets that recalculate on dimension changes.
+ * Usage:
+ * const styles = useStyles((r) => ({
+ *   container: { padding: r.ms(16) }
+ * }));
+ */
+export function useStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(
+  createStyles: (utils: ResponsiveUtils) => T | StyleSheet.NamedStyles<T>
+): T {
+  const responsive = useResponsive();
+  
+  // We only want to recreate the stylesheet if responsive changes (width/height), NOT on every render.
+  // Assuming createStyles is a pure function that relies ONLY on the 'utils' parameter.
+  return useMemo(() => StyleSheet.create(createStyles(responsive) as any), [responsive.width, responsive.height]);
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "CommonJS",
+    "lib": ["ES6", "DOM"],
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-native"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}