@umituz/react-native-design-system 2.3.27 → 2.3.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.27",
+  "version": "2.3.29",
   "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",
@@ -116,6 +116,7 @@
     "expo-clipboard": "~8.0.7",
     "expo-crypto": "~14.0.0",
     "expo-device": "~7.0.2",
+    "expo-file-system": "^19.0.21",
     "expo-haptics": "~14.0.0",
     "expo-localization": "~16.0.1",
     "expo-sharing": "~14.0.8",
@@ -138,4 +139,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/atoms/picker/components/PickerChips.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, GestureResponderEvent } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { PickerOption } from '../types';
 import { AtomicIcon } from '../../AtomicIcon';
@@ -41,7 +41,7 @@ export const PickerChips: React.FC<PickerChipsProps> = React.memo(({
         <View key={opt.value} style={chipStyles}>
           <AtomicText style={chipTextStyles}>{opt.label}</AtomicText>
           <TouchableOpacity
-            onPress={(e) => {
+            onPress={(e: GestureResponderEvent) => {
               e.stopPropagation();
               onRemoveChip(opt.value);
             }}

package/src/atoms/picker/components/PickerModal.tsx

@@ -191,7 +191,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
           {filteredOptions.length > 0 ? (
             <FlatList
               data={filteredOptions}
-              keyExtractor={(item) => item.value}
+              keyExtractor={(item: PickerOption) => item.value}
               renderItem={renderOption}
               showsVerticalScrollIndicator
               testID={`${testID}-list`}

package/src/molecules/SearchBar/SearchBar.tsx

@@ -10,7 +10,7 @@ import { useAppDesignTokens } from '../../theme';
 import { AtomicIcon } from '../../atoms/AtomicIcon';
 import type { SearchBarProps } from './types';
 
-export const SearchBar = forwardRef<TextInput, SearchBarProps>(({
+export const SearchBar = forwardRef<React.ComponentRef<typeof TextInput>, SearchBarProps>(({
     value,
     onChangeText,
     onSubmit,

package/src/molecules/animation/presentation/hooks/useIconAnimations.ts

@@ -94,6 +94,7 @@ export function useElementAnimations(
       transform.scale.value = 1;
       transform.rotate.value = 0;
     }
+    return undefined;
   }, [visible, isReanimatedReady, animationConfig, transform]);
 
   const elementStyle = useAnimatedStyle(() => ({

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { View, StyleSheet, ScrollView, Modal, Pressable } from "react-native";
+import { View, StyleSheet, ScrollView, Modal, Pressable, GestureResponderEvent } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AtomicButton } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme';
@@ -46,7 +46,7 @@ export const FilterSheet: React.FC<FilterSheetProps> = ({
       <Pressable style={styles.backdrop} onPress={onClose}>
         <Pressable
           style={[styles.sheet, { backgroundColor: tokens.colors.surface, paddingBottom: insets.bottom }]}
-          onPress={(e) => e.stopPropagation()}
+          onPress={(e: GestureResponderEvent) => e.stopPropagation()}
         >
           <View style={[styles.handle, { backgroundColor: tokens.colors.border }]} />
 

package/src/molecules/celebration/presentation/components/CelebrationModal.tsx

@@ -35,6 +35,9 @@ export interface CelebrationModalProps {
   }) => React.ReactNode;
 }
 
+// Access View through Animated namespace with type assertion for reanimated v3 compatibility
+const AnimatedView = (Animated as unknown as { View: React.ComponentType<{ style?: unknown; children?: React.ReactNode }> }).View;
+
 export const CelebrationModal: React.FC<CelebrationModalProps> = ({
   visible,
   config,
@@ -59,7 +62,7 @@ export const CelebrationModal: React.FC<CelebrationModalProps> = ({
         dismissOnBackdrop={true}
         testID="celebration-modal"
       >
-        <Animated.View style={modalStyle}>
+        <AnimatedView style={modalStyle}>
           {renderContent ? (
             renderContent({ config, onClose, iconStyle, modalStyle })
           ) : themeColors ? (
@@ -71,7 +74,7 @@ export const CelebrationModal: React.FC<CelebrationModalProps> = ({
               modalStyle={modalStyle}
             />
           ) : null}
-        </Animated.View>
+        </AnimatedView>
       </BaseModal>
     </>
   );

package/src/molecules/celebration/presentation/components/CelebrationModalContent.tsx

@@ -8,6 +8,9 @@ import type { ThemeColors } from "../../domain/entities/FireworksConfig";
 import type { useCelebrationModalAnimation } from "../hooks/useCelebrationModalAnimation";
 import { createCelebrationModalStyles } from "../styles/CelebrationModalStyles";
 
+// Access View through Animated namespace with type assertion for reanimated v3 compatibility
+const AnimatedView = (Animated as unknown as { View: React.ComponentType<{ style?: unknown; children?: React.ReactNode }> }).View;
+
 export interface CelebrationModalContentProps {
     config: CelebrationConfig;
     onClose: () => void;
@@ -30,7 +33,7 @@ export const CelebrationModalContent: React.FC<CelebrationModalContentProps> = (
     const primaryColor = themeColors?.primary || tokens.colors.primary;
 
     return (
-        <Animated.View
+        <AnimatedView
             style={[
                 styles.modal,
                 modalStyle,
@@ -45,11 +48,11 @@ export const CelebrationModalContent: React.FC<CelebrationModalContentProps> = (
                 },
             ]}
         >
-            <Animated.View style={[styles.iconContainer, iconStyle]}>
+            <AnimatedView style={[styles.iconContainer, iconStyle]}>
                 <View style={[styles.iconCircle, { backgroundColor: successColor }]}>
                     <AtomicIcon name="checkmark" size="xl" color="onPrimary" />
                 </View>
-            </Animated.View>
+            </AnimatedView>
 
             <AtomicText type="headlineSmall" style={[styles.title, { color: tokens.colors.onSurface }]}>
                 {config.title}
@@ -85,6 +88,6 @@ export const CelebrationModalContent: React.FC<CelebrationModalContentProps> = (
                     />
                 )}
             </View>
-        </Animated.View>
+        </AnimatedView>
     );
 };

package/src/types/react-native.d.ts

@@ -0,0 +1,21 @@
+import 'react-native';
+
+declare module 'react-native' {
+  import { FC } from 'react';
+  import { ViewProps as RNViewProps, TextProps as RNTextProps } from 'react-native';
+
+  export const View: FC<RNViewProps>;
+  export const Text: FC<RNTextProps>;
+  export const ScrollView: FC<any>;
+  export const FlatList: FC<any>;
+  export const TouchableOpacity: FC<any>;
+  export const TouchableHighlight: FC<any>;
+  export const Pressable: FC<any>;
+  export const TextInput: FC<any>;
+  export const Image: FC<any>;
+  export const ActivityIndicator: FC<any>;
+  export const Modal: FC<any>;
+  export const Switch: FC<any>;
+  export const KeyboardAvoidingView: FC<any>;
+  export const RefreshControl: FC<any>;
+}

package/src/utilities/sharing/infrastructure/services/SharingService.ts

@@ -9,7 +9,7 @@
  */
 
 import * as Sharing from 'expo-sharing';
-import * as FileSystem from 'expo-file-system/legacy';
+import * as FileSystem from 'expo-file-system/build/legacy';
 import type { ShareOptions, ShareResult } from '../../domain/entities/Share';
 import { SharingUtils } from '../../domain/entities/Share';