@umituz/react-native-onboarding 2.1.1 → 2.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.1.1",
-  "description": "Advanced onboarding flow for React Native apps with personalization questions, gradient backgrounds, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
+  "version": "2.2.0",
+  "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",
   "scripts": {
@@ -16,7 +16,7 @@
     "onboarding",
     "welcome",
     "tutorial",
-    "gradient",
+    "theme",
     "animation",
     "ddd",
     "domain-driven-design",

package/src/domain/entities/OnboardingSlide.ts

@@ -42,10 +42,18 @@ export interface OnboardingSlide {
   icon: string;
 
   /**
-   * Gradient colors for the slide background
+   * Gradient colors for the slide background (optional)
    * [startColor, endColor] or [color1, color2, color3] for multi-stop gradients
+   * Only used if useGradient is true
    */
-  gradient: string[];
+  gradient?: string[];
+
+  /**
+   * Use gradient background instead of theme colors (default: false)
+   * If true and gradient is provided, gradient will be used
+   * If false or gradient not provided, theme background colors will be used
+   */
+  useGradient?: boolean;
 
   /**
    * Optional image URL (alternative to icon)

package/src/infrastructure/hooks/useOnboardingAnswers.ts

@@ -0,0 +1,69 @@
+/**
+ * useOnboardingAnswers Hook
+ *
+ * Manages answer state and operations for onboarding questions
+ * Follows Single Responsibility Principle
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { useOnboardingStore } from "../storage/OnboardingStore";
+
+export interface UseOnboardingAnswersReturn {
+  currentAnswer: any;
+  setCurrentAnswer: (answer: any) => void;
+  loadAnswerForSlide: (slide: OnboardingSlide | undefined) => void;
+  saveCurrentAnswer: (slide: OnboardingSlide | undefined) => Promise<void>;
+}
+
+/**
+ * Hook for managing onboarding question answers
+ * @param currentSlide - The current slide being displayed
+ * @returns Answer state and operations
+ */
+export function useOnboardingAnswers(
+  currentSlide: OnboardingSlide | undefined,
+): UseOnboardingAnswersReturn {
+  const onboardingStore = useOnboardingStore();
+  const [currentAnswer, setCurrentAnswer] = useState<any>(undefined);
+
+  /**
+   * Load answer for a specific slide
+   */
+  const loadAnswerForSlide = useCallback(
+    (slide: OnboardingSlide | undefined) => {
+      if (slide?.question) {
+        const savedAnswer = onboardingStore.getAnswer(slide.question.id);
+        setCurrentAnswer(savedAnswer ?? slide.question.defaultValue);
+      } else {
+        setCurrentAnswer(undefined);
+      }
+    },
+    [onboardingStore],
+  );
+
+  /**
+   * Save current answer for a slide
+   */
+  const saveCurrentAnswer = useCallback(
+    async (slide: OnboardingSlide | undefined) => {
+      if (slide?.question && currentAnswer !== undefined) {
+        await onboardingStore.saveAnswer(slide.question.id, currentAnswer);
+      }
+    },
+    [currentAnswer, onboardingStore],
+  );
+
+  // Load answer when slide changes
+  useEffect(() => {
+    loadAnswerForSlide(currentSlide);
+  }, [currentSlide, loadAnswerForSlide]);
+
+  return {
+    currentAnswer,
+    setCurrentAnswer,
+    loadAnswerForSlide,
+    saveCurrentAnswer,
+  };
+}
+

package/src/infrastructure/services/OnboardingSlideService.ts

@@ -0,0 +1,49 @@
+/**
+ * Onboarding Slide Service
+ *
+ * Business logic for filtering and processing onboarding slides
+ * Follows Single Responsibility Principle
+ */
+
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
+
+/**
+ * Service for managing onboarding slide operations
+ */
+export class OnboardingSlideService {
+  /**
+   * Filter slides based on skipIf conditions
+   * @param slides - All available slides
+   * @param userData - User's onboarding data including answers
+   * @returns Filtered slides that should be shown
+   */
+  static filterSlides(
+    slides: OnboardingSlide[],
+    userData: OnboardingUserData,
+  ): OnboardingSlide[] {
+    return slides.filter((slide) => {
+      if (slide.skipIf) {
+        return !slide.skipIf(userData.answers);
+      }
+      return true;
+    });
+  }
+
+  /**
+   * Get slide at specific index
+   * @param slides - Filtered slides array
+   * @param index - Slide index
+   * @returns Slide at index or undefined
+   */
+  static getSlideAtIndex(
+    slides: OnboardingSlide[],
+    index: number,
+  ): OnboardingSlide | undefined {
+    if (index < 0 || index >= slides.length) {
+      return undefined;
+    }
+    return slides[index];
+  }
+}
+

package/src/infrastructure/services/OnboardingValidationService.ts

@@ -0,0 +1,128 @@
+/**
+ * Onboarding Validation Service
+ *
+ * Business logic for validating onboarding question answers
+ * Follows Single Responsibility Principle
+ */
+
+import type { OnboardingQuestion } from "../../domain/entities/OnboardingQuestion";
+
+/**
+ * Service for validating onboarding question answers
+ */
+export class OnboardingValidationService {
+  /**
+   * Validate answer against question validation rules
+   * @param question - The question to validate against
+   * @param answer - The answer to validate
+   * @returns true if valid, false otherwise
+   */
+  static validateAnswer(
+    question: OnboardingQuestion,
+    answer: any,
+  ): boolean {
+    const { validation } = question;
+    if (!validation) {
+      return true;
+    }
+
+    // Required validation
+    if (validation.required && !answer) {
+      return false;
+    }
+
+    // Type-specific validations
+    switch (question.type) {
+      case "multiple_choice":
+        return this.validateMultipleChoice(answer, validation);
+      case "text_input":
+        return this.validateTextInput(answer, validation);
+      case "slider":
+      case "rating":
+        return this.validateNumeric(answer, validation);
+      default:
+        break;
+    }
+
+    // Custom validator
+    if (validation.customValidator) {
+      const customResult = validation.customValidator(answer);
+      return customResult === true;
+    }
+
+    return true;
+  }
+
+  /**
+   * Validate multiple choice answer
+   */
+  private static validateMultipleChoice(
+    answer: any,
+    validation: OnboardingQuestion["validation"],
+  ): boolean {
+    if (!validation) return true;
+
+    if (validation.minSelections) {
+      if (!answer || !Array.isArray(answer) || answer.length < validation.minSelections) {
+        return false;
+      }
+    }
+
+    if (validation.maxSelections) {
+      if (Array.isArray(answer) && answer.length > validation.maxSelections) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * Validate text input answer
+   */
+  private static validateTextInput(
+    answer: any,
+    validation: OnboardingQuestion["validation"],
+  ): boolean {
+    if (!validation) return true;
+
+    if (typeof answer !== "string") {
+      return false;
+    }
+
+    if (validation.minLength && answer.length < validation.minLength) {
+      return false;
+    }
+
+    if (validation.maxLength && answer.length > validation.maxLength) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Validate numeric answer (slider/rating)
+   */
+  private static validateNumeric(
+    answer: any,
+    validation: OnboardingQuestion["validation"],
+  ): boolean {
+    if (!validation) return true;
+
+    if (typeof answer !== "number") {
+      return false;
+    }
+
+    if (validation.min !== undefined && answer < validation.min) {
+      return false;
+    }
+
+    if (validation.max !== undefined && answer > validation.max) {
+      return false;
+    }
+
+    return true;
+  }
+}
+

package/src/infrastructure/utils/gradientUtils.ts

@@ -0,0 +1,26 @@
+/**
+ * Gradient Utilities
+ *
+ * Utility functions for gradient-related operations
+ * Follows Single Responsibility Principle
+ */
+
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+
+/**
+ * Check if slide should use gradient background
+ * @param slide - The slide to check
+ * @returns true if gradient should be used, false otherwise
+ */
+export function shouldUseGradient(slide: OnboardingSlide | undefined): boolean {
+  if (!slide) {
+    return false;
+  }
+
+  return (
+    slide.useGradient === true &&
+    slide.gradient !== undefined &&
+    slide.gradient.length > 0
+  );
+}
+

package/src/presentation/components/OnboardingFooter.tsx

@@ -21,6 +21,7 @@ export interface OnboardingFooterProps {
   nextButtonText?: string;
   getStartedButtonText?: string;
   disabled?: boolean;
+  useGradient?: boolean;
 }
 
 export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
@@ -34,11 +35,12 @@ export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
   nextButtonText,
   getStartedButtonText,
   disabled = false,
+  useGradient = false,
 }) => {
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(insets, tokens), [insets, tokens]);
+  const styles = useMemo(() => getStyles(insets, tokens, useGradient), [insets, tokens, useGradient]);
 
   const buttonText = isLastSlide
     ? getStartedButtonText || t("onboarding.getStarted", "Get Started")
@@ -93,6 +95,7 @@ export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
 const getStyles = (
   insets: { bottom: number },
   tokens: ReturnType<typeof useAppDesignTokens>,
+  useGradient: boolean,
 ) =>
   StyleSheet.create({
     footer: {
@@ -105,13 +108,15 @@ const getStyles = (
     },
     progressBar: {
       height: 4,
-      backgroundColor: "rgba(255, 255, 255, 0.2)",
+      backgroundColor: useGradient 
+        ? "rgba(255, 255, 255, 0.2)" 
+        : tokens.colors.borderLight,
       borderRadius: 2,
       overflow: "hidden",
     },
     progressFill: {
       height: "100%",
-      backgroundColor: "#FFFFFF",
+      backgroundColor: useGradient ? "#FFFFFF" : tokens.colors.primary,
       borderRadius: 2,
     },
     dots: {
@@ -124,32 +129,41 @@ const getStyles = (
       width: 6,
       height: 6,
       borderRadius: 3,
-      backgroundColor: "rgba(255, 255, 255, 0.4)",
+      backgroundColor: useGradient 
+        ? "rgba(255, 255, 255, 0.4)" 
+        : tokens.colors.borderLight,
     },
     dotActive: {
       width: 8,
-      backgroundColor: "#FFFFFF",
+      backgroundColor: useGradient ? "#FFFFFF" : tokens.colors.primary,
     },
     button: {
-      backgroundColor: "#FFFFFF",
+      backgroundColor: useGradient ? "#FFFFFF" : tokens.colors.primary,
       paddingVertical: 16,
       borderRadius: 28,
       alignItems: "center",
       marginBottom: 12,
     },
     buttonDisabled: {
-      backgroundColor: "rgba(255, 255, 255, 0.4)",
+      backgroundColor: useGradient 
+        ? "rgba(255, 255, 255, 0.4)" 
+        : tokens.colors.borderLight,
+      opacity: 0.5,
     },
     buttonText: {
-      color: tokens.colors.primary,
+      color: useGradient ? tokens.colors.primary : tokens.colors.surface,
       fontSize: 16,
       fontWeight: "bold",
     },
     buttonTextDisabled: {
-      color: "rgba(255, 255, 255, 0.6)",
+      color: useGradient 
+        ? "rgba(255, 255, 255, 0.6)" 
+        : tokens.colors.textSecondary,
     },
     progressText: {
-      color: "rgba(255, 255, 255, 0.75)",
+      color: useGradient 
+        ? "rgba(255, 255, 255, 0.75)" 
+        : tokens.colors.textSecondary,
       fontSize: 12,
       textAlign: "center",
     },

package/src/presentation/components/OnboardingHeader.tsx

@@ -7,6 +7,7 @@
 import React, { useMemo } from "react";
 import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
 import { useLocalization } from "@umituz/react-native-localization";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 
 export interface OnboardingHeaderProps {
   isFirstSlide: boolean;
@@ -15,6 +16,7 @@ export interface OnboardingHeaderProps {
   showBackButton?: boolean;
   showSkipButton?: boolean;
   skipButtonText?: string;
+  useGradient?: boolean;
 }
 
 export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
@@ -24,9 +26,11 @@ export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
   showBackButton = true,
   showSkipButton = true,
   skipButtonText,
+  useGradient = false,
 }) => {
   const { t } = useLocalization();
-  const styles = useMemo(() => getStyles(), []);
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
 
   const skipText = skipButtonText || t("onboarding.skip", "Skip");
 
@@ -55,7 +59,10 @@ export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
   );
 };
 
-const getStyles = () =>
+const getStyles = (
+  tokens: ReturnType<typeof useAppDesignTokens>,
+  useGradient: boolean,
+) =>
   StyleSheet.create({
     header: {
       flexDirection: "row",
@@ -69,22 +76,26 @@ const getStyles = () =>
       width: 40,
       height: 40,
       borderRadius: 20,
-      backgroundColor: "rgba(255, 255, 255, 0.2)",
+      backgroundColor: useGradient 
+        ? "rgba(255, 255, 255, 0.2)" 
+        : tokens.colors.surface,
       alignItems: "center",
       justifyContent: "center",
       borderWidth: 1,
-      borderColor: "rgba(255, 255, 255, 0.3)",
+      borderColor: useGradient 
+        ? "rgba(255, 255, 255, 0.3)" 
+        : tokens.colors.borderLight,
     },
     headerButtonDisabled: {
       opacity: 0.3,
     },
     headerButtonText: {
-      color: "#FFFFFF",
+      color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
       fontSize: 20,
       fontWeight: "bold",
     },
     skipText: {
-      color: "#FFFFFF",
+      color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
       fontSize: 16,
       fontWeight: "600",
     },

package/src/presentation/components/OnboardingSlide.tsx

@@ -7,6 +7,7 @@
 import React, { useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
 import * as LucideIcons from "lucide-react-native";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system-theme";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 
 export interface OnboardingSlideProps {
@@ -14,7 +15,8 @@ export interface OnboardingSlideProps {
 }
 
 export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide }) => {
-  const styles = useMemo(() => getStyles(), []);
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
 
   // Check if icon is an emoji (contains emoji characters) or Lucide icon name
   const isEmoji = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(slide.icon);
@@ -30,7 +32,7 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide }) => {
             {isEmoji ? (
               <Text style={styles.icon}>{slide.icon}</Text>
             ) : IconComponent ? (
-              <IconComponent size={60} color="#FFFFFF" />
+              <IconComponent size={60} color={tokens.colors.textPrimary} />
             ) : (
               <Text style={styles.icon}>📱</Text>
             )}
@@ -53,7 +55,7 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide }) => {
   );
 };
 
-const getStyles = () =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       flex: 1,
@@ -69,17 +71,31 @@ const getStyles = () =>
       alignItems: "center",
       maxWidth: 400,
       width: "100%",
+      // Add background for readability with theme colors
+      backgroundColor: tokens.colors.surface,
+      padding: 30,
+      borderRadius: 24,
+      borderWidth: 1,
+      borderColor: tokens.colors.borderLight,
+      shadowColor: tokens.colors.textPrimary,
+      shadowOffset: {
+        width: 0,
+        height: 4,
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 8,
+      elevation: 4,
     },
     iconContainer: {
       width: 120,
       height: 120,
       borderRadius: 60,
-      backgroundColor: "rgba(255, 255, 255, 0.2)",
+      backgroundColor: withAlpha(tokens.colors.primary, 0.2),
       alignItems: "center",
       justifyContent: "center",
       marginBottom: 40,
       borderWidth: 2,
-      borderColor: "rgba(255, 255, 255, 0.3)",
+      borderColor: withAlpha(tokens.colors.primary, 0.4),
     },
     icon: {
       fontSize: 60,
@@ -87,13 +103,13 @@ const getStyles = () =>
     title: {
       fontSize: 28,
       fontWeight: "bold",
-      color: "#FFFFFF",
+      color: tokens.colors.textPrimary,
       textAlign: "center",
       marginBottom: 16,
     },
     description: {
       fontSize: 16,
-      color: "rgba(255, 255, 255, 0.95)",
+      color: tokens.colors.textSecondary,
       textAlign: "center",
       lineHeight: 24,
       marginBottom: 20,
@@ -108,7 +124,7 @@ const getStyles = () =>
       marginBottom: 12,
     },
     featureBullet: {
-      color: "#FFFFFF",
+      color: tokens.colors.primary,
       fontSize: 20,
       marginRight: 12,
       marginTop: 2,
@@ -116,7 +132,7 @@ const getStyles = () =>
     featureText: {
       flex: 1,
       fontSize: 15,
-      color: "rgba(255, 255, 255, 0.9)",
+      color: tokens.colors.textSecondary,
       lineHeight: 22,
     },
   });

package/src/presentation/components/QuestionSlide.tsx

@@ -7,6 +7,7 @@
 import React, { useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
 import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system-theme";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import { SingleChoiceQuestion } from "./questions/SingleChoiceQuestion";
 import { MultipleChoiceQuestion } from "./questions/MultipleChoiceQuestion";
@@ -25,7 +26,8 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   value,
   onChange,
 }) => {
-  const styles = useMemo(() => getStyles(), []);
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
   const { question } = slide;
 
   if (!question) {
@@ -96,7 +98,7 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
             <AtomicIcon
               name={slide.icon as any}
               customSize={48}
-              customColor="#FFFFFF"
+              customColor={tokens.colors.textPrimary}
             />
           )}
         </View>
@@ -121,7 +123,7 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   );
 };
 
-const getStyles = () =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     content: {
       flexGrow: 1,
@@ -134,17 +136,31 @@ const getStyles = () =>
       alignItems: "center",
       maxWidth: 500,
       width: "100%",
+      // Add background for readability with theme colors
+      backgroundColor: tokens.colors.surface,
+      padding: 30,
+      borderRadius: 24,
+      borderWidth: 1,
+      borderColor: tokens.colors.borderLight,
+      shadowColor: tokens.colors.textPrimary,
+      shadowOffset: {
+        width: 0,
+        height: 4,
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 8,
+      elevation: 4,
     },
     iconContainer: {
       width: 96,
       height: 96,
       borderRadius: 48,
-      backgroundColor: "rgba(255, 255, 255, 0.2)",
+      backgroundColor: withAlpha(tokens.colors.primary, 0.2),
       alignItems: "center",
       justifyContent: "center",
       marginBottom: 24,
       borderWidth: 2,
-      borderColor: "rgba(255, 255, 255, 0.3)",
+      borderColor: withAlpha(tokens.colors.primary, 0.4),
     },
     icon: {
       fontSize: 48,
@@ -152,13 +168,13 @@ const getStyles = () =>
     title: {
       fontSize: 24,
       fontWeight: "bold",
-      color: "#FFFFFF",
+      color: tokens.colors.textPrimary,
       textAlign: "center",
       marginBottom: 12,
     },
     description: {
       fontSize: 15,
-      color: "rgba(255, 255, 255, 0.9)",
+      color: tokens.colors.textSecondary,
       textAlign: "center",
       lineHeight: 22,
       marginBottom: 24,
@@ -169,7 +185,7 @@ const getStyles = () =>
     },
     requiredHint: {
       fontSize: 13,
-      color: "rgba(255, 255, 255, 0.7)",
+      color: tokens.colors.textSecondary,
       fontStyle: "italic",
       marginTop: 12,
     },

package/src/presentation/screens/OnboardingScreen.tsx

@@ -1,17 +1,24 @@
 /**
  * Onboarding Screen
  *
- * Main onboarding screen component with gradient backgrounds
+ * Main onboarding screen component with theme-aware colors
  * Generic and reusable across hundreds of apps
+ * 
+ * This component only handles UI coordination - no business logic
  */
 
-import React, { useMemo, useState, useEffect } from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet, StatusBar } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAppDesignTokens, useTheme } from "@umituz/react-native-design-system-theme";
 import type { OnboardingOptions } from "../../domain/entities/OnboardingOptions";
 import { useOnboardingNavigation } from "../../infrastructure/hooks/useOnboardingNavigation";
+import { useOnboardingAnswers } from "../../infrastructure/hooks/useOnboardingAnswers";
 import { useOnboardingStore } from "../../infrastructure/storage/OnboardingStore";
+import { OnboardingSlideService } from "../../infrastructure/services/OnboardingSlideService";
+import { OnboardingValidationService } from "../../infrastructure/services/OnboardingValidationService";
+import { shouldUseGradient } from "../../infrastructure/utils/gradientUtils";
 import { OnboardingHeader } from "../components/OnboardingHeader";
 import { OnboardingSlide as OnboardingSlideComponent } from "../components/OnboardingSlide";
 import { QuestionSlide } from "../components/QuestionSlide";
@@ -60,7 +67,7 @@ export interface OnboardingScreenProps extends OnboardingOptions {
 /**
  * Onboarding Screen Component
  *
- * Displays onboarding flow with gradient backgrounds, animations, and navigation
+ * Displays onboarding flow with theme-aware colors, animations, and navigation
  */
 export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   slides,
@@ -83,39 +90,17 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   showPaywallOnComplete = false,
 }) => {
   const insets = useSafeAreaInsets();
+  const tokens = useAppDesignTokens();
+  const { themeMode } = useTheme();
   const onboardingStore = useOnboardingStore();
-  const [currentAnswer, setCurrentAnswer] = useState<any>(undefined);
 
-  // Filter slides based on skipIf conditions
+  // Filter slides using service
   const filteredSlides = useMemo(() => {
     const userData = onboardingStore.getUserData();
-    return slides.filter((slide) => {
-      if (slide.skipIf) {
-        return !slide.skipIf(userData.answers);
-      }
-      return true;
-    });
+    return OnboardingSlideService.filterSlides(slides, userData);
   }, [slides, onboardingStore]);
 
-  const handleComplete = async () => {
-    // Save current answer if exists
-    if (currentSlide.question && currentAnswer !== undefined) {
-      await onboardingStore.saveAnswer(currentSlide.question.id, currentAnswer);
-    }
-
-    await onboardingStore.complete(storageKey);
-    if (onComplete) {
-      await onComplete();
-    }
-  };
-
-  const handleSkip = async () => {
-    await onboardingStore.skip(storageKey);
-    if (onSkip) {
-      await onSkip();
-    }
-  };
-
+  // Navigation hook
   const {
     currentIndex,
     goToNext,
@@ -124,108 +109,97 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
     skip: skipOnboarding,
     isLastSlide,
     isFirstSlide,
-  } = useOnboardingNavigation(filteredSlides.length, handleComplete, handleSkip);
+  } = useOnboardingNavigation(
+    filteredSlides.length,
+    async () => {
+      await onboardingStore.complete(storageKey);
+      if (onComplete) {
+        await onComplete();
+      }
+    },
+    async () => {
+      await onboardingStore.skip(storageKey);
+      if (onSkip) {
+        await onSkip();
+      }
+    },
+  );
+
+  // Get current slide
+  const currentSlide = useMemo(
+    () => OnboardingSlideService.getSlideAtIndex(filteredSlides, currentIndex),
+    [filteredSlides, currentIndex],
+  );
+
+  // Answer management hook
+  const {
+    currentAnswer,
+    setCurrentAnswer,
+    loadAnswerForSlide,
+    saveCurrentAnswer,
+  } = useOnboardingAnswers(currentSlide);
 
