@umituz/react-native-onboarding 3.6.20 → 3.6.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.20",
+  "version": "3.6.22",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -28,10 +28,10 @@
     "url": "https://github.com/umituz/react-native-onboarding"
   },
   "peerDependencies": {
-    "@expo/vector-icons": ">=14.0.0",
-    "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-storage": "latest",
+    "@expo/vector-icons": ">=15.0.0",
+    "@umituz/react-native-design-system": ">=2.0.0",
+    "@umituz/react-native-localization": ">=1.0.0",
+    "@umituz/react-native-storage": ">=2.6.0",
     "expo-image": ">=2.0.0",
     "expo-linear-gradient": ">=13.0.0",
     "expo-video": ">=1.0.0",
@@ -41,7 +41,7 @@
     "zustand": ">=4.5.2"
   },
   "devDependencies": {
-    "@expo/vector-icons": "^14.0.0",
+    "@expo/vector-icons": "^15.0.0",
     "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-native-community/datetimepicker": "^8.2.0",
     "@react-native/eslint-config": "^0.83.1",
@@ -49,9 +49,9 @@
     "@types/react-native": "^0.72.8",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
-    "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-design-system": "^2.1.0",
+    "@umituz/react-native-localization": "^1.9.0",
+    "@umituz/react-native-storage": "^2.6.21",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",

package/src/infrastructure/storage/OnboardingStoreActions.ts

@@ -1,21 +1,26 @@
 /**
  * Onboarding Store Actions
- * Single Responsibility: Async store actions
+ * Single Responsibility: Async store actions interface and factory
  */
 
-import { storageRepository, unwrap } from "@umituz/react-native-storage";
 import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
 import type { OnboardingStoreState } from "./OnboardingStoreState";
-
-const DEFAULT_STORAGE_KEY = "@onboarding:completed";
-const USER_DATA_STORAGE_KEY = "@onboarding:user_data";
+import {
+  initializeAction,
+  completeAction,
+  skipAction,
+  resetAction,
+  saveAnswerAction,
+  setUserDataAction,
+  DEFAULT_STORAGE_KEY,
+} from "./actions";
 
 export interface OnboardingStoreActions {
   initialize: (storageKey?: string) => Promise<void>;
   complete: (storageKey?: string) => Promise<void>;
   skip: (storageKey?: string) => Promise<void>;
   reset: (storageKey?: string) => Promise<void>;
-  saveAnswer: (questionId: string, answer: any) => Promise<void>;
+  saveAnswer: (questionId: string, answer: unknown) => Promise<void>;
   setUserData: (data: OnboardingUserData) => Promise<void>;
 }
 
@@ -24,193 +29,22 @@ export function createOnboardingStoreActions(
   get: () => OnboardingStoreState
 ): OnboardingStoreActions {
   return {
-    initialize: async (storageKey = DEFAULT_STORAGE_KEY) => {
-      try {
-        set({ loading: true, error: null });
-
-        const completionResult = await storageRepository.getString(storageKey, "false");
-        const isComplete = unwrap(completionResult, "false") === "true";
-
-        const userDataResult = await storageRepository.getItem<OnboardingUserData>(
-          USER_DATA_STORAGE_KEY,
-          { answers: {} }
-        );
-        const userData = unwrap(userDataResult, { answers: {} });
-
-        set({
-          isOnboardingComplete: isComplete,
-          userData,
-          loading: false,
-          error: completionResult.success ? null : "Failed to load onboarding status",
-        });
-
-        if (__DEV__) {
-          console.log('[OnboardingStore] Initialized with completion status:', isComplete);
-        }
-      } catch (error) {
-        set({
-          loading: false,
-          error: error instanceof Error ? error.message : "Failed to initialize onboarding",
-        });
-
-        if (__DEV__) {
-          console.error('[OnboardingStore] Initialization error:', error);
-        }
-      }
-    },
-
-    complete: async (storageKey = DEFAULT_STORAGE_KEY) => {
-      try {
-        set({ loading: true, error: null });
-
-        // Ensure storage write completes before proceeding
-        const result = await storageRepository.setString(storageKey, "true");
-
-        if (!result.success) {
-          throw new Error("Failed to save completion status to storage");
-        }
-
-        const userData = { ...get().userData };
-        userData.completedAt = new Date().toISOString();
-
-        const userDataResult = await storageRepository.setItem(USER_DATA_STORAGE_KEY, userData);
-
-        if (!userDataResult.success) {
-          throw new Error("Failed to save user data to storage");
-        }
-
-        // Only update state after storage write is confirmed
-        set({
-          isOnboardingComplete: true,
-          userData,
-          loading: false,
-          error: null,
-        });
-
-        if (__DEV__) {
-          console.log('[OnboardingStore] Onboarding completed and persisted successfully');
-        }
-      } catch (error) {
-        set({
-          loading: false,
-          error: error instanceof Error ? error.message : "Failed to complete onboarding",
-        });
-
-        if (__DEV__) {
-          console.error('[OnboardingStore] Completion error:', error);
-        }
-
-        throw error;
-      }
-    },
+    initialize: (storageKey = DEFAULT_STORAGE_KEY) =>
+      initializeAction(set, storageKey),
 
-    skip: async (storageKey = DEFAULT_STORAGE_KEY) => {
-      try {
-        set({ loading: true, error: null });
+    complete: (storageKey = DEFAULT_STORAGE_KEY) =>
+      completeAction(set, get, storageKey),
 
-        // Ensure storage write completes before proceeding
-        const result = await storageRepository.setString(storageKey, "true");
+    skip: (storageKey = DEFAULT_STORAGE_KEY) =>
+      skipAction(set, get, storageKey),
 
-        if (!result.success) {
-          throw new Error("Failed to save skip status to storage");
-        }
+    reset: (storageKey = DEFAULT_STORAGE_KEY) =>
+      resetAction(set, storageKey),
 
-        const userData = { ...get().userData };
-        userData.skipped = true;
-        userData.completedAt = new Date().toISOString();
+    saveAnswer: (questionId: string, answer: unknown) =>
+      saveAnswerAction(set, get, questionId, answer),
 
-        const userDataResult = await storageRepository.setItem(USER_DATA_STORAGE_KEY, userData);
-
-        if (!userDataResult.success) {
-          throw new Error("Failed to save user data to storage");
-        }
-
-        // Only update state after storage write is confirmed
-        set({
-          isOnboardingComplete: true,
-          userData,
-          loading: false,
-          error: null,
-        });
-
-        if (__DEV__) {
-          console.log('[OnboardingStore] Onboarding skipped and persisted successfully');
-        }
-      } catch (error) {
-        set({
-          loading: false,
-          error: error instanceof Error ? error.message : "Failed to skip onboarding",
-        });
-
-        if (__DEV__) {
-          console.error('[OnboardingStore] Skip error:', error);
-        }
-
-        throw error;
-      }
-    },
-
-    reset: async (storageKey = DEFAULT_STORAGE_KEY) => {
-      try {
-        set({ loading: true, error: null });
-
-        const result = await storageRepository.removeItem(storageKey);
-        await storageRepository.removeItem(USER_DATA_STORAGE_KEY);
-
-        set({
-          isOnboardingComplete: false,
-          currentStep: 0,
-          userData: { answers: {} },
-          loading: false,
-          error: result.success ? null : "Failed to reset onboarding",
-        });
-
-        if (__DEV__) {
-          console.log('[OnboardingStore] Onboarding reset successfully');
-        }
-      } catch (error) {
-        set({
-          loading: false,
-          error: error instanceof Error ? error.message : "Failed to reset onboarding",
-        });
-
-        if (__DEV__) {
-          console.error('[OnboardingStore] Reset error:', error);
-        }
-      }
-    },
-
-    saveAnswer: async (questionId: string, answer: any) => {
-      try {
-        const userData = { ...get().userData };
-        userData.answers[questionId] = answer;
-
-        await storageRepository.setItem(USER_DATA_STORAGE_KEY, userData);
-        set({ userData });
-
-        if (__DEV__) {
-          console.log('[OnboardingStore] Answer saved for question:', questionId);
-        }
-      } catch (error) {
-        if (__DEV__) {
-          console.error('[OnboardingStore] Failed to save answer:', error);
-        }
-      }
-    },
-
-    setUserData: async (data: OnboardingUserData) => {
-      try {
-        await storageRepository.setItem(USER_DATA_STORAGE_KEY, data);
-        set({ userData: data });
-
-        if (__DEV__) {
-          console.log('[OnboardingStore] User data updated successfully');
-        }
-      } catch (error) {
-        if (__DEV__) {
-          console.error('[OnboardingStore] Failed to set user data:', error);
-        }
-      }
-    },
+    setUserData: (data: OnboardingUserData) =>
+      setUserDataAction(set, data),
   };
-}
+}

