@umituz/react-native-design-system 4.27.15 → 4.27.17

package/src/infinite-scroll/presentation/hooks/useInfiniteScroll.ts

@@ -67,33 +67,6 @@ export function useInfiniteScroll<T>(
     abortControllerRef.current = new AbortController();
   }, []);
 
-  const loadInitial = useCallback(async () => {
-    if (isLoadingRef.current) return;
-    isLoadingRef.current = true;
-    cancelPendingRequests();
-
-    if (isMountedRef.current) setState((prev) => ({ ...prev, isLoading: true, error: null }));
-
-    try {
-      const newState = await retryWithBackoff(
-        () => loadData(config, initialPage, pageSize, totalItems),
-        maxRetries,
-        retryDelay,
-      );
-
-      if (isMountedRef.current) {
-        setState(newState);
-      }
-    } catch (error) {
-      if (isMountedRef.current) {
-        const errorMessage = error instanceof Error ? error.message : "Failed to load data";
-        setState((prev) => ({ ...prev, isLoading: false, error: errorMessage }));
-      }
-    } finally {
-      isLoadingRef.current = false;
-    }
-  }, [config, initialPage, pageSize, totalItems, maxRetries, retryDelay, cancelPendingRequests]);
-
   const loadMore = useCallback(async () => {
     // Get fresh state from ref to avoid stale closure
     const currentState = stateRef.current;
@@ -165,8 +138,38 @@ export function useInfiniteScroll<T>(
   }, [initialPage, totalItems, cancelPendingRequests]);
 
   useEffect(() => {
-    if (autoLoad) loadInitial();
-  }, [autoLoad, loadInitial]);
+    if (autoLoad) {
+      const initialize = async () => {
+        if (isLoadingRef.current) return;
+
+        isLoadingRef.current = true;
+        cancelPendingRequests();
+
+        if (isMountedRef.current) setState((prev) => ({ ...prev, isLoading: true, error: null }));
+
+        try {
+          const newState = await retryWithBackoff(
+            () => loadData(config, initialPage, pageSize, totalItems),
+            maxRetries,
+            retryDelay,
+          );
+
+          if (isMountedRef.current) {
+            setState(newState);
+          }
+        } catch (error) {
+          if (isMountedRef.current) {
+            const errorMessage = error instanceof Error ? error.message : "Failed to load data";
+            setState((prev) => ({ ...prev, isLoading: false, error: errorMessage }));
+          }
+        } finally {
+          isLoadingRef.current = false;
+        }
+      };
+      initialize();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoLoad]);
 
   const canLoadMore = state.hasMore && !state.isLoadingMore && !state.isLoading;
 

package/src/media/domain/strategies/CameraPickerStrategy.ts