+  // Handle next slide
   const handleNext = async () => {
-    // Save current answer if exists
-    if (currentSlide.question && currentAnswer !== undefined) {
-      await onboardingStore.saveAnswer(currentSlide.question.id, currentAnswer);
-    }
+    await saveCurrentAnswer(currentSlide);
 
     if (isLastSlide) {
-      // Use useOnboardingNavigation's complete function
-      // This will call handleComplete callback and emit event
       await completeOnboarding();
     } else {
       goToNext();
-      // Load next slide's answer
-      const nextSlide = filteredSlides[currentIndex + 1];
-      if (nextSlide?.question) {
-        const savedAnswer = onboardingStore.getAnswer(nextSlide.question.id);
-        setCurrentAnswer(savedAnswer);
-      } else {
-        setCurrentAnswer(undefined);
-      }
+      const nextSlide = OnboardingSlideService.getSlideAtIndex(
+        filteredSlides,
+        currentIndex + 1,
+      );
+      loadAnswerForSlide(nextSlide);
     }
   };
 
+  // Handle previous slide
   const handlePrevious = () => {
     goToPrevious();
-    // Load previous slide's answer
-    if (currentIndex > 0) {
-      const prevSlide = filteredSlides[currentIndex - 1];
-      if (prevSlide?.question) {
-        const savedAnswer = onboardingStore.getAnswer(prevSlide.question.id);
-        setCurrentAnswer(savedAnswer);
-      } else {
-        setCurrentAnswer(undefined);
-      }
-    }
+    const prevSlide = OnboardingSlideService.getSlideAtIndex(
+      filteredSlides,
+      currentIndex - 1,
+    );
+    loadAnswerForSlide(prevSlide);
   };
 