package/src/infrastructure/storage/actions/answerActions.ts

@@ -0,0 +1,47 @@
+/**
+ * Answer Actions
+ * Single Responsibility: Save and update user answers
+ */
+
+import { storageRepository } from "@umituz/react-native-storage";
+import type { OnboardingUserData } from "../../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "../OnboardingStoreState";
+import { USER_DATA_STORAGE_KEY, handleError, logSuccess } from "./storageHelpers";
+
+export async function saveAnswerAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  get: () => OnboardingStoreState,
+  questionId: string,
+  answer: unknown
+): Promise<void> {
+  try {
+    const userData: OnboardingUserData = {
+      ...get().userData,
+      answers: {
+        ...get().userData.answers,
+        [questionId]: answer,
+      },
+    };
+
+    await storageRepository.setItem(USER_DATA_STORAGE_KEY, userData);
+    set({ userData });
+
+    logSuccess(`Answer saved for question: ${questionId}`);
+  } catch (error) {
+    handleError(error, "save answer");
+  }
+}
+
+export async function setUserDataAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  data: OnboardingUserData
+): Promise<void> {
+  try {
+    await storageRepository.setItem(USER_DATA_STORAGE_KEY, data);
+    set({ userData: data });
+
+    logSuccess("User data updated successfully");
+  } catch (error) {
+    handleError(error, "set user data");
+  }
+}

