react-native-dynamic-responsive 1.0.2 → 1.1.0

package/dist/responsive.d.ts

@@ -1,3 +1,4 @@
+import { DependencyList } from 'react';
 import { StyleSheet } from 'react-native';
 export declare const SCREEN_WIDTH: () => number;
 export declare const SCREEN_HEIGHT: () => number;
@@ -42,10 +43,24 @@ export type ResponsiveUtils = {
 };
 export declare const useResponsive: () => ResponsiveUtils;
 /**
- * Hook to create dynamic stylesheets that recalculate on dimension changes.
+ * Hook to create dynamic stylesheets that recalculate on dimension changes,
+ * theme switching, or custom dependency updates.
+ *
  * Usage:
- * const styles = useStyles((r) => ({
- *   container: { padding: r.ms(16) }
- * }));
+ * 1. Responsive only:
+ *    const styles = useStyles((r) => ({
+ *      container: { padding: r.ms(16) }
+ *    }));
+ *
+ * 2. With Theme / Custom Props (recommended for dynamic theming):
+ *    const styles = useStyles((r, theme) => ({
+ *      container: { backgroundColor: theme.colors.background, padding: r.ms(16) }
+ *    }), theme);
+ *
+ * 3. With Dependency Array:
+ *    const styles = useStyles((r) => ({
+ *      container: { backgroundColor: theme.colors.background, padding: r.ms(16) }
+ *    }), [theme]);
  */
-export declare function useStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(createStyles: (utils: ResponsiveUtils) => T | StyleSheet.NamedStyles<T>): T;
+export declare function useStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(createStyles: (utils: ResponsiveUtils) => T | StyleSheet.NamedStyles<T>, deps?: DependencyList): T;
+export declare function useStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>, P = undefined>(createStyles: (utils: ResponsiveUtils, props: P) => T | StyleSheet.NamedStyles<T>, props?: P, deps?: DependencyList): T;

package/dist/responsive.js

@@ -100,16 +100,10 @@ const useResponsive = () => {
     }, [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) {
+function useStyles(createStyles, propsOrDeps, deps) {
     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]);
+    const isDepsArray = Array.isArray(propsOrDeps);
+    const resolvedProps = (isDepsArray ? undefined : propsOrDeps);
+    const extraDeps = (isDepsArray ? propsOrDeps : deps) || [];
+    return (0, react_1.useMemo)(() => react_native_1.StyleSheet.create(createStyles(responsive, resolvedProps)), [responsive.width, responsive.height, resolvedProps, ...extraDeps]);
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-native-dynamic-responsive",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "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"
+    "url": "git+https://gitlab.com/code_dharmendra/react-native-dynamic-responsive.git"
   },
   "scripts": {
     "build": "tsc",