@umituz/react-native-design-system 2.4.8 → 2.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.4.8",
+  "version": "2.4.10",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -53,9 +53,9 @@
     "@gorhom/bottom-sheet": ">=5.0.0",
     "@react-native-async-storage/async-storage": ">=2.0.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
-    "@react-navigation/bottom-tabs": ">=6.0.0",
-    "@react-navigation/native": ">=6.0.0",
-    "@react-navigation/stack": ">=6.0.0",
+    "@react-navigation/bottom-tabs": ">=7.0.0",
+    "@react-navigation/native": ">=7.0.0",
+    "@react-navigation/stack": ">=7.0.0",
     "@umituz/react-native-filesystem": "*",
     "@umituz/react-native-haptics": "*",
     "@umituz/react-native-localization": "*",
@@ -99,9 +99,9 @@
     "@gorhom/bottom-sheet": "^5.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
-    "@react-navigation/bottom-tabs": "^6.6.1",
-    "@react-navigation/native": "^6.0.0",
-    "@react-navigation/stack": "^6.4.1",
+    "@react-navigation/bottom-tabs": "^7.9.0",
+    "@react-navigation/native": "^7.1.26",
+    "@react-navigation/stack": "^7.6.13",
     "@testing-library/react": "^16.3.1",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -24,7 +24,7 @@
 
 import React, { useEffect } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import {
+import Animated, {
   useSharedValue,
   useAnimatedStyle,
   withRepeat,
@@ -32,11 +32,12 @@ import {
   withTiming,
   Easing,
 } from 'react-native-reanimated';
-import Animated from 'react-native-reanimated';
 import { useAppDesignTokens } from '../../theme';
 import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
 import { SKELETON_PATTERNS } from './AtomicSkeleton.types';
 
+const AnimatedView = (Animated as any).createAnimatedComponent(View);
+
 const SHIMMER_DURATION = 1200;
 
 export interface AtomicSkeletonProps {
@@ -90,7 +91,7 @@ const SkeletonItem: React.FC<{
   }));
 
   return (
-    <Animated.View
+    <AnimatedView
       style={[
         styles.skeleton,
         {

package/src/device/domain/entities/Device.ts

@@ -2,18 +2,22 @@
  * Device Domain - Core Entities
  *
  * This file defines core types and interfaces for device information.
- * Handles device details, app info using expo-device and expo-application.
+ * All types are self-contained - no external dependencies for types.
  *
  * @domain device
  * @layer domain/entities
  */
 
-import type * as DeviceModule from 'expo-device';
-
 /**
- * Re-export Device types from expo-device
+ * Device type enumeration (matches expo-device values)
  */
-export type DeviceType = DeviceModule.DeviceType;
+export enum DeviceType {
+  UNKNOWN = 0,
+  PHONE = 1,
+  TABLET = 2,
+  DESKTOP = 3,
+  TV = 4,
+}
 
 /**
  * Device information interface

package/src/device/infrastructure/services/ApplicationInfoService.ts

@@ -20,11 +20,14 @@ export class ApplicationInfoService {
    */
   static async getApplicationInfo(): Promise<ApplicationInfo> {
     try {
-      const [installTime, lastUpdateTime] = await Promise.all([
-        withTimeout(() => Application.getInstallationTimeAsync(), 1000),
-        withTimeout(() => Application.getLastUpdateTimeAsync(), 1000),
+      const [installTimeResult, lastUpdateTimeResult] = await Promise.all([
+        withTimeout<Date>(() => Application.getInstallationTimeAsync(), 1000),
+        withTimeout<Date>(() => Application.getLastUpdateTimeAsync(), 1000),
       ]);
 
+      const installTime: Date | null = installTimeResult ?? null;
+      const lastUpdateTime: Date | null = lastUpdateTimeResult ?? null;
+
       const applicationName = safeAccess(() => Application.applicationName, 'Unknown');
       const applicationId = safeAccess(() => Application.applicationId, 'Unknown');
       const nativeApplicationVersion = safeAccess(

package/src/device/infrastructure/services/DeviceCapabilityService.ts

@@ -5,10 +5,9 @@
  * Follows SOLID principles - only handles capability checks
  */
 
-import * as Device from 'expo-device';
 import { Platform } from 'react-native';
+import { DeviceType } from '../../domain/entities/Device';
 import { DeviceInfoService } from './DeviceInfoService';
-import { safeAccess } from '../utils/nativeModuleUtils';
 
 /**
  * Service for checking device capabilities
@@ -27,7 +26,7 @@ export class DeviceCapabilityService {
 
     return {
       isDevice: info.isDevice,
-      isTablet: info.deviceType === Device.DeviceType.TABLET,
+      isTablet: info.deviceType === DeviceType.TABLET,
       hasNotch: await this.hasNotch(),
       totalMemoryGB: info.totalMemory
         ? info.totalMemory / (1024 * 1024 * 1024)
@@ -44,7 +43,8 @@ export class DeviceCapabilityService {
         return false;
       }
 
-      const modelName = safeAccess(() => Device.modelName?.toLowerCase() || '', '');
+      const info = await DeviceInfoService.getDeviceInfo();
+      const modelName = info.modelName?.toLowerCase() ?? '';
 
       // iPhone X and newer (with notch or dynamic island)
       return (

package/src/device/infrastructure/services/DeviceInfoService.ts

@@ -21,10 +21,11 @@ export class DeviceInfoService {
    */
   static async getDeviceInfo(): Promise<DeviceInfo> {
     try {
-      const totalMemory = await withTimeout(
+      const totalMemoryResult = await withTimeout<number>(
         () => Device.getMaxMemoryAsync(),
         1000,
       );
+      const totalMemory: number | null = totalMemoryResult ?? null;
 
       const brand = safeAccess(() => Device.brand, null);
       const manufacturer = safeAccess(() => Device.manufacturer, null);

package/src/molecules/animation/presentation/components/Fireworks.tsx

@@ -11,6 +11,8 @@ import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
 import { useFireworks } from '../hooks/useFireworks';
 import type { FireworksConfig } from '../../domain/entities/Fireworks';
 
+const AnimatedView = (Animated as any).createAnimatedComponent(View);
+
 export interface FireworksProps extends FireworksConfig {
   /**
    * X position to trigger fireworks (0-1, relative to container width)
@@ -55,7 +57,7 @@ const Particle: React.FC<{
     opacity: withTiming(opacity, { duration: 100 }),
   }));
 
-  return <Animated.View style={animatedStyle} />;
+  return <AnimatedView style={animatedStyle} />;
 };
 
 /**

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -79,9 +79,7 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
   useImperativeHandle(ref, () => ({
     present: () => {
       if (__DEV__) {
-        // eslint-disable-next-line no-console
         console.log('[BottomSheetModal] present() called');
-        // eslint-disable-next-line no-console
         console.log('[BottomSheetModal] modalRef.current:', modalRef.current);
       }
       modalRef.current?.present();

package/src/molecules/navigation/StackNavigator.tsx

@@ -61,6 +61,7 @@ export function StackNavigator<T extends ParamListBase>({ config }: StackNavigat
 
     return (
         <Stack.Navigator
+            id={config.id}
             initialRouteName={config.initialRouteName as string}
             screenOptions={{
                 ...defaultScreenOptions,

package/src/molecules/navigation/TabsNavigator.tsx

@@ -80,6 +80,7 @@ export function TabsNavigator<T extends ParamListBase>({
 
     return (
         <Tab.Navigator
+            id={config.id}
             initialRouteName={config.initialRouteName as string}
             screenOptions={{
                 ...defaultScreenOptions,

package/src/molecules/navigation/types.ts

@@ -66,6 +66,8 @@ export interface StackScreen<T extends ParamListBase = ParamListBase>
 }
 
 export interface BaseNavigatorConfig<T extends ParamListBase = ParamListBase> {
+  /** Unique identifier for the navigator (required for React Navigation v7+) */
+  id?: string;
   screens: TabScreen[] | StackScreen[];
   initialRouteName?: Extract<keyof T, string>;
   getLabel?: (label: string) => string;

package/src/types/jsx.d.ts

@@ -0,0 +1,19 @@
+/**
+ * React 19 JSX Compatibility for React Native
+ * Fixes JSX namespace issues between React 19 and react-native
+ */
+
+import type { JSX as ReactJSX } from 'react';
+
+declare global {
+  namespace JSX {
+    interface Element extends ReactJSX.Element {}
+    interface ElementClass extends ReactJSX.ElementClass {}
+    interface ElementAttributesProperty extends ReactJSX.ElementAttributesProperty {}
+    interface ElementChildrenAttribute extends ReactJSX.ElementChildrenAttribute {}
+    interface IntrinsicAttributes extends ReactJSX.IntrinsicAttributes {}
+    interface IntrinsicClassAttributes<T> extends ReactJSX.IntrinsicClassAttributes<T> {}
+  }
+}
+
+export {};