@umituz/react-native-design-system 4.28.11 → 4.28.13

package/src/layouts/Grid/Grid.tsx

@@ -5,7 +5,7 @@
  * Uses design system responsive utilities
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useId } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useResponsive } from '../../responsive';
 import { useAppDesignTokens } from '../../theme';
@@ -28,6 +28,12 @@ export interface GridProps {
 
   /** Test ID for testing */
   testID?: string;
+
+  /** Accessibility label for the grid */
+  accessibilityLabel?: string;
+
+  /** Whether the grid is accessible */
+  accessible?: boolean;
 }
 
 /**
@@ -49,9 +55,12 @@ export const Grid: React.FC<GridProps> = ({
   gap,
   style,
   testID,
+  accessibilityLabel,
+  accessible,
 }) => {
   const { gridColumns, spacingMultiplier } = useResponsive();
   const tokens = useAppDesignTokens();
+  const generatedIdPrefix = useId();
 
   // Calculate responsive columns
   const columns = gridColumns || (mobileColumns && tabletColumns
@@ -82,12 +91,33 @@ export const Grid: React.FC<GridProps> = ({
   const childArray = React.Children.toArray(children);
 
   return (
-    <View style={[styles.container, style]} testID={testID}>
+    <View
+      style={[styles.container, style]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={"grid" as any}
+      accessible={accessible !== false}
+    >
       {childArray.map((child, index) => {
-        const key = (child as React.ReactElement).key || `grid-item-${index}`;
+        const childKey = (child as React.ReactElement).key;
+
+        // Warn in development if child is missing key
+        if (__DEV__ && !childKey) {
+          console.warn(
+            `[Grid] Child at index ${index} is missing a "key" prop. ` +
+            `This may cause issues with React reconciliation. ` +
+            `Please ensure all grid children have unique keys.`
+          );
+        }
+
+        const key = childKey || `${generatedIdPrefix}-grid-item-${index}`;
 
         return (
-          <View key={key} style={itemStyle}>
+          <View
+            key={key}
+            style={itemStyle}
+            accessibilityRole={"gridcell" as any}
+          >
             {child}
           </View>
         );

package/src/layouts/ScreenHeader/ScreenHeader.tsx

@@ -86,6 +86,10 @@ const ScreenHeaderBackButton: React.FC<{
         onPress={handleBackPress}
         hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         testID={`${testID}-back-button`}
+        accessibilityRole="button"
+        accessibilityLabel="Go back"
+        accessibilityState={{ disabled: !onBackPress }}
+        accessible
       >
         <AtomicIcon name={backIconName || 'arrow-back'} color={backIconColor} />
       </TouchableOpacity>

package/src/layouts/ScreenLayout/ScreenLayout.tsx

@@ -3,13 +3,34 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
+import { View, ScrollView, KeyboardAvoidingView, Platform, type StyleProp, type ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../../theme';
 import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
 import { getScreenLayoutStyles } from './styles/screenLayoutStyles';
 import type { ScreenLayoutProps } from './types';
 
+export interface ScreenLayoutProps {
+  children: React.ReactNode;
+  scrollable?: boolean;
+  edges?: ('top' | 'bottom' | 'left' | 'right')[];
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  backgroundColor?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  testID?: string;
+  hideScrollIndicator?: boolean;
+  keyboardAvoiding?: boolean;
+  keyboardVerticalOffset?: number;
+  maxWidth?: number;
+  fullWidth?: boolean;
+  refreshControl?: React.ReactElement;
+  accessibilityLabel?: string;
+  accessibilityRole?: 'window' | 'region' | 'section';
+  accessible?: boolean;
+}
+
 // Lazy-load react-native-keyboard-controller (optional peer dep).
 // Falls back to React Native's built-in components when not installed.
 let KCKeyboardAvoidingView: React.ComponentType<any> | null = null;
@@ -40,6 +61,9 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
     maxWidth,
     fullWidth = false,
     refreshControl,
+    accessibilityLabel,
+    accessibilityRole = 'region',
+    accessible,
   } = props;
 
   const tokens = useAppDesignTokens();
@@ -80,6 +104,9 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
           paddingRight,
         },
       ]}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      accessible={accessible !== false}
     >
       {header}
       {scrollable ? (
@@ -109,7 +136,13 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
   if (keyboardAvoiding) {
     const KAV = KCKeyboardAvoidingView ?? KeyboardAvoidingView;
     return (
-      <View style={[styles.container, { backgroundColor: bgColor }, containerStyle]} testID={testID}>
+      <View
+        style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole={accessibilityRole}
+        accessible={accessible !== false}
+      >
         <KAV
           style={styles.keyboardAvoidingView}
           behavior={Platform.OS === 'ios' ? 'padding' : undefined}
@@ -122,7 +155,13 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = (props: ScreenLayoutPro
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: bgColor }, containerStyle]} testID={testID}>
+    <View
+      style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      accessible={accessible !== false}
+    >
       <View style={styles.keyboardAvoidingView}>{content}</View>
     </View>
   );

package/src/molecules/SearchBar/SearchBar.tsx

@@ -12,7 +12,7 @@ import type { SearchBarProps } from './types';
 import { calculateResponsiveSize } from '../../responsive';
 import { MISC_SIZES } from '../../constants';
 
-export const SearchBar: React.FC<SearchBarProps> = ({
+export const SearchBar: React.FC<SearchBarProps> = React.memo(({
     value,
     onChangeText,
     onSubmit,
@@ -22,8 +22,8 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     placeholder = 'Search...',
     loading = false,
     disabled = false,
-    containerStyle,
-    inputStyle,
+    containerStyle: propContainerStyle,
+    inputStyle: propInputStyle,
     testID,
 }) => {
     const tokens = useAppDesignTokens();
@@ -42,19 +42,30 @@ export const SearchBar: React.FC<SearchBarProps> = ({
 
     const spacingMultiplier = tokens.spacingMultiplier;
 
+    const containerStyle = useMemo(() => [
+        styles.container,
+        {
+            backgroundColor: tokens.colors.surfaceVariant,
+            borderColor: tokens.colors.border,
+            height: calculateResponsiveSize(MISC_SIZES.searchInputHeight, spacingMultiplier),
+            paddingHorizontal: calculateResponsiveSize(tokens.spacing.md, spacingMultiplier),
+            borderRadius: calculateResponsiveSize(MISC_SIZES.searchBorderRadius, spacingMultiplier),
+        },
+        propContainerStyle,
+    ], [tokens.colors.surfaceVariant, tokens.colors.border, spacingMultiplier, propContainerStyle]);
+
+    const inputTextStyle = useMemo(() => [
+        styles.input,
+        {
+            color: tokens.colors.textPrimary,
+            fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+        },
+        propInputStyle,
+    ], [styles.input, tokens.colors.textPrimary, tokens.typography.bodyMedium.responsiveFontSize, propInputStyle]);
+
     return (
         <View
-            style={[
-                styles.container,
-                {
-                    backgroundColor: tokens.colors.surfaceVariant,
-                    borderColor: tokens.colors.border,
-                    height: calculateResponsiveSize(MISC_SIZES.searchInputHeight, spacingMultiplier),
-                    paddingHorizontal: calculateResponsiveSize(tokens.spacing.md, spacingMultiplier),
-                    borderRadius: calculateResponsiveSize(MISC_SIZES.searchBorderRadius, spacingMultiplier),
-                },
-                containerStyle,
-            ]}
+            style={containerStyle}
             testID={testID}
         >
             <View style={styles.searchIcon}>
@@ -77,14 +88,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                 returnKeyType="search"
                 autoCapitalize="none"
                 autoCorrect={false}
-                style={[
-                    styles.input,
-                    {
-                        color: tokens.colors.textPrimary,
-                        fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-                    },
-                    inputStyle,
-                ]}
+                style={inputTextStyle}
             />
 
             {(loading || showClear) && (
@@ -116,7 +120,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
             )}
         </View>
     );
-};
+});
 
 const styles = StyleSheet.create({
     container: {

package/src/molecules/action-footer/ActionFooter.tsx

@@ -58,38 +58,39 @@ export const ActionFooter = React.memo<ActionFooterProps>(({
   const tokens = useAppDesignTokens();
   const spacingMultiplier = tokens.spacingMultiplier;
 
-  const baseStyles = createStyles(spacingMultiplier);
-
   const themedStyles = useMemo(
-    () => ({
-      container: {
-        ...baseStyles.container,
-        paddingVertical: tokens.spacing.md,
-        gap: tokens.spacing.md,
-      },
-      backButton: {
-        ...baseStyles.backButton,
-        borderRadius: tokens.borders.radius.lg,
-        backgroundColor: tokens.colors.surface,
-        borderColor: tokens.colors.outlineVariant,
-      },
-      actionButton: {
-        ...baseStyles.actionButton,
-        borderRadius: tokens.borders.radius.lg,
-      },
-      actionContent: {
-        ...baseStyles.actionContent,
-        backgroundColor: tokens.colors.primary,
-        gap: tokens.spacing.sm,
-        paddingHorizontal: tokens.spacing.lg,
-      },
-      actionText: {
-        ...baseStyles.actionText,
-        color: tokens.colors.onPrimary,
-        fontSize: calculateResponsiveSize(18, spacingMultiplier),
-      },
-    }),
-    [baseStyles, tokens, spacingMultiplier],
+    () => {
+      const baseStyles = createStyles(spacingMultiplier);
+      return {
+        container: {
+          ...baseStyles.container,
+          paddingVertical: tokens.spacing.md,
+          gap: tokens.spacing.md,
+        },
+        backButton: {
+          ...baseStyles.backButton,
+          borderRadius: tokens.borders.radius.lg,
+          backgroundColor: tokens.colors.surface,
+          borderColor: tokens.colors.outlineVariant,
+        },
+        actionButton: {
+          ...baseStyles.actionButton,
+          borderRadius: tokens.borders.radius.lg,
+        },
+        actionContent: {
+          ...baseStyles.actionContent,
+          backgroundColor: tokens.colors.primary,
+          gap: tokens.spacing.sm,
+          paddingHorizontal: tokens.spacing.lg,
+        },
+        actionText: {
+          ...baseStyles.actionText,
+          color: tokens.colors.onPrimary,
+          fontSize: calculateResponsiveSize(18, spacingMultiplier),
+        },
+      };
+    },
+    [tokens, spacingMultiplier],
   );
 
   const handleBackPress = useCallback(() => {

package/src/molecules/alerts/AlertService.ts

@@ -7,6 +7,12 @@ import { Alert, AlertType, AlertMode, AlertOptions, AlertPosition } from './Aler
 import { useAlertStore } from './AlertStore';
 
 export class AlertService {
+    // Debouncing state
+    private static lastAlertTime = 0;
+    private static debounceDelay = 300; // ms
+    private static pendingAlertTimeout: ReturnType<typeof setTimeout> | null = null;
+    private static pendingAlert: { type: AlertType; mode: AlertMode; title: string; message?: string; options?: AlertOptions } | null = null;
+
     /**
      * Creates a base Alert object with defaults
      */