-  const currentSlide = filteredSlides[currentIndex];
-  const styles = useMemo(() => getStyles(insets), [insets]);
+  // Handle skip
+  const handleSkip = async () => {
+    await skipOnboarding();
+  };
 
-  // Load current slide's answer on mount and when slide changes
-  useEffect(() => {
-    if (currentSlide?.question) {
-      const savedAnswer = onboardingStore.getAnswer(currentSlide.question.id);
-      setCurrentAnswer(savedAnswer ?? currentSlide.question.defaultValue);
-    } else {
-      setCurrentAnswer(undefined);
-    }
-  }, [currentIndex, currentSlide, onboardingStore]);
+  // Check if gradient should be used
+  const useGradient = shouldUseGradient(currentSlide);
 
-  // Validate current answer
+  // Validate answer using service
   const isAnswerValid = useMemo(() => {
-    if (!currentSlide?.question) return true;
-
-    const { validation } = currentSlide.question;
-    if (!validation) return true;
-
-    // Required validation
-    if (validation.required && !currentAnswer) return false;
-
-    // Type-specific validations
-    switch (currentSlide.question.type) {
-      case "multiple_choice":
-        if (validation.minSelections && (!currentAnswer || currentAnswer.length < validation.minSelections)) {
-          return false;
-        }
-        break;
-      case "text_input":
-        if (validation.minLength && (!currentAnswer || currentAnswer.length < validation.minLength)) {
-          return false;
-        }
-        break;
-      case "slider":
-      case "rating":
-        if (validation.min !== undefined && currentAnswer < validation.min) {
-          return false;
-        }
-        if (validation.max !== undefined && currentAnswer > validation.max) {
-          return false;
-        }
-        break;
-    }
-
-    // Custom validator
-    if (validation.customValidator) {
-      return validation.customValidator(currentAnswer) === true;
+    if (!currentSlide?.question) {
+      return true;
     }
-
-    return true;
+    return OnboardingValidationService.validateAnswer(
+      currentSlide.question,
+      currentAnswer,
+    );
   }, [currentSlide, currentAnswer]);
 
+  const styles = useMemo(
+    () => getStyles(insets, tokens, useGradient),
+    [insets, tokens, useGradient],
+  );
+
   return (
     <View style={styles.container}>
-      <StatusBar barStyle="light-content" />
-      <LinearGradient
-        colors={currentSlide.gradient as [string, string, ...string[]]}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 1 }}
-        style={StyleSheet.absoluteFill}
-      />
+      <StatusBar barStyle={themeMode === "dark" ? "light-content" : "dark-content"} />
+      {useGradient && currentSlide && (
+        <LinearGradient
+          colors={currentSlide.gradient as [string, string, ...string[]]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={StyleSheet.absoluteFill}
+        />
+      )}
       {renderHeader ? (
         renderHeader({
           isFirstSlide,
@@ -240,6 +214,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
           showBackButton={showBackButton}
           showSkipButton={showSkipButton}
           skipButtonText={skipButtonText}
+          useGradient={useGradient}
         />
       )}
       {renderSlide ? (
@@ -274,17 +249,24 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
           nextButtonText={nextButtonText}
           getStartedButtonText={getStartedButtonText}
           disabled={!isAnswerValid}
+          useGradient={useGradient}
         />
       )}
     </View>
   );
 };
 
-const getStyles = (insets: { top: number }) =>
+const getStyles = (
+  insets: { top: number },
+  tokens: ReturnType<typeof useAppDesignTokens>,
+  useGradient: boolean,
+) =>
   StyleSheet.create({
     container: {
       flex: 1,
       paddingTop: insets.top,
+      // Use transparent background when gradient is used, otherwise use theme background
+      backgroundColor: useGradient ? 'transparent' : tokens.colors.backgroundPrimary,
     },
   });