package/src/infrastructure/storage/actions/completeAction.ts

@@ -0,0 +1,45 @@
+/**
+ * Complete Action
+ * Single Responsibility: Mark onboarding as completed
+ */
+
+import type { OnboardingUserData } from "../../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "../OnboardingStoreState";
+import {
+  saveCompletionStatus,
+  saveUserData,
+  handleError,
+  logSuccess,
+} from "./storageHelpers";
+
+export async function completeAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  get: () => OnboardingStoreState,
+  storageKey: string
+): Promise<void> {
+  try {
+    set({ loading: true, error: null });
+
+    await saveCompletionStatus(storageKey);
+
+    const userData: OnboardingUserData = {
+      ...get().userData,
+      completedAt: new Date().toISOString(),
+    };
+
+    await saveUserData(userData);
+
+    set({
+      isOnboardingComplete: true,
+      userData,
+      loading: false,
+      error: null,
+    });
+
+    logSuccess("Onboarding completed and persisted successfully");
+  } catch (error) {
+    const errorMessage = handleError(error, "complete onboarding");
+    set({ loading: false, error: errorMessage });
+    throw error;
+  }
+}

package/src/infrastructure/storage/actions/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Actions Index
+ * Single Responsibility: Export all action functions
+ */
+
+export {
+  loadCompletionStatus,
+  loadUserData,
+  saveCompletionStatus,
+  saveUserData,
+  removeStorageKeys,
+  handleError,
+  logSuccess,
+  DEFAULT_STORAGE_KEY,
+  USER_DATA_STORAGE_KEY,
+} from "./storageHelpers";
+
+export { initializeAction } from "./initializeAction";
+export { completeAction } from "./completeAction";
+export { skipAction } from "./skipAction";
+export { resetAction } from "./resetAction";
+export { saveAnswerAction, setUserDataAction } from "./answerActions";

