@umituz/react-native-design-system 4.25.83 → 4.25.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.83",
+  "version": "4.25.84",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/responsive/index.ts

@@ -54,3 +54,12 @@ export {
 
 // Config exports
 export { DEVICE_BREAKPOINTS } from './config';
+
+// Screen dimension hooks — single source of truth for screen width/height
+export {
+  useScreenWidth,
+  useScreenHeight,
+  useScreenDimensions,
+  FALLBACK_SCREEN_WIDTH,
+  FALLBACK_SCREEN_HEIGHT,
+} from './useScreenDimensions';

package/src/responsive/useScreenDimensions.ts

@@ -0,0 +1,44 @@
+/**
+ * Screen dimension hooks — single source of truth for screen width/height.
+ *
+ * Always import from here instead of calling useWindowDimensions() inline
+ * or Dimensions.get() at module level (which is static and never updates).
+ */
+
+import { useWindowDimensions } from 'react-native';
+
+/** Fallback width used when the native bridge hasn't reported dimensions yet. */
+export const FALLBACK_SCREEN_WIDTH = 375;
+
+/** Fallback height used when the native bridge hasn't reported dimensions yet. */
+export const FALLBACK_SCREEN_HEIGHT = 812;
+
+/**
+ * Returns the current window width (reactive — updates on orientation change).
+ * Use inside React components / hooks instead of Dimensions.get("window").width.
+ */
+export function useScreenWidth(): number {
+  const { width } = useWindowDimensions();
+  return width > 0 ? width : FALLBACK_SCREEN_WIDTH;
+}
+
+/**
+ * Returns the current window height (reactive — updates on orientation change).
+ * Use inside React components / hooks instead of Dimensions.get("window").height.
+ */
+export function useScreenHeight(): number {
+  const { height } = useWindowDimensions();
+  return height > 0 ? height : FALLBACK_SCREEN_HEIGHT;
+}
+
+/**
+ * Returns both width and height (reactive).
+ * Convenience wrapper for components that need both dimensions.
+ */
+export function useScreenDimensions(): { width: number; height: number } {
+  const { width, height } = useWindowDimensions();
+  return {
+    width: width > 0 ? width : FALLBACK_SCREEN_WIDTH,
+    height: height > 0 ? height : FALLBACK_SCREEN_HEIGHT,
+  };
+}