@@ -32,8 +32,10 @@ export class CameraPickerStrategy implements PickerStrategy {
   }
 
   async launch(options: LaunchOptions): Promise<any> {
-    const mediaTypes =
-      this.config.mediaType === 'videos' ? ['videos'] : ['images'];
+    const mediaTypes: ImagePicker.MediaTypeOptions =
+      this.config.mediaType === 'videos'
+        ? ImagePicker.MediaTypeOptions.Videos
+        : ImagePicker.MediaTypeOptions.Images;
 
     const launchOptions: ImagePicker.ImagePickerOptions = {
       mediaTypes,
@@ -52,12 +54,6 @@ export class CameraPickerStrategy implements PickerStrategy {
       if (options.videoMaxDuration !== undefined) {
         launchOptions.videoMaxDuration = options.videoMaxDuration;
       }
-      if (options.videoMaxBitrate !== undefined) {
-        launchOptions.videoMaxBitrate = options.videoMaxBitrate;
-      }
-      if (options.videoQuality) {
-        launchOptions.videoQuality = options.videoQuality;
-      }
     }
 
     return ImagePicker.launchCameraAsync(launchOptions);

package/src/media/domain/strategies/index.ts

@@ -4,7 +4,7 @@
  * Strategy pattern implementations for different picker types.
  */
 
-export { PickerStrategy } from './PickerStrategy';
+export type { PickerStrategy } from './PickerStrategy';
 export type { LaunchOptions, PickerLaunchResult } from './PickerStrategy';
 
 export { CameraPickerStrategy } from './CameraPickerStrategy';

package/src/media/infrastructure/services/MediaPickerService.ts

@@ -16,9 +16,8 @@ import type {
 import {
   MediaType,
   MediaValidationError,
-  MEDIA_CONSTANTS,
 } from '../../domain/entities/Media';
-import { mapPickerResult } from '../utils/mediaPickerMappers';
+import { mapPickerResultFromStrategy } from '../utils/mediaPickerMappers';
 import { PermissionManager } from '../utils/PermissionManager';
 import { FileValidator } from '../../domain/utils/FileValidator';
 import { ErrorHandler } from '../../../utils/errors';
@@ -62,8 +61,8 @@ export class MediaPickerService {
     }
 
     try {
-      const result = await strategy.launch(options ?? {});
-      return mapPickerResult(result);
+      const pickerResult = await strategy.launch(options ?? {});
+      return mapPickerResultFromStrategy(pickerResult);
     } catch (error) {
       ErrorHandler.handleAndLog(error, 'launchMediaPicker', {
         strategy: strategy.name,
@@ -178,14 +177,4 @@ export class MediaPickerService {
       mediaTypes: MediaType.ALL,
     });
   }
-
-  /**
-   * Legacy method for backward compatibility
-   * @deprecated Use pickSingleImage instead
-   */
-  static async pickImage(
-    options?: MediaPickerOptions
-  ): Promise<MediaPickerResult> {
-    return this.pickFromLibrary(options);
-  }
 }

package/src/media/infrastructure/utils/mediaPickerMappers.ts

@@ -15,15 +15,13 @@ import {
  * Map expo-image-picker permission status to MediaLibraryPermission
  */
 export const mapPermissionStatus = (
-  status: ImagePicker.PermissionStatus
+  status: string
 ): MediaLibraryPermission => {
   switch (status) {
-    case ImagePicker.PermissionStatus.GRANTED:
+    case 'granted':
       return MediaLibraryPermission.GRANTED;
-    case ImagePicker.PermissionStatus.DENIED:
-      return MediaLibraryPermission.DENIED;
-    case ImagePicker.PermissionStatus.UNDETERMINED:
-      return MediaLibraryPermission.DENIED;
+    case 'denied':
+    case 'undetermined':
     default:
       return MediaLibraryPermission.DENIED;
   }
@@ -74,3 +72,28 @@ export const mapPickerResult = (
     assets,
   };
 };
+
+/**
+ * Map PickerStrategy result to MediaPickerResult
+ */
+export const mapPickerResultFromStrategy = (
+  result: { canceled: boolean; assets?: Array<{ uri: string; width?: number; height?: number; type?: 'image' | 'video'; duration?: number; fileSize?: number }> }
+): MediaPickerResult => {
+  if (result.canceled) {
+    return { canceled: true };
+  }
+
+  const assets: MediaAsset[] = (result.assets ?? []).map((asset) => ({
+    uri: asset.uri,
+    width: asset.width ?? 0,
+    height: asset.height ?? 0,
+    type: asset.type === 'video' ? MediaType.VIDEO : MediaType.IMAGE,
+    fileSize: asset.fileSize,
+    duration: asset.duration,
+  }));
+
+  return {
+    canceled: false,
+    assets,
+  };
+};

package/src/molecules/avatar/AvatarGroup.tsx

@@ -5,7 +5,7 @@
  * Shows overflow count when exceeding max visible avatars.
  */
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { AtomicText } from '../../atoms';
@@ -40,7 +40,96 @@ export interface AvatarGroupProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export const AvatarGroup: React.FC<AvatarGroupProps> = ({
+// Memoized individual avatar item
+const AvatarItem = React.memo<{
+  item: AvatarGroupItem;
+  index: number;
+  size: AvatarSize;
+  shape: AvatarShape;
+  spacing: number;
+  avatarStyle: any;
+}>(({ item, index, size, shape, spacing, avatarStyle }) => {
+  const wrapperStyle = useMemo(
+    () => [
+      styles.avatarWrapper,
+      index > 0 && { marginLeft: spacing },
+    ],
+    [index, spacing]
+  );
+
+  return (
+    <View style={wrapperStyle}>
+      <Avatar
+        uri={item.uri}
+        name={item.name}
+        icon={item.icon}
+        size={size}
+        shape={shape}
+        style={avatarStyle}
+      />
+    </View>
+  );
+});
+
+// Memoized overflow badge
+const OverflowBadge = React.memo<{
+  count: number;
+  spacing: number;
+  config: any;
+  shape: AvatarShape;
+  surfaceSecondary: string;
+  onBackground: string;
+  textSecondary: string;
+}>(({ count, spacing, config, shape, surfaceSecondary, onBackground, textSecondary }) => {
+  const wrapperStyle = useMemo(
+    () => [
+      styles.avatarWrapper,
+      { marginLeft: spacing },
+    ],
+    [spacing]
+  );
+
+  const badgeStyle = useMemo(
+    () => [
+      styles.overflow,
+      {
+        width: config.size,
+        height: config.size,
+        borderRadius: shape === 'circle' ? config.size / 2 : shape === 'rounded' ? 8 : 0,
+        backgroundColor: surfaceSecondary,
+        borderWidth: 2,
+        borderColor: onBackground,
+      },
+    ],
+    [config.size, shape, surfaceSecondary, onBackground]
+  );
+
+  const textStyle = useMemo(
+    () => [
+      styles.overflowText,
+      {
+        fontSize: config.fontSize,
+        color: textSecondary,
+      },
+    ],
+    [config.fontSize, textSecondary]
+  );
+
+  return (
+    <View style={wrapperStyle}>
+      <View style={badgeStyle}>
+        <AtomicText
+          type="bodySmall"
+          style={textStyle}
+        >
+          +{count}
+        </AtomicText>
+      </View>
+    </View>
+  );
+});
+
+export const AvatarGroup: React.FC<AvatarGroupProps> = React.memo(({
   items,
   maxVisible = AVATAR_CONSTANTS.MAX_GROUP_VISIBLE,
   size = AVATAR_CONSTANTS.DEFAULT_SIZE,
@@ -51,76 +140,62 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
   const tokens = useAppDesignTokens();
   const config = SIZE_CONFIGS[size];
 
-  // Calculate visible avatars and overflow count
-  const visibleItems = items.slice(0, maxVisible);
-  const overflowCount = items.length - maxVisible;
-  const hasOverflow = overflowCount > 0;
+  // Memoize calculations to prevent recalculation on every render
+  const { visibleItems, overflowCount, hasOverflow } = useMemo(() => {
+    const visItems = items.slice(0, maxVisible);
+    const overflow = items.length - maxVisible;
+    return {
+      visibleItems: visItems,
+      overflowCount: overflow,
+      hasOverflow: overflow > 0,
+    };
+  }, [items, maxVisible]);
+
+  // Memoize avatar style
+  const avatarStyle = useMemo(
+    () => [
+      styles.avatar,
+      {
+        borderWidth: 2,
+        borderColor: tokens.colors.onBackground,
+      },
+    ],
+    [tokens.colors.onBackground]
+  );
+
+  // Stable key extractor
+  const keyExtractor = useCallback((item: AvatarGroupItem, index: number) => {
+    return item.uri || item.name || item.icon || `avatar-${index}`;
+  }, []);
 
   return (
     <View style={[styles.container, style]}>
       {visibleItems.map((item, index) => (
-        <View
-          key={item.uri || item.name || item.icon || `avatar-${index}`}
-          style={[
-            styles.avatarWrapper,
-            index > 0 && { marginLeft: spacing },
-          ]}
-        >
-          <Avatar
-            uri={item.uri}
-            name={item.name}
-            icon={item.icon}
-            size={size}
-            shape={shape}
-            style={[
-              styles.avatar,
-              {
-                borderWidth: 2,
-                borderColor: tokens.colors.onBackground,
-              },
-            ]}
-          />
-        </View>
+        <AvatarItem
+          key={keyExtractor(item, index)}
+          item={item}
+          index={index}
+          size={size}
+          shape={shape}
+          spacing={spacing}
+          avatarStyle={avatarStyle}
+        />
       ))}
 
       {hasOverflow && (
-        <View
-          style={[
-            styles.avatarWrapper,
-            { marginLeft: spacing },
-          ]}
-        >
-          <View
-            style={[
-              styles.overflow,
-              {
-                width: config.size,
-                height: config.size,
-                borderRadius: shape === 'circle' ? config.size / 2 : shape === 'rounded' ? 8 : 0,
-                backgroundColor: tokens.colors.surfaceSecondary,
-                borderWidth: 2,
-                borderColor: tokens.colors.onBackground,
-              },
-            ]}
-          >
-            <AtomicText
-              type="bodySmall"
-              style={[
-                styles.overflowText,
-                {
-                  fontSize: config.fontSize,
-                  color: tokens.colors.textSecondary,
-                },
-              ]}
-            >
-              +{overflowCount}
-            </AtomicText>
-          </View>
-        </View>
+        <OverflowBadge
+          count={overflowCount}
+          spacing={spacing}
+          config={config}
+          shape={shape}
+          surfaceSecondary={tokens.colors.surfaceSecondary}
+          onBackground={tokens.colors.onBackground}
+          textSecondary={tokens.colors.textSecondary}
+        />
       )}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {

package/src/molecules/filter-group/FilterGroup.tsx

@@ -1,11 +1,11 @@
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 import { AtomicChip } from '../../atoms/chip/AtomicChip';
 import { useAppDesignTokens } from '../../theme';
 import type { FilterGroupProps } from './types';
 
-export function FilterGroup<T = string>({
+export const FilterGroup = React.memo(function FilterGroup<T = string>({
   items,
   selectedValue,
   onSelect,
@@ -29,6 +29,33 @@ export function FilterGroup<T = string>({
     },
   }), [tokens.spacing.md]);
 
+  // Memoize selected items to prevent unnecessary re-renders
+  const selectedSet = useMemo(() => {
+    if (multiSelect && Array.isArray(selectedValue)) {
+      return new Set(selectedValue);
+    }
+    return new Set(selectedValue !== undefined ? [selectedValue] : []);
+  }, [selectedValue, multiSelect]);
+
+  // Memoize isSelected calculation for each item
+  const isSelected = useCallback((value: any) => selectedSet.has(value), [selectedSet]);
+
+  // Memoized chip renderer
+  const renderChip = useCallback((item: any) => (
+    <AtomicChip
+      key={String(item.value)}
+      variant={isSelected(item.value) ? 'filled' : 'outlined'}
+      color={isSelected(item.value) ? 'primary' : 'secondary'}
+      selected={isSelected(item.value)}
+      onPress={() => onSelect(item.value)}
+      clickable
+      style={[styles.item, itemStyle]}
+      testID={item.testID}
+    >
+      {item.label}
+    </AtomicChip>
+  ), [isSelected, onSelect, styles.item, itemStyle]);
+
   return (
     <ScrollView
       horizontal
@@ -37,25 +64,7 @@ export function FilterGroup<T = string>({
       style={[styles.container, style]}
       contentContainerStyle={[styles.content, contentContainerStyle]}
     >
-      {items.map((item) => {
-        const isSelected = multiSelect
-          ? Array.isArray(selectedValue) && selectedValue.includes(item.value)
-          : item.value === selectedValue;
-        return (
-          <AtomicChip
-            key={`${item.value}`}
-            variant={isSelected ? 'filled' : 'outlined'}
-            color={isSelected ? 'primary' : 'secondary'}
-            selected={isSelected}
-            onPress={() => onSelect(item.value)}
-            clickable
-            style={[styles.item, itemStyle]}
-            testID={item.testID}
-          >
-            {item.label}
-          </AtomicChip>
-        );
-      })}
+      {items.map(renderChip)}
     </ScrollView>
   );
-}
+});

package/src/molecules/icon-grid/IconGrid.tsx

@@ -14,6 +14,7 @@ import {
   type LayoutChangeEvent,
   type StyleProp,
   type ViewStyle,
+  FlatList,
 } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { AtomicIcon } from '../../atoms';
@@ -53,6 +54,8 @@ const GridItem = React.memo<{
   borderLight: string;
   textPrimary: string;
 }>(({ item, itemWidth, cardBackground, borderLight, textPrimary }) => {
+  const { onPress: handlePress } = item;
+
   const cardStyle = useMemo(
     () => [styles.card, { width: itemWidth }],
     [itemWidth]
@@ -74,7 +77,7 @@ const GridItem = React.memo<{
   return (
     <TouchableOpacity
       activeOpacity={0.7}
-      onPress={item.onPress}
+      onPress={handlePress}
       style={cardStyle}
     >
       <View style={iconBoxStyle}>
@@ -133,28 +136,57 @@ export const IconGrid = React.memo<IconGridProps>(({
     [gap, rowGap, style]
   );
 
-  const placeholderStyle = useMemo(
-    () => ({ width: 0, height: 0 }),
-    []
-  );
+  // Memoize color props to prevent unnecessary GridItem re-renders
+  const colorProps = useMemo(() => ({
+    cardBackground,
+    borderLight,
+    textPrimary,
+  }), [cardBackground, borderLight, textPrimary]);
+
+  // Stable renderItem with memoization
+  const renderItem = useCallback(({ item }: { item: IconGridItem }) => {
+    if (itemWidth === 0) {
+      return <View key={item.id} style={{ width: 0, height: 0 }} />;
+    }
+
+    return (
+      <GridItem
+        item={item}
+        itemWidth={itemWidth}
+        {...colorProps}
+      />
+    );
+  }, [itemWidth, colorProps]);
+
+  const keyExtractor = useCallback((item: IconGridItem) => item.id, []);
+
+  const getItemLayout = useCallback((_?: unknown, index?: number) => ({
+    length: itemWidth,
+    offset: itemWidth * (index || 0),
+    index: index || 0,
+  }), [itemWidth]);
+
+  if (itemWidth === 0) {
+    return (
+      <View style={gridStyle} onLayout={handleLayout}>
+        {items.map((item) => (
+          <View key={item.id} style={{ width: 0, height: 0 }} />
+        ))}
+      </View>
+    );
+  }
 
   return (
     <View style={gridStyle} onLayout={handleLayout}>
-      {items.map((item) =>
-        itemWidth > 0 ? (
-          <GridItem
-            key={item.id}
-            item={item}
-            itemWidth={itemWidth}
-            cardBackground={cardBackground}
-            borderLight={borderLight}
-            textPrimary={textPrimary}
-          />
-        ) : (
-          // Placeholder — keeps grid stable before first layout measurement
-          <View key={item.id} style={placeholderStyle} />
-        ),
-      )}
+      <FlatList
+        data={items}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        getItemLayout={getItemLayout}
+        numColumns={columns}
+        scrollEnabled={false}
+        contentContainerStyle={gridStyle}
+      />
     </View>
   );
 });

package/src/molecules/swipe-actions/domain/entities/SwipeAction.ts

@@ -69,7 +69,6 @@ export const DEFAULT_SWIPE_CONFIG: Required<Omit<SwipeableConfig, 'leftActions'
   friction: 2,
 };
 
-// Re-export utilities for backward compatibility
 export {
   ACTION_PRESETS,
   getPreset,

package/src/offline/index.ts

@@ -17,7 +17,7 @@ export { useOfflineStore } from './infrastructure/storage/OfflineStore';
 export { useOfflineConfigStore } from './infrastructure/storage/OfflineConfigStore';
 
 // Hooks
-export { useOffline, configureOffline } from './presentation/hooks/useOffline';
+export { useOffline } from './presentation/hooks/useOffline';
 export { useOfflineState } from './presentation/hooks/useOfflineState';
 export { useOfflineWithMutations } from './presentation/hooks/useOfflineWithMutations';
 

package/src/offline/presentation/hooks/useOffline.ts

@@ -38,14 +38,6 @@ const toNetworkState = (state: ExpoNetworkState): NetworkState => ({
   details: null,
 });
 
-/**
- * Configure offline settings globally
- * This is a facade over the config store for backward compatibility
- */
-export const configureOffline = (config: OfflineConfig): void => {
-  useOfflineConfigStore.getState().setConfig(config);
-};
-
 export const useOffline = (config?: OfflineConfig) => {
   const store = useOfflineStore();
   const globalConfig = useOfflineConfigStore((state) => state.config);