package/src/infrastructure/storage/actions/initializeAction.ts

@@ -0,0 +1,40 @@
+/**
+ * Initialize Action
+ * Single Responsibility: Load initial onboarding state from storage
+ */
+
+import type { OnboardingUserData } from "../../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "../OnboardingStoreState";
+import {
+  loadCompletionStatus,
+  loadUserData,
+  handleError,
+  logSuccess,
+} from "./storageHelpers";
+
+export async function initializeAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  storageKey: string
+): Promise<void> {
+  try {
+    set({ loading: true, error: null });
+
+    const isComplete = await loadCompletionStatus(storageKey);
+    const defaultData: OnboardingUserData = { answers: {} };
+    const userData = await loadUserData(defaultData);
+
+    set({
+      isOnboardingComplete: isComplete,
+      userData,
+      loading: false,
+      error: null,
+    });
+
+    logSuccess(`Initialized with completion status: ${isComplete}`);
+  } catch (error) {
+    set({
+      loading: false,
+      error: handleError(error, "initialize onboarding"),
+    });
+  }
+}

package/src/infrastructure/storage/actions/resetAction.ts

@@ -0,0 +1,37 @@
+/**
+ * Reset Action
+ * Single Responsibility: Reset onboarding state
+ */
+
+import type { OnboardingStoreState } from "../OnboardingStoreState";
+import {
+  removeStorageKeys,
+  handleError,
+  logSuccess,
+} from "./storageHelpers";
+
+export async function resetAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  storageKey: string
+): Promise<void> {
+  try {
+    set({ loading: true, error: null });
+
+    await removeStorageKeys(storageKey);
+
+    set({
+      isOnboardingComplete: false,
+      currentStep: 0,
+      userData: { answers: {} },
+      loading: false,
+      error: null,
+    });
+
+    logSuccess("Onboarding reset successfully");
+  } catch (error) {
+    set({
+      loading: false,
+      error: handleError(error, "reset onboarding"),
+    });
+  }
+}

package/src/infrastructure/storage/actions/skipAction.ts

@@ -0,0 +1,46 @@
+/**
+ * Skip Action
+ * Single Responsibility: Mark onboarding as skipped
+ */
+
+import type { OnboardingUserData } from "../../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "../OnboardingStoreState";
+import {
+  saveCompletionStatus,
+  saveUserData,
+  handleError,
+  logSuccess,
+} from "./storageHelpers";
+
+export async function skipAction(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  get: () => OnboardingStoreState,
+  storageKey: string
+): Promise<void> {
+  try {
+    set({ loading: true, error: null });
+
+    await saveCompletionStatus(storageKey);
+
+    const userData: OnboardingUserData = {
+      ...get().userData,
+      skipped: true,
+      completedAt: new Date().toISOString(),
+    };
+
+    await saveUserData(userData);
+
+    set({
+      isOnboardingComplete: true,
+      userData,
+      loading: false,
+      error: null,
+    });
+
+    logSuccess("Onboarding skipped and persisted successfully");
+  } catch (error) {
+    const errorMessage = handleError(error, "skip onboarding");
+    set({ loading: false, error: errorMessage });
+    throw error;
+  }
+}

package/src/infrastructure/storage/actions/storageHelpers.ts

