@umituz/react-native-design-system 4.25.88 → 4.25.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.88",
+  "version": "4.25.90",
   "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": "./dist/index.d.ts",

package/src/responsive/compute/computeResponsivePositioning.ts

@@ -28,7 +28,8 @@ export interface ComputedResponsivePositioning {
 }
 
 export const computeResponsivePositioning = (
-  insets: { top: number; bottom: number; left: number; right: number }
+  insets: { top: number; bottom: number; left: number; right: number },
+  dimensions?: { width: number; height: number }
 ): ComputedResponsivePositioning => ({
   horizontalPadding: getResponsiveHorizontalPadding(undefined, insets),
   verticalPadding: getResponsiveVerticalPadding(insets),
@@ -36,7 +37,7 @@ export const computeResponsivePositioning = (
   fabPosition: getResponsiveFABPosition(insets),
   screenLayoutConfig: getScreenLayoutConfig(insets),
   tabBarConfig: getResponsiveTabBarConfig(insets),
-  modalLayout: getResponsiveModalLayout(),
-  bottomSheetLayout: getResponsiveBottomSheetLayout(),
-  dialogLayout: getResponsiveDialogLayout(),
+  modalLayout: getResponsiveModalLayout(dimensions),
+  bottomSheetLayout: getResponsiveBottomSheetLayout(dimensions),
+  dialogLayout: getResponsiveDialogLayout(dimensions),
 });

package/src/responsive/responsiveModal.ts

@@ -70,9 +70,9 @@ export const getResponsiveMinModalHeight = (dimensions?: { height: number }): nu
   }
 };
 
-export const getResponsiveModalWidth = (): number => {
+export const getResponsiveModalWidth = (dimensions?: { width: number }): number => {
   try {
-    const { width } = getScreenDimensions();
+    const { width } = dimensions || getScreenDimensions();
     const isTabletDevice = isTablet();
 
     const widthPercent = isTabletDevice
@@ -89,9 +89,9 @@ export const getResponsiveModalWidth = (): number => {
   }
 };
 
-export const getResponsiveModalHeight = (): number => {
+export const getResponsiveModalHeight = (dimensions?: { height: number }): number => {
   try {
-    const { height } = getScreenDimensions();
+    const { height } = dimensions || getScreenDimensions();
     const isTabletDevice = isTablet();
 
     if (isTabletDevice) {
@@ -136,12 +136,12 @@ export const getResponsiveBackdropOpacity = (): number => {
   return MODAL_CONFIG.BACKDROP_OPACITY_DEFAULT;
 };
 
-export const getResponsiveModalLayout = (): ResponsiveModalLayout => {
+export const getResponsiveModalLayout = (dimensions?: { width: number; height: number }): ResponsiveModalLayout => {
   const isTabletDevice = isTablet();
 
   return {
-    width: getResponsiveModalWidth(),
-    height: getResponsiveModalHeight(),
+    width: getResponsiveModalWidth(dimensions),
+    height: getResponsiveModalHeight(dimensions),
     maxWidth: getResponsiveModalMaxWidth(),
     borderRadius: getResponsiveModalBorderRadius(),
     backdropOpacity: getResponsiveBackdropOpacity(),
@@ -151,8 +151,8 @@ export const getResponsiveModalLayout = (): ResponsiveModalLayout => {
   };
 };
 
-export const getResponsiveBottomSheetLayout = (): ResponsiveBottomSheetLayout => {
-  const { height } = getScreenDimensions();
+export const getResponsiveBottomSheetLayout = (dimensions?: { width: number; height: number }): ResponsiveBottomSheetLayout => {
+  const { height } = dimensions || getScreenDimensions();
 
   return {
     minHeight: MODAL_CONFIG.BOTTOM_SHEET_MIN_HEIGHT,
@@ -161,8 +161,8 @@ export const getResponsiveBottomSheetLayout = (): ResponsiveBottomSheetLayout =>
   };
 };
 
-export const getResponsiveDialogLayout = (): ResponsiveDialogLayout => {
-  const { width, height } = getScreenDimensions();
+export const getResponsiveDialogLayout = (dimensions?: { width: number; height: number }): ResponsiveDialogLayout => {
+  const { width, height } = dimensions || getScreenDimensions();
 
   return {
     width: Math.min(

package/src/responsive/useResponsive.ts

@@ -59,7 +59,7 @@ export const useResponsive = (): UseResponsiveReturn => {
       const dimensions = { width, height };
       const deviceInfo = computeDeviceInfo(dimensions);
       const sizes = computeResponsiveSizes(dimensions);
-      const positioning = computeResponsivePositioning(insets);
+      const positioning = computeResponsivePositioning(insets, dimensions);
       const onboarding = computeOnboardingSizes(deviceInfo);
       const iPadLayout = deviceInfo.isTabletDevice ? getIPadLayoutInfo() : null;
 

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -46,7 +46,8 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   iconNames,
 }) => {
   const [isInitialized, setIsInitialized] = useState(false);
-  const [fontsLoaded, fontError] = useFonts(fonts ?? EMPTY_FONTS);
+  const hasCustomFonts = fonts != null && Object.keys(fonts).length > 0;
+  const [fontsLoaded, fontError] = useFonts(hasCustomFonts ? fonts : EMPTY_FONTS);
 
   const initialize = useTheme((state) => state.initialize);
   const setCustomColors = useTheme((state) => state.setCustomColors);
@@ -75,14 +76,26 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     setDefaultThemeMode(initialThemeMode);
     setGlobalThemeMode(initialThemeMode);
 
+    // Safety timeout: if initialization takes too long, proceed anyway
+    const safetyTimer = setTimeout(() => {
+      setIsInitialized((prev) => {
+        if (!prev) onError?.(new Error('DesignSystemProvider initialization timed out'));
+        return true;
+      });
+    }, 5000);
+
     initialize()
       .then(() => {
+        clearTimeout(safetyTimer);
         setIsInitialized(true);
       })
       .catch((error) => {
+        clearTimeout(safetyTimer);
         setIsInitialized(true);
         onError?.(error);
       });
+
+    return () => clearTimeout(safetyTimer);
   }, [
     customColors,
     initialThemeMode,
@@ -95,11 +108,14 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     setGlobalThemeMode,
   ]);
 
+  // Skip font loading gate when no custom fonts are provided
+  const effectiveFontsLoaded = hasCustomFonts ? fontsLoaded : true;
+
   useEffect(() => {
-    if (isInitialized && fontsLoaded) {
+    if (isInitialized && effectiveFontsLoaded) {
       onInitialized?.();
     }
-  }, [isInitialized, fontsLoaded, onInitialized]);
+  }, [isInitialized, effectiveFontsLoaded, onInitialized]);
 
   useEffect(() => {
     if (fontError) {
@@ -107,7 +123,7 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     }
   }, [fontError, onError]);
 
-  const isLoading = showLoadingIndicator && (!isInitialized || !fontsLoaded);
+  const isLoading = showLoadingIndicator && (!isInitialized || !effectiveFontsLoaded);
 
   let content: ReactNode;
 
@@ -149,6 +165,6 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#000000',
+    backgroundColor: '#FFFFFF',
   },
 });