react-native-dynamic-responsive 1.0.0 → 1.0.2

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "react-native-dynamic-responsive",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Production-ready dynamic responsive setup for React Native apps.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/code_dharmendra/react-native-dynamic-responsive.git"
+  },
   "scripts": {
     "build": "tsc",
     "prepublishOnly": "npm run build"
@@ -20,7 +24,10 @@
     "foldable",
     "dynamic",
     "size-matters",
-    "react-native-size-matters"
+    "react-native-size-matters",
+    "responsive",
+    "responsive-ui",
+    "dynamic-responsive"
   ],
   "author": "Dharmendra (https://www.linkedin.com/in/dharmendra-appdeveloper)",
   "license": "MIT",

package/src/index.ts

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

package/src/responsive.ts

@@ -1,146 +0,0 @@
-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]);
-}