@@ -0,0 +1,60 @@
+/**
+ * Storage Helpers
+ * Single Responsibility: Common storage operations and error handling
+ */
+
+import { storageRepository, unwrap } from "@umituz/react-native-storage";
+import type { OnboardingUserData } from "../../../domain/entities/OnboardingUserData";
+
+export const DEFAULT_STORAGE_KEY = "@onboarding:completed";
+export const USER_DATA_STORAGE_KEY = "@onboarding:user_data";
+
+export async function loadCompletionStatus(storageKey: string): Promise<boolean> {
+  const result = await storageRepository.getString(storageKey, "false");
+  return unwrap(result, "false") === "true";
+}
+
+export async function loadUserData(
+  defaultData: OnboardingUserData
+): Promise<OnboardingUserData> {
+  const result = await storageRepository.getItem<OnboardingUserData>(
+    USER_DATA_STORAGE_KEY,
+    defaultData
+  );
+  return unwrap(result, defaultData);
+}
+
+export async function saveCompletionStatus(storageKey: string): Promise<void> {
+  const result = await storageRepository.setString(storageKey, "true");
+  if (!result.success) {
+    throw new Error("Failed to save completion status to storage");
+  }
+}
+
+export async function saveUserData(data: OnboardingUserData): Promise<void> {
+  const result = await storageRepository.setItem(USER_DATA_STORAGE_KEY, data);
+  if (!result.success) {
+    throw new Error("Failed to save user data to storage");
+  }
+}
+
+export async function removeStorageKeys(storageKey: string): Promise<void> {
+  await storageRepository.removeItem(storageKey);
+  await storageRepository.removeItem(USER_DATA_STORAGE_KEY);
+}
+
+export function handleError(error: unknown, context: string): string {
+  const message = error instanceof Error ? error.message : `Failed to ${context}`;
+
+  if (__DEV__) {
+    console.error(`[OnboardingStore] ${context} error:`, error);
+  }
+
+  return message;
+}
+
+export function logSuccess(message: string): void {
+  if (__DEV__) {
+    console.log(`[OnboardingStore] ${message}`);
+  }
+}

package/src/presentation/components/questions/MultipleChoiceQuestion.tsx