@@ -59,38 +65,71 @@ export class AlertService {
         return this.createAlert(AlertType.INFO, AlertMode.TOAST, title, message, options);
     }
 
+    /**
+     * Add alert with debouncing to prevent spam
+     */
+    private static addAlertDebounced(type: AlertType, mode: AlertMode, title: string, message?: string, options?: AlertOptions): string {
+        const now = Date.now();
+        const timeSinceLastAlert = now - this.lastAlertTime;
+
+        // Clear any pending alert
+        if (this.pendingAlertTimeout) {
+            clearTimeout(this.pendingAlertTimeout);
+            this.pendingAlertTimeout = null;
+        }
+
+        // If enough time has passed, show immediately
+        if (timeSinceLastAlert >= this.debounceDelay) {
+            const alert = this.createAlert(type, mode, title, message, options);
+            useAlertStore.getState().addAlert(alert);
+            this.lastAlertTime = now;
+            return alert.id;
+        }
+
+        // Otherwise, debounce and show the latest alert after delay
+        this.pendingAlert = { type, mode, title, message, options };
+        this.pendingAlertTimeout = setTimeout(() => {
+            if (this.pendingAlert) {
+                const alert = this.createAlert(
+                    this.pendingAlert.type,
+                    this.pendingAlert.mode,
+                    this.pendingAlert.title,
+                    this.pendingAlert.message,
+                    this.pendingAlert.options
+                );
+                useAlertStore.getState().addAlert(alert);
+                this.lastAlertTime = Date.now();
+                this.pendingAlert = null;
+                this.pendingAlertTimeout = null;
+            }
+        }, this.debounceDelay);
+
+        // Return a placeholder ID (the real alert will be shown after debounce)
+        return `pending-${Date.now()}`;
+    }
+
     /**
      * Convenience methods to show alerts directly from outside React components
      * These access the Zustand store directly without requiring hooks
      */
     static success(title: string, message?: string, options?: AlertOptions): string {
-        const alert = this.createSuccessAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
+        return this.addAlertDebounced(AlertType.SUCCESS, AlertMode.TOAST, title, message, options);
     }
 
     static error(title: string, message?: string, options?: AlertOptions): string {
-        const alert = this.createErrorAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
+        return this.addAlertDebounced(AlertType.ERROR, AlertMode.TOAST, title, message, options);
     }
 
     static warning(title: string, message?: string, options?: AlertOptions): string {
-        const alert = this.createWarningAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
+        return this.addAlertDebounced(AlertType.WARNING, AlertMode.TOAST, title, message, options);
     }
 
     static info(title: string, message?: string, options?: AlertOptions): string {
-        const alert = this.createInfoAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
+        return this.addAlertDebounced(AlertType.INFO, AlertMode.TOAST, title, message, options);
     }
 
     static show(type: AlertType, mode: AlertMode, title: string, message?: string, options?: AlertOptions): string {
-        const alert = this.createAlert(type, mode, title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
+        return this.addAlertDebounced(type, mode, title, message, options);
     }
 
     static dismiss(id: string): void {
@@ -98,6 +137,12 @@ export class AlertService {
     }
 
     static clear(): void {
+        // Clear any pending alert
+        if (this.pendingAlertTimeout) {
+            clearTimeout(this.pendingAlertTimeout);
+            this.pendingAlertTimeout = null;
+            this.pendingAlert = null;
+        }
         useAlertStore.getState().clearAlerts();
     }
 }

package/src/molecules/avatar/Avatar.tsx

@@ -48,7 +48,7 @@ const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
   icon,
   config,
   borderRadius,
-  imageStyle,
+  imageStyle: propImageStyle,
 }) => {
   const tokens = useAppDesignTokens();
 
@@ -59,8 +59,8 @@ const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
       height: config.size,
       borderRadius,
     },
