@umituz/react-native-design-system 2.9.68 → 2.9.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.9.68",
+  "version": "2.9.70",
   "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",
@@ -124,17 +124,22 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-native": "^5.0.0",
-    "expo-application": "~5.9.1",
-    "expo-clipboard": "~8.0.7",
-    "expo-crypto": "~14.0.8",
-    "expo-device": "~7.0.2",
-    "expo-file-system": "^19.0.21",
-    "expo-font": "~14.0.9",
-    "expo-haptics": "~14.0.8",
+    "expo-application": "~7.0.8",
+    "expo-clipboard": "~8.0.8",
+    "expo-constants": "~18.0.13",
+    "expo-crypto": "~15.0.8",
+    "expo-device": "~8.0.10",
+    "expo-file-system": "~19.0.21",
+    "expo-font": "~14.0.10",
+    "expo-haptics": "~15.0.8",
     "expo-image": "~3.0.11",
-    "expo-localization": "~17.0.7",
-    "expo-network": "~8.0.0",
-    "expo-secure-store": "~14.0.8",
+    "expo-image-manipulator": "~14.0.8",
+    "expo-image-picker": "~17.0.10",
+    "expo-localization": "~17.0.8",
+    "expo-media-library": "~18.2.1",
+    "expo-modules-core": "~3.0.29",
+    "expo-network": "~8.0.8",
+    "expo-secure-store": "~15.0.8",
     "expo-sharing": "~14.0.8",
     "expo-video": "~3.0.15",
     "i18next": "^25.0.0",

package/src/media/infrastructure/utils/file-media-utils.ts

@@ -3,7 +3,7 @@
  * Utilities for handling media files (base64, downloads, file operations)
  */
 
-import { File, Paths } from "expo-file-system/next";
+import { File as ExpoFile, Paths } from "expo-file-system/next";
 
 interface FileWithType {
   readonly type: string;
@@ -52,7 +52,7 @@ export const toDataUrl = (str: string): string => {
 export const saveBase64ToFile = async (base64Data: string): Promise<string> => {
   const timestamp = Date.now();
   const filename = `media_${timestamp}.jpg`;
-  const file = new File(Paths.cache, filename);
+  const file = new ExpoFile(Paths.cache, filename);
 
   const pureBase64 = base64Data.replace(/^data:image\/\w+;base64,/, "");
   const binaryString = atob(pureBase64);
@@ -72,7 +72,7 @@ export const downloadMediaToFile = async (url: string, isVideo: boolean): Promis
   const timestamp = Date.now();
   const extension = isVideo ? "mp4" : "jpg";
   const filename = `media_${timestamp}.${extension}`;
-  const file = new File(Paths.cache, filename);
+  const file = new ExpoFile(Paths.cache, filename);
 
   const response = await fetch(url);
   if (!response.ok) {

package/src/offline/presentation/components/OfflineBanner.tsx

@@ -2,6 +2,7 @@
  * OfflineBanner Component
  *
  * Displays a banner when the device is offline.
+ * Respects safe area insets for proper display on all devices.
  * Simple conditional rendering - NO animations per CLAUDE.md
  *
  * @example
@@ -22,7 +23,8 @@
 
 import React, { memo } from 'react';
 import { View, StyleSheet, type ViewStyle, type TextStyle } from 'react-native';
-import { AtomicText } from '../../../atoms';
+import { useSafeAreaInsets } from '../../../safe-area';
+import { AtomicText, AtomicIcon } from '../../../atoms';
 
 export interface OfflineBannerProps {
   /** Whether the banner is visible */
@@ -33,53 +35,58 @@ export interface OfflineBannerProps {
   backgroundColor?: string;
   /** Text color */
   textColor?: string;
-  /** Icon to display (emoji or custom element) */
-  icon?: string | React.ReactNode;
+  /** Icon name from design system icons */
+  iconName?: string;
   /** Position of the banner */
   position?: 'top' | 'bottom';
   /** Custom container style */
   style?: ViewStyle;
   /** Custom text style */
   textStyle?: TextStyle;
-  /** Height of the banner */
-  height?: number;
 }
 
-const DEFAULT_HEIGHT = 44;
+const CONTENT_HEIGHT = 44;
+const HORIZONTAL_PADDING = 16;
+const ICON_SIZE = 18;
 
 export const OfflineBanner: React.FC<OfflineBannerProps> = memo(({
   visible,
   message = 'No internet connection',
-  backgroundColor = '#FF6B6B',
+  backgroundColor = '#DC2626',
   textColor = '#FFFFFF',
-  icon = '📡',
+  iconName = 'wifi-off',
   position = 'top',
   style,
   textStyle,
-  height = DEFAULT_HEIGHT,
 }) => {
-  // Simple conditional rendering - no animations
+  const insets = useSafeAreaInsets();
+
   if (!visible) {
     return null;
   }
 
-  const positionStyle: ViewStyle = position === 'top' ? { top: 0 } : { bottom: 0 };
+  const isTop = position === 'top';
+  const safeAreaPadding = isTop ? insets.top : insets.bottom;
 
   return (
     <View
       style={[
         styles.container,
-        positionStyle,
-        { backgroundColor, height },
+        isTop ? styles.positionTop : styles.positionBottom,
+        {
+          backgroundColor,
+          paddingTop: isTop ? safeAreaPadding : 0,
+          paddingBottom: isTop ? 0 : safeAreaPadding,
+        },
         style,
       ]}
     >
       <View style={styles.content}>
-        {typeof icon === 'string' ? (
-          <AtomicText style={styles.icon}>{icon}</AtomicText>
-        ) : (
-          icon
-        )}
+        <AtomicIcon
+          name={iconName}
+          customSize={ICON_SIZE}
+          customColor={textColor}
+        />
         <AtomicText
           style={[styles.message, { color: textColor }, textStyle]}
           numberOfLines={1}
@@ -100,19 +107,22 @@ const styles = StyleSheet.create({
     right: 0,
     zIndex: 9999,
   },
+  positionTop: {
+    top: 0,
+  },
+  positionBottom: {
+    bottom: 0,
+  },
   content: {
-    flex: 1,
+    height: CONTENT_HEIGHT,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingHorizontal: 16,
+    paddingHorizontal: HORIZONTAL_PADDING,
     gap: 8,
   },
-  icon: {
-    fontSize: 16,
-  },
   message: {
     fontSize: 14,
-    fontWeight: '500',
+    fontWeight: '600',
   },
 });