@@ -1,9 +1,15 @@
+/**
+ * Multiple Choice Question Component
+ * Single Responsibility: Render multiple choice question with options
+ */
+
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import { ensureArray } from "../../../infrastructure/utils/arrayUtils";
-import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+import { QuestionOptionItem } from "./QuestionOptionItem";
 
 export interface MultipleChoiceQuestionProps {
   question: OnboardingQuestion;
@@ -32,64 +38,23 @@ export const MultipleChoiceQuestion = ({
     }
     onChange(newValue);
   };
-  const renderOption = (option: QuestionOption) => {
-    const isSelected = safeValue.includes(option.id);
-    const isEmoji = option.iconType === 'emoji';
-
-    return (
-      <TouchableOpacity
-        key={option.id}
-        style={[
-          styles.option,
-          {
-            backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
-            borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
-            borderWidth: isSelected ? 2 : 1,
-          }
-        ]}
-        onPress={() => handleToggle(option.id)}
-        activeOpacity={0.8}
-      >
-        {option.icon && (
-          <View style={[
-            styles.optionIcon,
-            { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
-          ]}>
-            {isEmoji ? (
-              <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
-            ) : (
-              <AtomicIcon
-                name={option.icon as any}
-                customSize={20}
-                customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
-              />
-            )}
-          </View>
-        )}
-        <AtomicText type="bodyLarge" style={[styles.optionLabel, { color: isSelected ? colors.textColor : colors.subTextColor, fontWeight: isSelected ? '700' : '500' }]}>
-          {option.label}
-        </AtomicText>
-        <View style={[
-          styles.checkbox,
-          {
-            borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
-            backgroundColor: isSelected ? colors.iconColor : 'transparent',
-            borderWidth: isSelected ? 0 : 2,
-          }
-        ]}>
-          {isSelected && (
-            <AtomicIcon name="checkmark" customSize={16} customColor={colors.buttonTextColor} />
-          )}
-        </View>
-      </TouchableOpacity>
-    );
-  };
 
   return (
     <View style={styles.container}>
-      {question.options?.map(renderOption)}
+      {question.options?.map((option) => (
+        <QuestionOptionItem
+          key={option.id}
+          option={option}
+          isSelected={safeValue.includes(option.id)}
+          onPress={() => handleToggle(option.id)}
+          colors={colors}
+        />
+      ))}
       {question.validation?.maxSelections && (
-        <AtomicText type="labelSmall" style={[styles.hint, { color: colors.subTextColor }]}>
+        <AtomicText
+          type="labelSmall"
+          style={[styles.hint, { color: colors.subTextColor }]}
+        >
           Select up to {question.validation.maxSelections} options
         </AtomicText>
       )}
@@ -102,36 +67,8 @@ const styles = StyleSheet.create({
     width: "100%",
     gap: 12,
   },
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderRadius: 20,
-    padding: 16,
-    marginBottom: 8,
-  },
-  optionIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  optionLabel: {
-    flex: 1,
-    fontSize: 16,
-  },
-  checkbox: {
-    width: 24,
-    height: 24,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
-  },
   hint: {
     textAlign: "center",
     marginTop: 8,
   },
 });
-
-

package/src/presentation/components/questions/QuestionOptionItem.tsx

@@ -0,0 +1,115 @@
+/**
+ * Question Option Item Component
+ * Single Responsibility: Render a single selectable option
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import type { QuestionOption } from "../../../domain/entities/OnboardingQuestion";
+import type { OnboardingColors } from "../../types/OnboardingTheme";
+
+export interface QuestionOptionItemProps {
+  option: QuestionOption;
+  isSelected: boolean;
+  onPress: () => void;
+  colors: OnboardingColors;
+}
+
+export const QuestionOptionItem = ({
+  option,
+  isSelected,
+  onPress,
+  colors,
+}: QuestionOptionItemProps) => {
+  const isEmoji = option.iconType === 'emoji';
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.option,
+        {
+          backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
+          borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
+          borderWidth: isSelected ? 2 : 1,
+        }
+      ]}
+      onPress={onPress}
+      activeOpacity={0.8}
+    >
+      {option.icon && (
+        <View style={[
+          styles.optionIcon,
+          { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
+        ]}>
+          {isEmoji ? (
+            <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
+          ) : (
+            <AtomicIcon
+              name={option.icon as any}
+              customSize={20}
+              customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
+            />
+          )}
+        </View>
+      )}
+      <AtomicText
+        type="bodyLarge"
+        style={[
+          styles.optionLabel,
+          {
+            color: isSelected ? colors.textColor : colors.subTextColor,
+            fontWeight: isSelected ? '700' : '500'
+          }
+        ]}
+      >
+        {option.label}
+      </AtomicText>
+      <View style={[
+        styles.checkbox,
+        {
+          borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
+          backgroundColor: isSelected ? colors.iconColor : 'transparent',
+          borderWidth: isSelected ? 0 : 2,
+        }
+      ]}>
+        {isSelected && (
+          <AtomicIcon
+            name="checkmark"
+            customSize={16}
+            customColor={colors.buttonTextColor}
+          />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 20,
+    padding: 16,
+    marginBottom: 8,
+  },
+  optionIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  optionLabel: {
+    flex: 1,
+    fontSize: 16,
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/hooks/useOnboardingScreenHandlers.ts

@@ -0,0 +1,114 @@
+/**
+ * useOnboardingScreenHandlers Hook
+ * Single Responsibility: Handle onboarding screen user interactions
+ */
+
+import { useCallback } from "react";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { SlideManager } from "../../infrastructure/services/SlideManager";
+
+export interface UseOnboardingScreenHandlersProps {
+  filteredSlides: OnboardingSlide[];
+  currentSlide: OnboardingSlide | undefined;
+  currentIndex: number;
+  isLastSlide: boolean;
+  saveCurrentAnswer: (slide: OnboardingSlide) => Promise<void>;
+  completeOnboarding: () => Promise<void>;
+  goToNext: () => void;
+  goToPrevious: () => void;
+  skipOnboarding: () => Promise<void>;
+  loadAnswerForSlide: (slide: OnboardingSlide) => void;
+}
+
+export interface UseOnboardingScreenHandlersReturn {
+  handleNext: () => Promise<void>;
+  handlePrevious: () => void;
+  handleSkip: () => Promise<void>;
+}
+
+export function useOnboardingScreenHandlers({
+  filteredSlides,
+  currentSlide,
+  currentIndex,
+  isLastSlide,
+  saveCurrentAnswer,
+  completeOnboarding,
+  goToNext,
+  goToPrevious,
+  skipOnboarding,
+  loadAnswerForSlide,
+}: UseOnboardingScreenHandlersProps): UseOnboardingScreenHandlersReturn {
+  const handleNext = useCallback(async () => {
+    if (!currentSlide) return;
+
+    try {
+      await saveCurrentAnswer(currentSlide);
+
+      if (isLastSlide) {
+        await completeOnboarding();
+      } else {
+        goToNext();
+
+        const nextSlide = SlideManager.getSlideAtIndex(
+          filteredSlides,
+          currentIndex + 1
+        );
+
+        if (nextSlide) {
+          loadAnswerForSlide(nextSlide);
+        }
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[useOnboardingScreenHandlers] Error in handleNext:", error);
+      }
+    }
+  }, [
+    currentSlide,
+    isLastSlide,
+    saveCurrentAnswer,
+    completeOnboarding,
+    goToNext,
+    filteredSlides,
+    currentIndex,
+    loadAnswerForSlide,
+  ]);
+
+  const handlePrevious = useCallback(() => {
+    try {
+      goToPrevious();
+
+      const prevSlide = SlideManager.getSlideAtIndex(
+        filteredSlides,
+        currentIndex - 1
+      );
+
+      if (prevSlide) {
+        loadAnswerForSlide(prevSlide);
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error(
+          "[useOnboardingScreenHandlers] Error in handlePrevious:",
+          error
+        );
+      }
+    }
+  }, [goToPrevious, filteredSlides, currentIndex, loadAnswerForSlide]);
+
+  const handleSkip = useCallback(async () => {
+    try {
+      await skipOnboarding();
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[useOnboardingScreenHandlers] Error in handleSkip:", error);
+      }
+    }
+  }, [skipOnboarding]);
+
+  return {
+    handleNext,
+    handlePrevious,
+    handleSkip,
+  };
+}