-    imageStyle,
-  ], [config.size, borderRadius, imageStyle]);
+    propImageStyle,
+  ], [config.size, borderRadius, propImageStyle]);
 
   const initialsStyle = useMemo(() => [
     styles.initials,

package/src/molecules/avatar/AvatarGroup.tsx

@@ -58,13 +58,13 @@ const AvatarItem = React.memo<{
   spacing: number;
   avatarStyle: any;
 }>(({ item, index, size, shape, spacing, avatarStyle }) => {
-  const wrapperStyle = useMemo(
-    () => [
-      styles.avatarWrapper,
-      index > 0 && { marginLeft: spacing },
-    ],
-    [index, spacing]
-  );
+  const wrapperStyle = useMemo(() => {
+    const baseStyle = [styles.avatarWrapper];
+    if (index > 0) {
+      baseStyle.push({ marginLeft: spacing });
+    }
+    return baseStyle;
+  }, [index, spacing]);
 
   return (
     <View style={wrapperStyle}>

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

@@ -69,11 +69,11 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
 
   const spacingMultiplier = tokens.spacingMultiplier;
 
-  const styles = useMemo(() => StyleSheet.create({
+  const styles = useMemo(() => ({
     overlay: {
       flex: 1,
       backgroundColor: tokens.colors.modalOverlay,
-      justifyContent: 'flex-end',
+      justifyContent: 'flex-end' as const,
     },
     container: {
       height: sheetHeight,
@@ -87,7 +87,7 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
       height: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.height, spacingMultiplier),
       backgroundColor: tokens.colors.border,
       borderRadius: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.borderRadius, spacingMultiplier),
-      alignSelf: 'center',
+      alignSelf: 'center' as const,
       marginTop: tokens.spacing.md,
       marginBottom: tokens.spacing.sm,
     },

package/src/molecules/calendar/infrastructure/utils/DateUtilities.ts

@@ -96,7 +96,18 @@ export class DateUtilities {
     const year = parts[0] ?? 0;
     const month = parts[1] ?? 1;
     const day = parts[2] ?? 1;
-    return new Date(year, month - 1, day);
+
+    const date = new Date(year, month - 1, day);
+
+    // Validate the date is not invalid
+    if (isNaN(date.getTime())) {
+      if (__DEV__) {
+        console.warn(`[DateUtilities] Invalid date string: ${dateString}`);
+      }
+      throw new Error(`Invalid date string: ${dateString}`);
+    }
+
+    return date;
   }
 
   /**

package/src/molecules/calendar/presentation/components/CalendarDayCell.tsx

@@ -2,7 +2,7 @@
  * Calendar Day Cell Component
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TouchableOpacity, View, StyleProp, ViewStyle } from 'react-native';
 import { AtomicText } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme/hooks/useAppDesignTokens';
@@ -38,22 +38,34 @@ export const CalendarDayCell: React.FC<CalendarDayCellProps> = React.memo(({
   const visibleEvents = day.events.slice(0, maxEventIndicators);
   const hiddenEventCount = Math.max(0, eventCount - maxEventIndicators);
 
+  const cellStyle = useMemo(() => [
+    calendarStyles.dayCell,
+    {
+      backgroundColor: isSelected ? tokens.colors.primary : 'transparent',
+      borderColor: isSelected
+        ? tokens.colors.primary
+        : day.isToday
+          ? tokens.colors.primary
+          : tokens.colors.border,
+      borderWidth: isSelected ? 2 : day.isToday ? 2 : 1,
+      opacity: day.isDisabled ? 0.4 : 1,
+    },
+    dayStyle,
+  ], [isSelected, day.isToday, day.isDisabled, tokens.colors.primary, tokens.colors.border, dayStyle]);
+
+  const dayTextStyle = useMemo(() => [
+    calendarStyles.dayText,
+    day.isToday && !isSelected && { fontWeight: 'bold' as const },
+  ], [day.isToday, isSelected]);
+
+  const todayDotStyle = useMemo(() => [
+    calendarStyles.eventDot,
+    { backgroundColor: tokens.colors.success },
+  ], [calendarStyles.eventDot, tokens.colors.success]);
+
   return (
     <TouchableOpacity
-      style={[
-        calendarStyles.dayCell,
-        {
-          backgroundColor: isSelected ? tokens.colors.primary : 'transparent',
-          borderColor: isSelected
-            ? tokens.colors.primary
-            : day.isToday
-              ? tokens.colors.primary
-              : tokens.colors.border,
-          borderWidth: isSelected ? 2 : day.isToday ? 2 : 1,
-          opacity: day.isDisabled ? 0.4 : 1,
-        },
-        dayStyle,
-      ]}
+      style={cellStyle}
       onPress={() => !day.isDisabled && onDateSelect(day.date)}
       disabled={day.isDisabled}
       testID={testID ? `${testID}-day-${index}` : undefined}
@@ -64,31 +76,35 @@ export const CalendarDayCell: React.FC<CalendarDayCellProps> = React.memo(({
       <AtomicText
         type="bodyMedium"
         color={isSelected ? 'inverse' : day.isCurrentMonth ? 'primary' : 'secondary'}
-        style={[calendarStyles.dayText, day.isToday && !isSelected && { fontWeight: 'bold' }]}
+        style={dayTextStyle}
       >
         {day.date.getDate()}
       </AtomicText>
 
       <View style={calendarStyles.eventIndicators}>
         {day.isToday && eventCount === 0 && (
-          <View style={[calendarStyles.eventDot, { backgroundColor: tokens.colors.success }]} />
+          <View style={todayDotStyle} />
         )}
 
-        {visibleEvents.map((event) => (
-          <View
-            key={event.id}
-            style={[
-              calendarStyles.eventDot,
-              {
-                backgroundColor: event.color
-                  ? event.color
-                  : event.isCompleted
-                    ? tokens.colors.success
-                    : tokens.colors.primary,
-              },
-            ]}
-          />
-        ))}
+        {visibleEvents.map((event) => {
+          const eventDotStyle = useMemo(() => [
+            calendarStyles.eventDot,
+            {
+              backgroundColor: event.color
+                ? event.color
+                : event.isCompleted
+                  ? tokens.colors.success
+                  : tokens.colors.primary,
+            },
+          ], [event.color, event.isCompleted, tokens.colors.success, tokens.colors.primary]);
+
+          return (
+            <View
+              key={event.id}
+              style={eventDotStyle}
+            />
+          );
+        })}
 
         {showEventCount && hiddenEventCount > 0 && (
           <AtomicText type="bodySmall" color="secondary" style={calendarStyles.moreEventsText}>

package/src/molecules/info-grid/InfoGrid.tsx

@@ -8,7 +8,7 @@ import type { InfoGridProps } from './types';
 import { calculateResponsiveSize } from '../../responsive';
 import { INFO_GRID_ICONS } from '../../constants';
 
-export const InfoGrid: React.FC<InfoGridProps> = ({
+export const InfoGrid: React.FC<InfoGridProps> = React.memo(({
   title,
   headerIcon,
   items,
@@ -73,6 +73,8 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
     },
   }), [tokens, columns, spacingMultiplier]);
 
+  const memoizedItemStyle = useMemo(() => itemStyle, [itemStyle]);
+
   return (
     <View style={[styles.container, style]}>
       {(title || headerIcon) && (
@@ -88,7 +90,7 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
 
       <View style={styles.grid}>
         {items.map((item) => (
-          <View key={item.text} style={[styles.item, itemStyle]}>
+          <View key={item.text} style={[styles.item, memoizedItemStyle]}>
             {item.icon && (
               <View style={styles.iconContainer}>
                 <AtomicIcon name={item.icon} size="xs" color="primary" />
@@ -102,4 +104,4 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
       </View>
     </View>
   );
-};
+});