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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.28.13",
+  "version": "4.28.14",
   "description": "Universal design system for React Native apps with safe navigation hooks - updated SKILL.md with navigation documentation",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/molecules/StepHeader/StepHeader.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo } from "react";
-import { View, StyleSheet, type ViewStyle, type StyleProp } from "react-native";
+import { View, type ViewStyle, type StyleProp } from "react-native";
 import { AtomicText } from "../../atoms/AtomicText";
 import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
 import {
@@ -60,52 +60,51 @@ export const StepHeader: React.FC<StepHeaderProps> = ({
   const spacingMultiplier = tokens.spacingMultiplier;
 
   const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          paddingHorizontal: calculateResponsiveSize(
-            cfg.spacing?.paddingHorizontal ?? SPACING.xl,
-            spacingMultiplier
-          ),
-          marginBottom: calculateResponsiveSize(
-            cfg.spacing?.marginBottom ?? 32,
-            spacingMultiplier
-          ),
-        },
-        stepIndicator: {
-          flexDirection: "row",
-          alignItems: "center",
-          marginBottom: tokens.spacing.md,
-        },
-        stepDot: {
-          width: calculateResponsiveSize(STEP_INDICATOR.dot.width, spacingMultiplier),
-          height: calculateResponsiveSize(STEP_INDICATOR.dot.height, spacingMultiplier),
-          borderRadius: calculateResponsiveSize(STEP_INDICATOR.dot.borderRadius, spacingMultiplier),
-          marginHorizontal: calculateResponsiveSize(STEP_INDICATOR.dot.marginHorizontal, spacingMultiplier),
-        },
-        activeDot: {
-          backgroundColor: tokens.colors.primary,
-        },
-        inactiveDot: {
-          backgroundColor: `${tokens.colors.primary}30`,
-        },
-        title: {
-          fontSize: calculateResponsiveSize(cfg.titleFontSize ?? STEP_INDICATOR.title, spacingMultiplier),
-          fontWeight: "900",
-          color: tokens.colors.textPrimary,
-          textAlign: cfg.titleAlignment,
-          marginBottom: subtitle ? calculateResponsiveSize(STEP_INDICATOR.subtitle, spacingMultiplier) : 0,
-          letterSpacing: 0.3,
-        },
-        subtitle: {
-          fontSize: calculateResponsiveSize(cfg.subtitleFontSize ?? STEP_INDICATOR.subtitle, spacingMultiplier),
-          fontWeight: "500",
-          color: tokens.colors.textSecondary,
-          textAlign: cfg.titleAlignment,
-          lineHeight: calculateLineHeight(cfg.subtitleFontSize ?? STEP_INDICATOR.subtitle, spacingMultiplier),
-          opacity: 0.9,
-        },
-      }),
+    () => ({
+      container: {
+        paddingHorizontal: calculateResponsiveSize(
+          cfg.spacing?.paddingHorizontal ?? SPACING.xl,
+          spacingMultiplier
+        ),
+        marginBottom: calculateResponsiveSize(
+          cfg.spacing?.marginBottom ?? 32,
+          spacingMultiplier
+        ),
+      },
+      stepIndicator: {
+        flexDirection: "row" as const,
+        alignItems: "center" as const,
+        marginBottom: tokens.spacing.md,
+      },
+      stepDot: {
+        width: calculateResponsiveSize(STEP_INDICATOR.dot.width, spacingMultiplier),
+        height: calculateResponsiveSize(STEP_INDICATOR.dot.height, spacingMultiplier),
+        borderRadius: calculateResponsiveSize(STEP_INDICATOR.dot.borderRadius, spacingMultiplier),
+        marginHorizontal: calculateResponsiveSize(STEP_INDICATOR.dot.marginHorizontal, spacingMultiplier),
+      },
+      activeDot: {
+        backgroundColor: tokens.colors.primary,
+      },
+      inactiveDot: {
+        backgroundColor: `${tokens.colors.primary}30`,
+      },
+      title: {
+        fontSize: calculateResponsiveSize(cfg.titleFontSize ?? STEP_INDICATOR.title, spacingMultiplier),
+        fontWeight: "900" as const,
+        color: tokens.colors.textPrimary,
+        textAlign: cfg.titleAlignment,
+        marginBottom: subtitle ? calculateResponsiveSize(STEP_INDICATOR.subtitle, spacingMultiplier) : 0,
+        letterSpacing: 0.3,
+      },
+      subtitle: {
+        fontSize: calculateResponsiveSize(cfg.subtitleFontSize ?? STEP_INDICATOR.subtitle, spacingMultiplier),
+        fontWeight: "500" as const,
+        color: tokens.colors.textSecondary,
+        textAlign: cfg.titleAlignment,
+        lineHeight: calculateLineHeight(cfg.subtitleFontSize ?? STEP_INDICATOR.subtitle, spacingMultiplier),
+        opacity: 0.9,
+      },
+    }),
     [tokens, cfg, subtitle, spacingMultiplier],
   );
 

