@umituz/react-native-design-system 4.26.6 → 4.26.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.26.6",
+  "version": "4.26.8",
   "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 - TanStack persistence and expo-image-manipulator now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/atoms/AtomicProgress.tsx

@@ -17,6 +17,7 @@
 import React, { useMemo } from 'react';
 import { View, StyleSheet, ViewStyle, DimensionValue, Text } from 'react-native';
 import { useAppDesignTokens } from '../theme';
+import { normalizeProgress } from '../utils/math';
 
 // =============================================================================
 // TYPE DEFINITIONS
@@ -66,8 +67,11 @@ export const AtomicProgress: React.FC<AtomicProgressProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  // Clamp value between 0 and 100
-  const clampedValue = Math.max(0, Math.min(100, value));
+  // Normalize progress value using utility
+  const normalizedValue = useMemo(
+    () => normalizeProgress(value),
+    [value]
+  );
 
   // Default colors
   const progressColor = color || tokens.colors.primary;
@@ -75,7 +79,7 @@ export const AtomicProgress: React.FC<AtomicProgressProps> = ({
   const progressTextColor = textColor || tokens.colors.textPrimary;
 
   // Calculate progress width
-  const progressWidth = `${clampedValue}%`;
+  const progressWidth = `${normalizedValue}%`;
 
   const scaledHeight = height * tokens.spacingMultiplier;
 
@@ -109,8 +113,8 @@ export const AtomicProgress: React.FC<AtomicProgressProps> = ({
       style={[containerStyle, style]}
       testID={testID}
       accessibilityRole="progressbar"
-      accessibilityValue={{ min: 0, max: 100, now: Math.round(clampedValue) }}
-      accessibilityLabel={`Progress: ${Math.round(clampedValue)}${showPercentage ? '%' : ''}`}
+      accessibilityValue={{ min: 0, max: 100, now: Math.round(normalizedValue) }}
+      accessibilityLabel={`Progress: ${Math.round(normalizedValue)}${showPercentage ? '%' : ''}`}
     >
       <View style={progressStyle} />
       {(showPercentage || showValue) && (
@@ -118,9 +122,9 @@ export const AtomicProgress: React.FC<AtomicProgressProps> = ({
           <Text
             style={textStyle}
             accessibilityLiveRegion="polite"
-            accessibilityLabel={`Current progress: ${Math.round(clampedValue)}${showPercentage ? '%' : ''}`}
+            accessibilityLabel={`Current progress: ${Math.round(normalizedValue)}${showPercentage ? '%' : ''}`}
           >
-            {showPercentage ? `${Math.round(clampedValue)}%` : `${Math.round(clampedValue)}`}
+            {showPercentage ? `${Math.round(normalizedValue)}%` : `${Math.round(normalizedValue)}`}
           </Text>
         </View>
       )}

package/src/atoms/GlassView/GlassView.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, ViewStyle, StyleProp, View } from 'react-native';
 // Remove expo-blur import to fix native module error
 // import { BlurView, BlurTint } from 'expo-blur';
 import { useDesignSystemTheme } from '../../theme';
+import { intensityToOpacity } from '../../utils/math';
 
 // Define a local type for tint to maintain API compatibility
 export type GlassTint = 'light' | 'dark' | 'default' | 'prominent' | 'regular' | 'extraLight' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterial' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialLight' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark' | 'systemUltraThinMaterialDark';
@@ -17,7 +18,7 @@ export interface GlassViewProps {
 
 /**
  * GlassView
- * 
+ *
  * A wrapper component for glassmorphism effects.
  * Currently uses a fallback transparency implementation to avoid native module issues with expo-blur.
  */
@@ -29,17 +30,15 @@ export const GlassView: React.FC<GlassViewProps> = ({
 }) => {
   const { themeMode } = useDesignSystemTheme();
   const isDark = themeMode === 'dark';
-  
-  // Calculate background color opacity based on intensity
-  // Max intensity 100 -> 0.9 opacity (almost solid)
-  // Min intensity 0 -> 0.1 opacity (almost transparent)
-  const opacity = Math.min(0.95, Math.max(0.05, intensity / 100));
-  
+
+  // Calculate opacity using utility function
+  const opacity = intensityToOpacity(intensity);
+
   // Choose base color based on tint or theme
   const resolvedTint = tint || (isDark ? 'dark' : 'light');
   const isDarkBase = resolvedTint === 'dark' || resolvedTint.includes('Dark') || (resolvedTint === 'default' && isDark);
-  
-  const backgroundColor = isDarkBase 
+
+  const backgroundColor = isDarkBase
     ? `rgba(34, 16, 26, ${opacity})` // Dark color from theme
     : `rgba(255, 255, 255, ${opacity})`;
 

package/src/molecules/ListItem.tsx

@@ -1,26 +1,38 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { AtomicText, AtomicIcon } from '../atoms';
 import { ListItemProps } from './listitem/types';
 import { getListItemStyles } from './listitem/styles/listItemStyles';
 
+// SVG paths for common icons (work without external icon library)
+const ICON_PATHS: Record<string, string> = {
+  'globe': "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z",
+  'chevron-forward': "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z",
+};
+
 export type { ListItemProps };
 
-export const ListItem: React.FC<ListItemProps> = ({
-  title, subtitle, leftIcon, rightIcon, onPress, disabled = false, style,
-}) => {
+export const ListItem = React.memo<ListItemProps>(({ title, subtitle, leftIcon, rightIcon, onPress, disabled = false, style }) => {
   const tokens = useAppDesignTokens();
   const listItemStyles = getListItemStyles(tokens);
   const Component = onPress ? TouchableOpacity : View;
 
-  const accessibilityProps = onPress
-    ? {
-        accessibilityRole: 'button' as const,
-        accessibilityLabel: title,
-        accessibilityState: { disabled },
-      }
-    : {};
+  const accessibilityProps = useMemo(
+    () => (onPress
+      ? {
+          accessibilityRole: 'button' as const,
+          accessibilityLabel: title,
+          accessibilityState: { disabled } as const,
+        }
+      : {}),
+    [onPress, title, disabled]
+  );
+
+  const rightIconStyle = useMemo(
+    () => ({ marginLeft: tokens.spacing.md }),
+    [tokens.spacing.md]
+  );
 
   return (
     <Component
@@ -31,11 +43,12 @@ export const ListItem: React.FC<ListItemProps> = ({
       {...accessibilityProps}
     >
       {leftIcon && (
-        <AtomicIcon 
-          name={leftIcon} 
-          color={disabled ? 'surfaceVariant' : 'primary'} 
-          size="md" 
-          style={listItemStyles.iconContainer} 
+        <AtomicIcon
+          svgPath={ICON_PATHS[leftIcon] || undefined}
+          name={!ICON_PATHS[leftIcon] ? leftIcon : undefined}
+          color={disabled ? 'surfaceVariant' : 'primary'}
+          size="md"
+          style={listItemStyles.iconContainer}
         />
       )}
       <View style={listItemStyles.content}>
@@ -43,13 +56,14 @@ export const ListItem: React.FC<ListItemProps> = ({
         {subtitle && <AtomicText type="bodySmall" color="surfaceVariant" numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
       </View>
       {rightIcon && onPress && (
-        <AtomicIcon 
-          name={rightIcon} 
-          color="surfaceVariant" 
-          size="sm" 
-          style={{ marginLeft: tokens.spacing.md }} 
+        <AtomicIcon
+          svgPath={ICON_PATHS[rightIcon] || undefined}
+          name={!ICON_PATHS[rightIcon] ? rightIcon : undefined}
+          color="surfaceVariant"
+          size="sm"
+          style={rightIconStyle}
         />
       )}
     </Component>
   );
-};
+});

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

@@ -1,12 +1,53 @@
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { ActionFooterProps } from './types';
 
-export const ActionFooter: React.FC<ActionFooterProps> = ({
+const createStyles = () => StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 0,
+    gap: 0,
+  },
+  backButton: {
+    width: 56,
+    height: 56,
+    borderRadius: 0,
+    backgroundColor: '',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '',
+  },
+  actionButton: {
+    flex: 1,
+    height: 56,
+    borderRadius: 0,
+    overflow: 'hidden',
+  },
+  actionContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    backgroundColor: '',
+    gap: 0,
+    paddingHorizontal: 0,
+  },
+  actionText: {
+    color: '',
+    fontWeight: '800',
+    fontSize: 18,
+  },
+});
+
+const baseStyles = createStyles();
+
+export const ActionFooter = React.memo<ActionFooterProps>(({
   onBack,
   onAction,
   actionLabel,
@@ -18,53 +59,51 @@ export const ActionFooter: React.FC<ActionFooterProps> = ({
   const tokens = useAppDesignTokens();
 
   const themedStyles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingVertical: tokens.spacing.md,
-          gap: tokens.spacing.md,
-        },
-        backButton: {
-          width: 56,
-          height: 56,
-          borderRadius: tokens.borders.radius.lg,
-          backgroundColor: tokens.colors.surface,
-          justifyContent: 'center',
-          alignItems: 'center',
-          borderWidth: 1,
-          borderColor: tokens.colors.outlineVariant,
-        },
-        actionButton: {
-          flex: 1,
-          height: 56,
-          borderRadius: tokens.borders.radius.lg,
-          overflow: 'hidden',
-        },
-        actionContent: {
-          flex: 1,
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-          backgroundColor: tokens.colors.primary,
-          gap: tokens.spacing.sm,
-          paddingHorizontal: tokens.spacing.lg,
-        },
-        actionText: {
-          color: tokens.colors.onPrimary,
-          fontWeight: '800',
-          fontSize: 18,
-        },
-      }),
+    () => ({
+      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,
+      },
+    }),
     [tokens],
   );
 
+  const handleBackPress = useCallback(() => {
+    onBack?.();
+  }, [onBack]);
+
+  const handleActionPress = useCallback(() => {
+    if (!loading) {
+      onAction?.();
+    }
+  }, [loading, onAction]);
+
   return (
     <View style={[themedStyles.container, style]}>
       <TouchableOpacity
         style={themedStyles.backButton}
-        onPress={onBack}
+        onPress={handleBackPress}
         activeOpacity={0.7}
         testID="action-footer-back"
         accessibilityRole="button"
@@ -79,7 +118,7 @@ export const ActionFooter: React.FC<ActionFooterProps> = ({
 
       <TouchableOpacity
         style={themedStyles.actionButton}
-        onPress={onAction}
+        onPress={handleActionPress}
         activeOpacity={0.9}
         disabled={loading}
         testID="action-footer-action"
@@ -98,4 +137,4 @@ export const ActionFooter: React.FC<ActionFooterProps> = ({
       </TouchableOpacity>
     </View>
   );
-};
+});

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

@@ -19,6 +19,7 @@ import { useAppDesignTokens } from '../../theme';
 import { AtomicIcon } from '../../atoms';
 import { AtomicText } from '../../atoms';
 import type { IconName } from '../../atoms';
+import { calculateGridItemWidth } from '../../utils/math';
 
 export interface IconGridItem {
   /** Unique identifier */
@@ -44,6 +45,48 @@ export interface IconGridProps {
   style?: StyleProp<ViewStyle>;
 }
 
+// Memoized grid item component to prevent unnecessary re-renders
+const GridItem = React.memo<{
+  item: IconGridItem;
+  itemWidth: number;
+  cardBackground: string;
+  borderLight: string;
+  textPrimary: string;
+}>(({ item, itemWidth, cardBackground, borderLight, textPrimary }) => {
+  const cardStyle = useMemo(
+    () => [styles.card, { width: itemWidth }],
+    [itemWidth]
+  );
+
+  const iconBoxStyle = useMemo(
+    () => [
+      styles.iconBox,
+      { width: itemWidth, backgroundColor: cardBackground, borderColor: borderLight },
+    ],
+    [itemWidth, cardBackground, borderLight]
+  );
+
+  const labelStyle = useMemo(
+    () => [styles.label, { color: textPrimary }],
+    [textPrimary]
+  );
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      onPress={item.onPress}
+      style={cardStyle}
+    >
+      <View style={iconBoxStyle}>
+        <AtomicIcon name={item.icon} size="lg" color="textPrimary" />
+      </View>
+      <AtomicText style={labelStyle} numberOfLines={1}>
+        {item.label}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+});
+
 /**
  * A self-sizing icon card grid.
  *
@@ -58,7 +101,7 @@ export interface IconGridProps {
  * />
  * ```
  */
-export const IconGrid: React.FC<IconGridProps> = ({
+export const IconGrid = React.memo<IconGridProps>(({
   items,
   columns = 3,
   gap = 10,
@@ -78,52 +121,43 @@ export const IconGrid: React.FC<IconGridProps> = ({
     [containerWidth],
   );
 
-  // Total gap space between columns (N columns = N-1 gaps)
+  // Calculate item width using utility function
   const itemWidth = useMemo(() => {
-    if (containerWidth <= 0) return 0;
-    const totalGap = gap * (columns - 1);
-    // Subtract 1px safety margin to prevent sub-pixel wrapping
-    return Math.floor((containerWidth - totalGap) / columns) - 1;
+    return calculateGridItemWidth(containerWidth, columns, gap);
   }, [containerWidth, columns, gap]);
 
   const { cardBackground, borderLight, textPrimary } = tokens.colors;
 
+  const gridStyle = useMemo(
+    () => [styles.grid, { columnGap: gap, rowGap: rowGap ?? gap }, style],
+    [gap, rowGap, style]
+  );
+
+  const placeholderStyle = useMemo(
+    () => ({ width: 0, height: 0 }),
+    []
+  );
+
   return (
-    <View
-      style={[styles.grid, { columnGap: gap, rowGap: rowGap ?? gap }, style]}
-      onLayout={handleLayout}
-    >
+    <View style={gridStyle} onLayout={handleLayout}>
       {items.map((item) =>
         itemWidth > 0 ? (
-          <TouchableOpacity
+          <GridItem
             key={item.id}
-            activeOpacity={0.7}
-            onPress={item.onPress}
-            style={[styles.card, { width: itemWidth }]}
-          >
-            <View
-              style={[
-                styles.iconBox,
-                { width: itemWidth, backgroundColor: cardBackground, borderColor: borderLight },
-              ]}
-            >
-              <AtomicIcon name={item.icon} size="lg" color="textPrimary" />
-            </View>
-            <AtomicText
-              style={[styles.label, { color: textPrimary }]}
-              numberOfLines={1}
-            >
-              {item.label}
-            </AtomicText>
-          </TouchableOpacity>
+            item={item}
+            itemWidth={itemWidth}
+            cardBackground={cardBackground}
+            borderLight={borderLight}
+            textPrimary={textPrimary}
+          />
         ) : (
           // Placeholder — keeps grid stable before first layout measurement
-          <View key={item.id} style={{ width: 0, height: 0 }} />
+          <View key={item.id} style={placeholderStyle} />
         ),
       )}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   grid: {

package/src/onboarding/presentation/components/OnboardingFooter.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useMemo, useCallback } from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AtomicText } from "../../../atoms/AtomicText";
 import { useOnboardingProvider } from "../providers/OnboardingProvider";
+import { calculateStepProgress } from "../../../utils/math";
 
 export interface OnboardingFooterProps {
   currentIndex: number;
@@ -15,7 +16,7 @@ export interface OnboardingFooterProps {
   disabled?: boolean;
 }
 
-export const OnboardingFooter = ({
+export const OnboardingFooter = React.memo<OnboardingFooterProps>(({
   currentIndex,
   totalSlides,
   isLastSlide,
@@ -24,62 +25,114 @@ export const OnboardingFooter = ({
   showDots = true,
   showProgressText = true,
   disabled = false,
-}: OnboardingFooterProps) => {
+}) => {
   const insets = useSafeAreaInsets();
   const { theme: { colors }, translations } = useOnboardingProvider();
 
-  const buttonText = isLastSlide
-    ? translations.getStartedButton
-    : translations.nextButton;
+  const buttonText = useMemo(
+    () => isLastSlide ? translations.getStartedButton : translations.nextButton,
+    [isLastSlide, translations.getStartedButton, translations.nextButton]
+  );
+
+  const progressPercent = useMemo(
+    () => calculateStepProgress(currentIndex + 1, totalSlides),
+    [currentIndex, totalSlides]
+  );
+
+  const footerStyle = useMemo(
+    () => [styles.footer, { paddingBottom: insets.bottom + 24 }],
+    [insets.bottom]
+  );
+
+  const progressBarBgStyle = useMemo(
+    () => [styles.progressBar, { backgroundColor: colors.progressBarBg }],
+    [colors.progressBarBg]
+  );
+
+  const progressFillStyle = useMemo(
+    () => ({
+      ...styles.progressFill,
+      width: `${progressPercent}%` as any,
+      backgroundColor: colors.progressFillColor,
+    }),
+    [progressPercent, colors.progressFillColor]
+  );
 
-  const progressPercent = ((currentIndex + 1) / totalSlides) * 100;
+  const dots = useMemo(
+    () => Array.from({ length: totalSlides }, (_, index) => {
+      const isActive = index === currentIndex;
+      return {
+        key: index,
+        style: [
+          styles.dot,
+          { backgroundColor: colors.dotColor },
+          isActive && {
+            width: 12,
+            backgroundColor: colors.activeDotColor
+          }
+        ]
+      };
+    }),
+    [totalSlides, currentIndex, colors.dotColor, colors.activeDotColor]
+  );
+
+  const buttonStyle = useMemo(
+    () => [
+      styles.button,
+      {
+        backgroundColor: colors.buttonBg,
+        opacity: disabled ? 0.5 : 1,
+      },
+    ],
+    [colors.buttonBg, disabled]
+  );
+
+  const buttonTextStyle = useMemo(
+    () => [styles.buttonText, { color: colors.buttonTextColor }],
+    [colors.buttonTextColor]
+  );
+
+  const progressTextStyle = useMemo(
+    () => [styles.progressText, { color: colors.progressTextColor }],
+    [colors.progressTextColor]
+  );
+
+  const handlePress = useCallback(() => {
+    if (!disabled) {
+      onNext();
+    }
+  }, [disabled, onNext]);
 
   return (
-    <View style={[styles.footer, { paddingBottom: insets.bottom + 24 }]}>
+    <View style={footerStyle}>
       {showProgressBar && (
         <View style={styles.progressContainer}>
-          <View style={[styles.progressBar, { backgroundColor: colors.progressBarBg }]}>
-            <View style={[styles.progressFill, { width: `${progressPercent}%`, backgroundColor: colors.progressFillColor }]} />
+          <View style={progressBarBgStyle}>
+            <View style={progressFillStyle} />
           </View>
         </View>
       )}
 
       {showDots && (
         <View style={styles.dots}>
-          {Array.from({ length: totalSlides }).map((_, index) => (
-            <View
-              key={index}
-              style={[
-                styles.dot,
-                { backgroundColor: colors.dotColor },
-                index === currentIndex && {
-                  width: 12,
-                  backgroundColor: colors.activeDotColor
-                }
-              ]}
-            />
+          {dots.map(({ key, style: dotStyle }) => (
+            <View key={key} style={dotStyle} />
           ))}
         </View>
       )}
 
       <TouchableOpacity
-        onPress={onNext}
+        onPress={handlePress}
         disabled={disabled}
         activeOpacity={0.7}
         accessibilityRole="button"
         accessibilityLabel={buttonText}
         accessibilityState={{ disabled }}
-        style={[
-          styles.button,
-          {
-            backgroundColor: colors.buttonBg,
-            opacity: disabled ? 0.5 : 1,
-          },
-        ]}
+        style={buttonStyle}
       >
         <AtomicText
           type="labelLarge"
-          style={[styles.buttonText, { color: colors.buttonTextColor }]}
+          style={buttonTextStyle}
         >
           {buttonText}
         </AtomicText>
@@ -88,14 +141,14 @@ export const OnboardingFooter = ({
       {showProgressText && (
         <AtomicText
           type="labelSmall"
-          style={[styles.progressText, { color: colors.progressTextColor }]}
+          style={progressTextStyle}
         >
           {currentIndex + 1} {translations.of} {totalSlides}
         </AtomicText>
       )}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   footer: {

package/src/onboarding/presentation/components/OnboardingHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo, useCallback } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, useIconName } from "../../../atoms";
 import { AtomicText } from "../../../atoms/AtomicText";
@@ -13,35 +13,56 @@ export interface OnboardingHeaderProps {
   skipButtonText?: string;
 }
 
-export const OnboardingHeader = ({
+export const OnboardingHeader = React.memo<OnboardingHeaderProps>(({
   isFirstSlide,
   onBack,
   onSkip,
   showBackButton = true,
   showSkipButton = true,
   skipButtonText,
-}: OnboardingHeaderProps) => {
+}) => {
   const {
     theme: { colors },
   } = useOnboardingProvider();
   const chevronLeftIcon = useIconName('chevronLeft');
 
+  const handleBack = useCallback(() => {
+    if (!isFirstSlide) {
+      onBack?.();
+    }
+  }, [isFirstSlide, onBack]);
+
+  const backButtonStyle = useMemo(
+    () => [
+      styles.headerButton,
+      {
+        backgroundColor: colors.headerButtonBg,
+        borderColor: colors.headerButtonBorder,
+      },
+      isFirstSlide && styles.headerButtonDisabled,
+    ],
+    [colors.headerButtonBg, colors.headerButtonBorder, isFirstSlide]
+  );
+
+  const skipTextStyle = useMemo(
+    () => [styles.skipText, { color: colors.textColor }],
+    [colors.textColor]
+  );
+
+  const hitSlop = useMemo(
+    () => ({ top: 10, bottom: 10, left: 10, right: 10 }),
+    []
+  );
+
   return (
     <View style={styles.header}>
       {showBackButton ? (
         <TouchableOpacity
-          onPress={() => !isFirstSlide && onBack?.()}
+          onPress={handleBack}
           disabled={isFirstSlide}
-          style={[
-            styles.headerButton,
-            {
-              backgroundColor: colors.headerButtonBg,
-              borderColor: colors.headerButtonBorder,
-            },
-            isFirstSlide && styles.headerButtonDisabled,
-          ]}
+          style={backButtonStyle}
           activeOpacity={0.7}
-          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          hitSlop={hitSlop}
         >
           <AtomicIcon name={chevronLeftIcon} customSize={20} customColor={colors.iconColor} />
         </TouchableOpacity>
@@ -54,11 +75,11 @@ export const OnboardingHeader = ({
           activeOpacity={0.7}
           accessibilityRole="button"
           accessibilityLabel={skipButtonText}
-          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          hitSlop={hitSlop}
         >
           <AtomicText
             type="labelLarge"
-            style={[styles.skipText, { color: colors.textColor }]}
+            style={skipTextStyle}
           >
             {skipButtonText}
           </AtomicText>
@@ -66,7 +87,7 @@ export const OnboardingHeader = ({
       ) : <View />}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   header: {

package/src/onboarding/presentation/screens/OnboardingScreen.tsx

@@ -161,9 +161,6 @@ export const OnboardingScreen = ({
     globalUseCustomBackground,
   });
 
-  if (__DEV__) {
-  }
-
   // Early return if no slides - prevents rendering empty/broken screen
   if (filteredSlides.length === 0) {
     if (__DEV__) {

package/src/timezone/infrastructure/services/DateFormatter.ts

@@ -1,9 +1,38 @@
 /**
  * DateFormatter
  * Handles locale-aware formatting of dates and times
+ * Optimized with Intl.DateTimeFormat caching
  */
 import { parseDate } from '../utils/TimezoneParsers';
 
+// Cache for Intl.DateTimeFormat instances to avoid recreating them
+const formatterCache = new Map<string, Intl.DateTimeFormat>();
+
+function getFormatter(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {
+  const cacheKey = `${locale}-${JSON.stringify(options)}`;
+  let formatter = formatterCache.get(cacheKey);
+
+  if (!formatter) {
+    try {
+      formatter = new Intl.DateTimeFormat(locale, options);
+    } catch (_error) {
+      // Fallback to 'en-US' if locale is not supported
+      formatter = new Intl.DateTimeFormat('en-US', options);
+    }
+    formatterCache.set(cacheKey, formatter);
+
+    // Limit cache size to prevent memory leaks
+    if (formatterCache.size > 100) {
+      const firstKey = formatterCache.keys().next().value as string;
+      if (firstKey) {
+        formatterCache.delete(firstKey);
+      }
+    }
+  }
+
+  return formatter;
+}
+
 export class DateFormatter {
     formatDate(
         date: Date | string | number,
@@ -16,7 +45,7 @@ export class DateFormatter {
             day: 'numeric',
             ...options,
         };
-        return new Intl.DateTimeFormat(locale, defaultOptions).format(this.parse(date));
+        return getFormatter(locale, defaultOptions).format(this.parse(date));
     }
 
     formatTime(
@@ -29,7 +58,7 @@ export class DateFormatter {
             minute: '2-digit',
             ...options,
         };
-        return new Intl.DateTimeFormat(locale, defaultOptions).format(this.parse(date));
+        return getFormatter(locale, defaultOptions).format(this.parse(date));
     }
 
     formatDateTime(
@@ -45,7 +74,7 @@ export class DateFormatter {
             minute: '2-digit',
             ...options,
         };
-        return new Intl.DateTimeFormat(locale, defaultOptions).format(this.parse(date));
+        return getFormatter(locale, defaultOptions).format(this.parse(date));
     }
 
     formatDateToString(date: Date | string | number): string {

package/src/utils/math/CalculationUtils.ts

@@ -0,0 +1,113 @@
+/**
+ * Calculation Utilities
+ *
+ * Common mathematical calculations used throughout the app
+ */
+
+/**
+ * Clamps a number between a minimum and maximum value
+ * @param value - The value to clamp
+ * @param min - Minimum allowed value (default: 0)
+ * @param max - Maximum allowed value (default: 100)
+ * @returns Clamped value
+ */
+export function clamp(value: number, min = 0, max = 100): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+/**
+ * Calculates progress percentage
+ * @param current - Current value
+ * @param total - Total value
+ * @returns Percentage (0-100)
+ */
+export function calculatePercentage(current: number, total: number): number {
+  if (total === 0) return 0;
+  return (current / total) * 100;
+}
+
+/**
+ * Rounds a number to specified decimal places
+ * @param value - The value to round
+ * @param decimals - Number of decimal places (default: 0)
+ * @returns Rounded value
+ */
+export function roundTo(value: number, decimals = 0): number {
+  const multiplier = Math.pow(10, decimals);
+  return Math.round(value * multiplier) / multiplier;
+}
+
+/**
+ * Converts intensity (0-100) to opacity (0-1)
+ * @param intensity - Intensity value (0-100)
+ * @param minOpacity - Minimum opacity (default: 0.05)
+ * @param maxOpacity - Maximum opacity (default: 0.95)
+ * @returns Opacity value (0-1)
+ */
+export function intensityToOpacity(
+  intensity: number,
+  minOpacity = 0.05,
+  maxOpacity = 0.95
+): number {
+  const clamped = clamp(intensity, 0, 100);
+  return minOpacity + (clamped / 100) * (maxOpacity - minOpacity);
+}
+
+/**
+ * Calculates grid item width based on container width and columns
+ * @param containerWidth - Total container width
+ * @param columns - Number of columns
+ * @param gap - Gap between items in pixels
+ * @returns Item width in pixels
+ */
+export function calculateGridItemWidth(
+  containerWidth: number,
+  columns: number,
+  gap: number
+): number {
+  if (containerWidth <= 0) return 0;
+  const totalGap = gap * (columns - 1);
+  // Subtract 1px safety margin to prevent sub-pixel wrapping
+  return Math.floor((containerWidth - totalGap) / columns) - 1;
+}
+
+/**
+ * Checks if a value is within a range (inclusive)
+ * @param value - Value to check
+ * @param min - Range minimum
+ * @param max - Range maximum
+ * @returns True if value is in range
+ */
+export function isInRange(value: number, min: number, max: number): boolean {
+  return value >= min && value <= max;
+}
+
+/**
+ * Linear interpolation between two values
+ * @param start - Start value
+ * @param end - End value
+ * @param progress - Progress (0-1)
+ * @returns Interpolated value
+ */
+export function lerp(start: number, end: number, progress: number): number {
+  return start + (end - start) * Math.max(0, Math.min(1, progress));
+}
+
+/**
+ * Maps a value from one range to another
+ * @param value - Value to map
+ * @param inMin - Input range minimum
+ * @param inMax - Input range maximum
+ * @param outMin - Output range minimum
+ * @param outMax - Output range maximum
+ * @returns Mapped value
+ */
+export function mapRange(
+  value: number,
+  inMin: number,
+  inMax: number,
+  outMin: number,
+  outMax: number
+): number {
+  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+}

package/src/utils/math/OpacityUtils.ts

@@ -0,0 +1,63 @@
+/**
+ * Opacity Utilities
+ *
+ * Helper functions for opacity-related calculations
+ */
+
+/**
+ * Converts intensity value to opacity for glassmorphism effects
+ * @param intensity - Intensity value (0-100)
+ * @param options - Configuration options
+ * @returns Opacity value (0-1)
+ */
+export function intensityToOpacity(
+  intensity: number,
+  options: {
+    minOpacity?: number;
+    maxOpacity?: number;
+    invert?: boolean;
+  } = {}
+): number {
+  const {
+    minOpacity = 0.05,
+    maxOpacity = 0.95,
+    invert = false
+  } = options;
+
+  const clamped = Math.max(0, Math.min(100, intensity));
+  let opacity = minOpacity + (clamped / 100) * (maxOpacity - minOpacity);
+
+  if (invert) {
+    opacity = maxOpacity - opacity + minOpacity;
+  }
+
+  return opacity;
+}
+
+/**
+ * Creates an RGBA color string with specified opacity
+ * @param rgb - RGB color as array [r, g, b]
+ * @param opacity - Opacity value (0-1)
+ * @returns RGBA color string
+ */
+export function createRgbaColor(rgb: [number, number, number], opacity: number): string {
+  const [r, g, b] = rgb;
+  const clampedOpacity = Math.max(0, Math.min(1, opacity));
+  return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+}
+
+/**
+ * Calculates opacity based on a ratio (0-1)
+ * @param ratio - Ratio value (0-1)
+ * @param minOpacity - Minimum opacity (default: 0.1)
+ * @param maxOpacity - Maximum opacity (default: 1)
+ * @returns Opacity value (0-1)
+ */
+export function ratioToOpacity(
+  ratio: number,
+  minOpacity = 0.1,
+  maxOpacity = 1
+): number {
+  const clampedRatio = Math.max(0, Math.min(1, ratio));
+  return minOpacity + clampedRatio * (maxOpacity - minOpacity);
+}

package/src/utils/math/ProgressUtils.ts

@@ -0,0 +1,57 @@
+/**
+ * Progress Utilities
+ *
+ * Helper functions for progress-related calculations
+ */
+
+import { clamp } from './CalculationUtils';
+
+/**
+ * Validates and clamps a progress value to ensure it's within valid range
+ * @param value - Raw progress value
+ * @returns Clamped progress value (0-100)
+ */
+export function normalizeProgress(value: number): number {
+  return clamp(value, 0, 100);
+}
+
+/**
+ * Formats a progress value as a percentage string
+ * @param value - Progress value (0-100)
+ * @param decimals - Number of decimal places (default: 0)
+ * @returns Formatted percentage string
+ */
+export function formatPercentage(value: number, decimals = 0): string {
+  const normalized = normalizeProgress(value);
+  return `${normalized.toFixed(decimals)}%`;
+}
+
+/**
+ * Calculates the percentage completed of a multi-step process
+ * @param currentStep - Current step (1-indexed)
+ * @param totalSteps - Total number of steps
+ * @returns Percentage (0-100)
+ */
+export function calculateStepProgress(currentStep: number, totalSteps: number): number {
+  if (totalSteps <= 0) return 0;
+  const normalizedStep = Math.max(0, Math.min(currentStep, totalSteps));
+  return (normalizedStep / totalSteps) * 100;
+}
+
+/**
+ * Checks if progress is complete
+ * @param value - Progress value (0-100)
+ * @returns True if progress is 100%
+ */
+export function isComplete(value: number): boolean {
+  return normalizeProgress(value) >= 100;
+}
+
+/**
+ * Checks if progress has started
+ * @param value - Progress value (0-100)
+ * @returns True if progress > 0%
+ */
+export function hasStarted(value: number): boolean {
+  return normalizeProgress(value) > 0;
+}

package/src/utils/math/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Math Utilities Index
+ */
+
+export {
+  clamp,
+  calculatePercentage,
+  roundTo,
+  calculateGridItemWidth,
+  isInRange,
+  lerp,
+  mapRange,
+} from './CalculationUtils';
+
+export {
+  normalizeProgress,
+  formatPercentage,
+  calculateStepProgress,
+  isComplete,
+  hasStarted,
+} from './ProgressUtils';
+
+export {
+  intensityToOpacity,
+  createRgbaColor,
+  ratioToOpacity,
+} from './OpacityUtils';