package/src/presentation/hooks/useOnboardingScreenState.ts

@@ -1,14 +1,15 @@
 /**
  * useOnboardingScreenState Hook
- * Single Responsibility: Coordinate onboarding screen state and handlers
+ * Single Responsibility: Coordinate onboarding screen state
  */
 
-import { useMemo, useCallback, useEffect } from "react";
+import { useMemo, useEffect } from "react";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import { useOnboarding } from "../../infrastructure/storage/OnboardingStore";
 import { useOnboardingNavigation } from "../../infrastructure/hooks/useOnboardingNavigation";
 import { useOnboardingAnswers } from "../../infrastructure/hooks/useOnboardingAnswers";
 import { useOnboardingContainerStyle } from "./useOnboardingContainerStyle";
+import { useOnboardingScreenHandlers } from "./useOnboardingScreenHandlers";
 import { SlideManager } from "../../infrastructure/services/SlideManager";
 import { ValidationManager } from "../../infrastructure/services/ValidationManager";
 import { shouldUseGradient } from "../../infrastructure/utils/gradientUtils";
@@ -27,14 +28,14 @@ export interface UseOnboardingScreenStateReturn {
   currentIndex: number;
   isFirstSlide: boolean;
   isLastSlide: boolean;
-  currentAnswer: any;
+  currentAnswer: unknown;
   isAnswerValid: boolean;
   useGradient: boolean;
-  containerStyle: any;
+  containerStyle: unknown;
   handleNext: () => Promise<void>;
   handlePrevious: () => void;
   handleSkip: () => Promise<void>;
-  setCurrentAnswer: (value: any) => void;
+  setCurrentAnswer: (value: unknown) => void;
 }
 
 export function useOnboardingScreenState({
@@ -46,7 +47,6 @@ export function useOnboardingScreenState({
 }: UseOnboardingScreenStateProps): UseOnboardingScreenStateReturn {
   const onboardingStore = useOnboarding();
 
-  // Filter slides using service
   const filteredSlides = useMemo(() => {
     if (!slides || !Array.isArray(slides) || slides.length === 0) {
       return [];
@@ -55,7 +55,6 @@ export function useOnboardingScreenState({
     return SlideManager.filterSlides(slides, userData);
   }, [slides, onboardingStore.userData]);
 
-  // Navigation hook
   const {
     currentIndex,
     goToNext,
@@ -77,16 +76,14 @@ export function useOnboardingScreenState({
       if (onSkip) {
         await onSkip();
       }
-    },
+    }
   );
 
-  // Get current slide
   const currentSlide = useMemo(
     () => SlideManager.getSlideAtIndex(filteredSlides, currentIndex),
-    [filteredSlides, currentIndex],
+    [filteredSlides, currentIndex]
   );
 
-  // Answer management hook
   const {
     currentAnswer,
     setCurrentAnswer,
@@ -94,83 +91,39 @@ export function useOnboardingScreenState({
     saveCurrentAnswer,
   } = useOnboardingAnswers(currentSlide);
 
-  // Handle next slide with useCallback for performance
-  const handleNext = useCallback(async () => {
-    if (!currentSlide) return;
-
-    try {
-      await saveCurrentAnswer(currentSlide);
-      if (isLastSlide) {
-        await completeOnboarding();
-      } else {
-        goToNext();
-        const nextSlide = SlideManager.getSlideAtIndex(
-          filteredSlides,
-          currentIndex + 1,
-        );
-        if (nextSlide) {
-          loadAnswerForSlide(nextSlide);
-        }
-      }
-    } catch (error) {
-      if (__DEV__) {
-        console.error('[useOnboardingScreenState] Error in handleNext:', error);
-      }
+  const { handleNext, handlePrevious, handleSkip } = useOnboardingScreenHandlers(
+    {
+      filteredSlides,
+      currentSlide,
+      currentIndex,
+      isLastSlide,
+      saveCurrentAnswer,
+      completeOnboarding,
+      goToNext,
+      goToPrevious,
+      skipOnboarding,
+      loadAnswerForSlide,
     }
-  }, [currentSlide, isLastSlide, saveCurrentAnswer, completeOnboarding, goToNext, filteredSlides, currentIndex, loadAnswerForSlide]);
-
-  // Handle previous slide with useCallback for performance
-  const handlePrevious = useCallback(() => {
-    try {
-      goToPrevious();
-      const prevSlide = SlideManager.getSlideAtIndex(
-        filteredSlides,
-        currentIndex - 1,
-      );
-      if (prevSlide) {
-        loadAnswerForSlide(prevSlide);
-      }
-    } catch (error) {
-      if (__DEV__) {
-        console.error('[useOnboardingScreenState] Error in handlePrevious:', error);
-      }
-    }
-  }, [goToPrevious, filteredSlides, currentIndex, loadAnswerForSlide]);
-
-  // Handle skip with useCallback for performance
-  const handleSkip = useCallback(async () => {
-    try {
-      await skipOnboarding();
-    } catch (error) {
-      if (__DEV__) {
-        console.error('[useOnboardingScreenState] Error in handleSkip:', error);
-      }
-    }
-  }, [skipOnboarding]);
+  );
 
-  // Check if gradient should be used
   const useGradient = shouldUseGradient(currentSlide, globalUseGradient);
 
-  // Validate answer using service
   const isAnswerValid = useMemo(() => {
     if (!currentSlide?.question) {
       return true;
     }
     return ValidationManager.validateAnswer(
       currentSlide.question,
-      currentAnswer,
+      currentAnswer
     );
   }, [currentSlide, currentAnswer]);
 
-  // Container style using dedicated hook
   const { containerStyle } = useOnboardingContainerStyle({ useGradient });
 
-  // Cleanup effect to prevent memory leaks
   useEffect(() => {
     return () => {
-      // Cleanup any pending operations or subscriptions
       if (__DEV__) {
-        console.log('[useOnboardingScreenState] Cleanup completed');
+        console.log("[useOnboardingScreenState] Cleanup completed");
       }
     };
   }, []);
@@ -191,4 +144,3 @@ export function useOnboardingScreenState({
     setCurrentAnswer,
   };
 }
-