package/src/molecules/StepProgress/StepProgress.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { View, StyleSheet, ViewStyle } from "react-native";
+import { View, ViewStyle } from "react-native";
 import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
 import { calculateResponsiveSize } from '../../responsive';
 import { STEP_INDICATOR } from '../../constants';
@@ -20,24 +20,23 @@ export const StepProgress: React.FC<StepProgressProps> = ({
     const spacingMultiplier = tokens.spacingMultiplier;
 
     const styles = useMemo(
-        () =>
-            StyleSheet.create({
-                container: {
-                    flexDirection: "row",
-                    gap: tokens.spacing.sm,
-                    paddingHorizontal: tokens.spacing.md,
-                    paddingVertical: tokens.spacing.md,
-                },
-                step: {
-                    flex: 1,
-                    height: calculateResponsiveSize(STEP_INDICATOR.progressBar.height, spacingMultiplier),
-                    borderRadius: calculateResponsiveSize(STEP_INDICATOR.progressBar.borderRadius, spacingMultiplier),
-                    backgroundColor: tokens.colors.border,
-                },
-                activeStep: {
-                    backgroundColor: tokens.colors.primary,
-                },
-            }),
+        () => ({
+            container: {
+                flexDirection: "row" as const,
+                gap: tokens.spacing.sm,
+                paddingHorizontal: tokens.spacing.md,
+                paddingVertical: tokens.spacing.md,
+            },
+            step: {
+                flex: 1,
+                height: calculateResponsiveSize(STEP_INDICATOR.progressBar.height, spacingMultiplier),
+                borderRadius: calculateResponsiveSize(STEP_INDICATOR.progressBar.borderRadius, spacingMultiplier),
+                backgroundColor: tokens.colors.border,
+            },
+            activeStep: {
+                backgroundColor: tokens.colors.primary,
+            },
+        }),
         [tokens, spacingMultiplier],
     );
 

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

@@ -1,6 +1,6 @@
 
 import React, { useMemo, useCallback } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
@@ -8,10 +8,10 @@ import type { ActionFooterProps } from './types';
 import { calculateResponsiveSize } from '../../responsive';
 import { NAVIGATION } from '../../constants';
 
-const createStyles = (spacingMultiplier: number) => StyleSheet.create({
+const createStyles = (spacingMultiplier: number) => ({
   container: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
     paddingVertical: 0,
     gap: 0,
   },
@@ -20,8 +20,8 @@ const createStyles = (spacingMultiplier: number) => StyleSheet.create({
     height: calculateResponsiveSize(NAVIGATION.backButton.height, spacingMultiplier),
     borderRadius: 0,
     backgroundColor: '',
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: 'center' as const,
+    alignItems: 'center' as const,
     borderWidth: 1,
     borderColor: '',
   },
@@ -29,13 +29,13 @@ const createStyles = (spacingMultiplier: number) => StyleSheet.create({
     flex: 1,
     height: calculateResponsiveSize(NAVIGATION.backButton.height, spacingMultiplier),
     borderRadius: 0,
-    overflow: 'hidden',
+    overflow: 'hidden' as const,
   },
   actionContent: {
     flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'flex-start' as const,
     backgroundColor: '',
     gap: 0,
     paddingHorizontal: 0,

package/src/molecules/alerts/AlertModal.tsx

@@ -2,8 +2,8 @@
  * AlertModal Component
  */
 
-import React, { useMemo } from 'react';
-import { StyleSheet, View, Modal, Pressable } from 'react-native';
+import React, { useMemo, useCallback } from 'react';
+import { View, Modal, Pressable } from 'react-native';
 import { AtomicButton, AtomicText, AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType } from './AlertTypes';
@@ -35,43 +35,54 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
     const iconName = getAlertIconName(alert.type);
     const hasTwoActions = alert.actions.length === 2;
 
-    const styles = useMemo(() => StyleSheet.create({
+    const handleActionPress = useCallback(async (action: typeof alert.actions[0]) => {
+        await action.onPress();
+        if (action.closeOnPress ?? true) {
+            handleClose();
+        }
+    }, [handleClose]);
+
+    const styles = useMemo(() => ({
         overlay: {
             flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
+            justifyContent: 'center' as const,
+            alignItems: 'center' as const,
             padding: calculateResponsiveSize(MODAL_SIZES.overlayPadding, spacingMultiplier),
         },
         backdrop: {
-            ...StyleSheet.absoluteFillObject,
+            position: 'absolute' as const,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
             backgroundColor: 'rgba(0,0,0,0.55)',
         },
         modal: {
             width: '100%',
             maxWidth: calculateResponsiveSize(MODAL_SIZES.maxWidth, spacingMultiplier),
             padding: calculateResponsiveSize(MODAL_SIZES.padding, spacingMultiplier),
-            alignItems: 'center',
+            alignItems: 'center' as const,
         },
         iconCircle: {
             width: calculateResponsiveSize(ALERT_MODAL_ICON.width, spacingMultiplier),
             height: calculateResponsiveSize(ALERT_MODAL_ICON.height, spacingMultiplier),
             borderRadius: calculateResponsiveSize(ALERT_MODAL_ICON.borderRadius, spacingMultiplier),
-            justifyContent: 'center',
-            alignItems: 'center',
+            justifyContent: 'center' as const,
+            alignItems: 'center' as const,
             marginBottom: calculateResponsiveSize(ALERT_MODAL_ICON.marginBottom, spacingMultiplier),
         },
         title: {
-            fontWeight: '700',
-            textAlign: 'center',
+            fontWeight: '700' as const,
+            textAlign: 'center' as const,
             marginBottom: tokens.spacing.sm,
         },
         message: {
-            textAlign: 'center',
+            textAlign: 'center' as const,
             lineHeight: calculateResponsiveSize(24, spacingMultiplier),
             opacity: 0.85,
         },
         actionsRow: {
-            flexDirection: 'row',
+            flexDirection: 'row' as const,
             width: '100%',
         },
         actionsColumn: {
@@ -170,12 +181,7 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                                         : action.style === 'secondary' ? 'outline'
                                         : 'primary'
                                     }
-                                    onPress={async () => {
-                                        await action.onPress();
-                                        if (action.closeOnPress ?? true) {
-                                            handleClose();
-                                        }
-                                    }}
+                                    onPress={() => handleActionPress(action)}
                                     fullWidth={!hasTwoActions}
                                     style={hasTwoActions ? styles.actionButtonHalf : undefined}
                                 />

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

@@ -56,6 +56,10 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
     onChange?.(-1);
   }, [onClose, onChange]);
 
+  const handleContentPress = useCallback((e: any) => {
+    e.stopPropagation();
+  }, []);
+
   useImperativeHandle(ref, () => ({
     snapToIndex: (index: number) => {
       if (index >= 0) present();
@@ -107,7 +111,7 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
     >
       <Pressable style={styles.overlay} onPress={dismiss} accessibilityLabel="Close" accessibilityRole="button">
         <View style={styles.container}>
-          <Pressable onPress={(e) => e.stopPropagation()} style={styles.content} accessibilityRole="none">
+          <Pressable onPress={handleContentPress} style={styles.content} accessibilityRole="none">
             <View style={styles.handle} />
             {children}
           </Pressable>

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

@@ -55,11 +55,11 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
 
     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,
@@ -67,19 +67,20 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
         borderTopLeftRadius: borderRadius,
         borderTopRightRadius: borderRadius,
         paddingBottom: Math.max(insets.bottom, tokens.spacing.xs),
+        width: '100%' as const,
+      },
+      contentWrapper: {
+        flex: 1,
       },
       handle: {
         width: calculateResponsiveSize(BOTTOM_SHEET_HANDLE.width, spacingMultiplier),
         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,
       },
-      content: {
-        flex: 1,
-      },
     }), [sheetHeight, backgroundColor, tokens, borderRadius, insets.bottom, spacingMultiplier]);
 
     return (
@@ -91,13 +92,13 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
         statusBarTranslucent
       >
         <View style={styles.overlay}>
-          <Pressable 
-            style={StyleSheet.absoluteFill} 
+          <Pressable
+            style={StyleSheet.absoluteFill}
             onPress={dismiss}
             accessibilityLabel="Close modal"
           />
-          <View style={[styles.container, { width: '100%' }]}>
-            <View style={{ flex: 1 }}>
+          <View style={styles.container}>
+            <View style={styles.contentWrapper}>
               <View style={styles.handle} />
               {children}
             </View>

package/src/molecules/circular-menu/CircularMenuItem.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicIcon } from "../../atoms";
 import { AtomicText } from "../../atoms";
 import { useAppDesignTokens } from "../../theme";
@@ -20,22 +20,29 @@ export const CircularMenuItem: React.FC<CircularMenuItemProps> = React.memo(({
   const tokens = useAppDesignTokens();
   const spacingMultiplier = tokens.spacingMultiplier;
 
-  const styles = useMemo(() => StyleSheet.create({
+  const styles = useMemo(() => ({
     container: {
-      alignItems: "center",
+      alignItems: "center" as const,
       gap: 6,
       width: LAYOUT.ITEM_SIZE,
     },
     iconContainer: {
-      justifyContent: "center",
-      alignItems: "center",
+      justifyContent: "center" as const,
+      alignItems: "center" as const,
+      backgroundColor: tokens.colors.surfaceVariant,
+      width: LAYOUT.ICON_SIZE,
+      height: LAYOUT.ICON_SIZE,
+      borderRadius: LAYOUT.ICON_SIZE / 2,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
     },
     label: {
       fontSize: calculateResponsiveSize(11, spacingMultiplier),
-      fontWeight: "500",
-      textAlign: "center",
+      fontWeight: "500" as const,
+      textAlign: "center" as const,
+      color: tokens.colors.textPrimary,
     },
-  }), [spacingMultiplier]);
+  }), [spacingMultiplier, tokens.colors.surfaceVariant, tokens.colors.border, tokens.colors.textPrimary]);
 
   return (
     <TouchableOpacity
@@ -45,24 +52,12 @@ export const CircularMenuItem: React.FC<CircularMenuItemProps> = React.memo(({
       accessibilityRole="button"
       accessibilityLabel={label}
     >
-      <View
-        style={[
-          styles.iconContainer,
-          {
-            backgroundColor: tokens.colors.surfaceVariant,
-            width: LAYOUT.ICON_SIZE,
-            height: LAYOUT.ICON_SIZE,
-            borderRadius: LAYOUT.ICON_SIZE / 2,
-            borderWidth: 1,
-            borderColor: tokens.colors.border,
-          },
-        ]}
-      >
+      <View style={styles.iconContainer}>
         <AtomicIcon name={icon} size="lg" color="primary" />
       </View>
       <AtomicText
         type="labelSmall"
-        style={[styles.label, { color: tokens.colors.textPrimary }]}
+        style={styles.label}
       >
         {label}
       </AtomicText>

package/src/molecules/countdown/components/CountdownHeader.tsx

@@ -30,9 +30,29 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
         [spacingMultiplier]
     );
 
+    const containerStyle = useMemo(() => [
+        styles.container,
+        { marginBottom: tokens.spacing.md },
+    ], [tokens.spacing.md]);
+
+    const titleRowStyle = useMemo(() => [
+        styles.titleRow,
+        { gap: tokens.spacing.sm },
+    ], [tokens.spacing.sm]);
+
+    const toggleButtonStyle = useMemo(() => [
+        styles.toggleButton,
+        {
+            backgroundColor: tokens.colors.surfaceSecondary,
+            width: toggleButtonSize,
+            height: toggleButtonSize,
+            borderRadius: toggleButtonSize / 2,
+        },
+    ], [styles.toggleButton, tokens.colors.surfaceSecondary, toggleButtonSize]);
+
     return (
-        <View style={[styles.container, { marginBottom: tokens.spacing.md }]}>
-            <View style={[styles.titleRow, { gap: tokens.spacing.sm }]}>
+        <View style={containerStyle}>
+            <View style={titleRowStyle}>
                 {icon && (
                     <AtomicIcon
                         name={icon}
@@ -51,15 +71,7 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
 
             {showToggle && onToggle && (
                 <TouchableOpacity
-                    style={[
-                        styles.toggleButton,
-                        {
-                            backgroundColor: tokens.colors.surfaceSecondary,
-                            width: toggleButtonSize,
-                            height: toggleButtonSize,
-                            borderRadius: toggleButtonSize / 2,
-                        },
-                    ]}
+                    style={toggleButtonStyle}
                     onPress={onToggle}
                     accessibilityRole="button"
                     accessibilityLabel="Toggle view"

package/src/molecules/countdown/components/TimeUnit.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import { AtomicText } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
 import { calculateResponsiveSize } from '../../../responsive';
@@ -19,25 +19,25 @@ export const TimeUnit: React.FC<TimeUnitProps> = ({
     const tokens = useAppDesignTokens();
     const spacingMultiplier = tokens.spacingMultiplier;
 
-    const styles = useMemo(() => StyleSheet.create({
+    const styles = useMemo(() => ({
         container: {
             flex: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
         },
         value: {
-            fontWeight: '700',
+            fontWeight: '700' as const,
             lineHeight: calculateResponsiveSize(38, spacingMultiplier),
         },
         label: {
-            fontWeight: '600',
+            fontWeight: '600' as const,
             marginTop: calculateResponsiveSize(2, spacingMultiplier),
             letterSpacing: 1,
-            textTransform: 'uppercase',
+            textTransform: 'uppercase' as const,
         },
     }), [spacingMultiplier]);
 
-    const sizeConfig = {
+    const sizeConfig = useMemo(() => ({
         small: {
             fontSize: calculateResponsiveSize(COUNTDOWN_SIZES.small.fontSize, spacingMultiplier),
             padding: tokens.spacing.sm,
@@ -53,7 +53,7 @@ export const TimeUnit: React.FC<TimeUnitProps> = ({
             padding: tokens.spacing.lg,
             minHeight: calculateResponsiveSize(COUNTDOWN_SIZES.large.minHeight, spacingMultiplier),
         },
-    };
+    }), [spacingMultiplier, tokens.spacing.sm, tokens.spacing.md, tokens.spacing.lg]);
 
     const config = sizeConfig[size];
 
@@ -70,23 +70,28 @@ export const TimeUnit: React.FC<TimeUnitProps> = ({
 
     const calculatedFontSize = config.fontSize * fontSizeMultiplier;
 
+    const containerStyle = useMemo(() => [
+        styles.container,
+        {
+            backgroundColor: tokens.colors.surfaceSecondary,
+            borderRadius: tokens.borders.radius.lg,
+            paddingVertical: config.padding,
+            minHeight: config.minHeight,
+            paddingHorizontal: tokens.spacing.xs,
+        },
+    ], [styles.container, tokens.colors.surfaceSecondary, tokens.borders.radius.lg, config.padding, config.minHeight, tokens.spacing.xs]);
+
+    const valueStyle = useMemo(() => [
+        styles.value,
+        { fontSize: calculatedFontSize },
+    ], [styles.value, calculatedFontSize]);
+
     return (
-        <View
-            style={[
-                styles.container,
-                {
-                    backgroundColor: tokens.colors.surfaceSecondary,
-                    borderRadius: tokens.borders.radius.lg,
-                    paddingVertical: config.padding,
-                    minHeight: config.minHeight,
-                    paddingHorizontal: tokens.spacing.xs,
-                },
-            ]}
-        >
+        <View style={containerStyle}>
             <AtomicText
                 type="displaySmall"
                 color="onSurface"
-                style={[styles.value, { fontSize: calculatedFontSize }]}
+                style={valueStyle}
                 numberOfLines={1}
             >
                 {displayValue}

package/src/molecules/hero-section/HeroSection.tsx

@@ -1,6 +1,6 @@
 
 import React, { useMemo } from 'react';
-import { View, StyleSheet, Text, Image } from 'react-native';
+import { View, Text, Image } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import type { HeroSectionProps } from './types';
 import { calculateResponsiveSize } from '../../responsive';
@@ -28,7 +28,11 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
         overflow: 'hidden' as const,
       },
       background: {
-        ...StyleSheet.absoluteFillObject,
+        position: 'absolute' as const,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
         backgroundColor: tokens.colors.surfaceVariant,
       },
       iconWrapper: {
@@ -46,19 +50,23 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
     [tokens, height, spacingMultiplier],
   );
 
-  const styles = useMemo(() => StyleSheet.create({
+  const styles = useMemo(() => ({
     image: {
-      ...StyleSheet.absoluteFillObject,
+      position: 'absolute' as const,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
       width: '100%',
       height: '100%',
     },
     emoji: {
       fontSize: calculateResponsiveSize(64, spacingMultiplier),
-      textAlign: 'left',
+      textAlign: 'left' as const,
       includeFontPadding: false,
     },
     fadeOverlay: {
-      position: 'absolute',
+      position: 'absolute' as const,
       bottom: -1,
       left: 0,
       right: 0,

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

@@ -10,7 +10,6 @@ import React, { useCallback, useMemo, useState } from 'react';
 import {
   View,
   TouchableOpacity,
-  StyleSheet,
   type LayoutChangeEvent,
   type StyleProp,
   type ViewStyle,
@@ -152,7 +151,7 @@ export const IconGrid = React.memo<IconGridProps>(({
   // Stable renderItem with memoization
   const renderItem = useCallback(({ item }: { item: IconGridItem }) => {
     if (itemWidth === 0) {
-      return <View key={item.id} style={{ width: 0, height: 0 }} />;
+      return <View key={item.id} style={styles.placeholder} />;
     }
 
     return (
@@ -177,7 +176,7 @@ export const IconGrid = React.memo<IconGridProps>(({
     return (
       <View style={gridStyle} onLayout={handleLayout}>
         {items.map((item) => (
-          <View key={item.id} style={{ width: 0, height: 0 }} />
+          <View key={item.id} style={styles.placeholder} />
         ))}
       </View>
     );
@@ -198,25 +197,29 @@ export const IconGrid = React.memo<IconGridProps>(({
   );
 });
 
-const createStyles = (spacingMultiplier: number) => StyleSheet.create({
+const createStyles = (spacingMultiplier: number) => ({
   grid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexDirection: 'row' as const,
+    flexWrap: 'wrap' as const,
   },
   card: {
-    alignItems: 'center',
+    alignItems: 'center' as const,
     gap: 8,
   },
   iconBox: {
     aspectRatio: 1,
     borderRadius: calculateResponsiveSize(ICON_GRID.borderRadius, spacingMultiplier),
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
     borderWidth: 1,
   },
   label: {
     fontSize: calculateResponsiveSize(ICON_GRID.fontSize, spacingMultiplier),
-    fontWeight: '700',
-    textAlign: 'center',
+    fontWeight: '700' as const,
+    textAlign: 'center' as const,
+  },
+  placeholder: {
+    width: 0,
+    height: 0,
   },
 });