@umituz/react-native-onboarding 2.6.8 → 2.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.6.8",
+  "version": "2.6.10",
   "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",

package/src/presentation/components/OnboardingScreenContent.tsx

@@ -0,0 +1,173 @@
+/**
+ * Onboarding Screen Content Component
+ * Single Responsibility: Render onboarding screen content (header, slide, footer)
+ */
+
+import React from "react";
+import { View, StyleSheet, StatusBar } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { useTheme } from "@umituz/react-native-design-system-theme";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { OnboardingHeader } from "./OnboardingHeader";
+import { OnboardingSlide as OnboardingSlideComponent } from "./OnboardingSlide";
+import { QuestionSlide } from "./QuestionSlide";
+import { OnboardingFooter } from "./OnboardingFooter";
+
+export interface OnboardingScreenContentProps {
+  containerStyle?: any;
+  useGradient: boolean;
+  currentSlide: OnboardingSlide | undefined;
+  isFirstSlide: boolean;
+  isLastSlide: boolean;
+  currentIndex: number;
+  totalSlides: number;
+  currentAnswer: any;
+  isAnswerValid: boolean;
+  showBackButton: boolean;
+  showSkipButton: boolean;
+  showProgressBar: boolean;
+  showDots: boolean;
+  showProgressText: boolean;
+  skipButtonText?: string;
+  nextButtonText?: string;
+  getStartedButtonText?: string;
+  onBack: () => void;
+  onSkip: () => void;
+  onNext: () => void;
+  onAnswerChange: (value: any) => void;
+  renderHeader?: (props: {
+    isFirstSlide: boolean;
+    onBack: () => void;
+    onSkip: () => void;
+  }) => React.ReactNode;
+  renderFooter?: (props: {
+    currentIndex: number;
+    totalSlides: number;
+    isLastSlide: boolean;
+    onNext: () => void;
+    onUpgrade?: () => void;
+    showPaywallOnComplete?: boolean;
+  }) => React.ReactNode;
+  renderSlide?: (slide: OnboardingSlide) => React.ReactNode;
+  onUpgrade?: () => void;
+  showPaywallOnComplete?: boolean;
+  SliderComponent?: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
+}
+
+export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = ({
+  containerStyle,
+  useGradient,
+  currentSlide,
+  isFirstSlide,
+  isLastSlide,
+  currentIndex,
+  totalSlides,
+  currentAnswer,
+  isAnswerValid,
+  showBackButton,
+  showSkipButton,
+  showProgressBar,
+  showDots,
+  showProgressText,
+  skipButtonText,
+  nextButtonText,
+  getStartedButtonText,
+  onBack,
+  onSkip,
+  onNext,
+  onAnswerChange,
+  renderHeader,
+  renderFooter,
+  renderSlide,
+  onUpgrade,
+  showPaywallOnComplete,
+  SliderComponent,
+}) => {
+  const { themeMode } = useTheme();
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <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,
+          onBack,
+          onSkip,
+        })
+      ) : (
+        <OnboardingHeader
+          isFirstSlide={isFirstSlide}
+          onBack={onBack}
+          onSkip={onSkip}
+          showBackButton={showBackButton}
+          showSkipButton={showSkipButton}
+          skipButtonText={skipButtonText}
+          useGradient={useGradient}
+        />
+      )}
+      {currentSlide &&
+        (renderSlide ? (
+          renderSlide(currentSlide)
+        ) : currentSlide.type === "question" && currentSlide.question ? (
+          <QuestionSlide
+            slide={currentSlide}
+            value={currentAnswer}
+            onChange={onAnswerChange}
+            useGradient={useGradient}
+            SliderComponent={SliderComponent}
+          />
+        ) : (
+          <OnboardingSlideComponent slide={currentSlide} useGradient={useGradient} />
+        ))}
+      {renderFooter ? (
+        renderFooter({
+          currentIndex,
+          totalSlides,
+          isLastSlide,
+          onNext,
+          onUpgrade,
+          showPaywallOnComplete,
+        })
+      ) : (
+        <OnboardingFooter
+          currentIndex={currentIndex}
+          totalSlides={totalSlides}
+          isLastSlide={isLastSlide}
+          onNext={onNext}
+          showProgressBar={showProgressBar}
+          showDots={showDots}
+          showProgressText={showProgressText}
+          nextButtonText={nextButtonText}
+          getStartedButtonText={getStartedButtonText}
+          disabled={!isAnswerValid}
+          useGradient={useGradient}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+

package/src/presentation/hooks/useOnboardingScreenState.ts

@@ -0,0 +1,171 @@
+/**
+ * useOnboardingScreenState Hook
+ * Single Responsibility: Manage onboarding screen state and handlers
+ */
+
+import { useMemo } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { useOnboardingStore } from "../../infrastructure/storage/OnboardingStore";
+import { useOnboardingNavigation } from "../../infrastructure/hooks/useOnboardingNavigation";
+import { useOnboardingAnswers } from "../../infrastructure/hooks/useOnboardingAnswers";
+import { OnboardingSlideService } from "../../infrastructure/services/OnboardingSlideService";
+import { OnboardingValidationService } from "../../infrastructure/services/OnboardingValidationService";
+import { shouldUseGradient } from "../../infrastructure/utils/gradientUtils";
+
+export interface UseOnboardingScreenStateProps {
+  slides: OnboardingSlide[] | undefined;
+  storageKey?: string;
+  onComplete?: () => void | Promise<void>;
+  onSkip?: () => void | Promise<void>;
+  globalUseGradient?: boolean;
+}
+
+export interface UseOnboardingScreenStateReturn {
+  filteredSlides: OnboardingSlide[];
+  currentSlide: OnboardingSlide | undefined;
+  currentIndex: number;
+  isFirstSlide: boolean;
+  isLastSlide: boolean;
+  currentAnswer: any;
+  isAnswerValid: boolean;
+  useGradient: boolean;
+  containerStyle: any;
+  handleNext: () => Promise<void>;
+  handlePrevious: () => void;
+  handleSkip: () => Promise<void>;
+  setCurrentAnswer: (value: any) => void;
+}
+
+export function useOnboardingScreenState({
+  slides,
+  storageKey,
+  onComplete,
+  onSkip,
+  globalUseGradient = false,
+}: UseOnboardingScreenStateProps): UseOnboardingScreenStateReturn {
+  const insets = useSafeAreaInsets();
+  const tokens = useAppDesignTokens();
+  const onboardingStore = useOnboardingStore();
+
+  // Filter slides using service
+  const filteredSlides = useMemo(() => {
+    if (!slides || !Array.isArray(slides) || slides.length === 0) {
+      return [];
+    }
+    const userData = onboardingStore.getUserData();
+    return OnboardingSlideService.filterSlides(slides, userData);
+  }, [slides, onboardingStore]);
+
+  // Navigation hook
+  const {
+    currentIndex,
+    goToNext,
+    goToPrevious,
+    complete: completeOnboarding,
+    skip: skipOnboarding,
+    isLastSlide,
+    isFirstSlide,
+  } = 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 () => {
+    await saveCurrentAnswer(currentSlide);
+    if (isLastSlide) {
+      await completeOnboarding();
+    } else {
+      goToNext();
+      const nextSlide = OnboardingSlideService.getSlideAtIndex(
+        filteredSlides,
+        currentIndex + 1,
+      );
+      loadAnswerForSlide(nextSlide);
+    }
+  };
+
+  // Handle previous slide
+  const handlePrevious = () => {
+    goToPrevious();
+    const prevSlide = OnboardingSlideService.getSlideAtIndex(
+      filteredSlides,
+      currentIndex - 1,
+    );
+    loadAnswerForSlide(prevSlide);
+  };
+
+  // Handle skip
+  const handleSkip = async () => {
+    await 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 OnboardingValidationService.validateAnswer(
+      currentSlide.question,
+      currentAnswer,
+    );
+  }, [currentSlide, currentAnswer]);
+
+  // Container style
+  const containerStyle = useMemo(
+    () => [
+      {
+        paddingTop: insets.top,
+        backgroundColor: useGradient ? "transparent" : tokens.colors.backgroundPrimary,
+      },
+    ],
+    [insets.top, useGradient, tokens.colors.backgroundPrimary],
+  );
+
+  return {
+    filteredSlides,
+    currentSlide,
+    currentIndex,
+    isFirstSlide,
+    isLastSlide,
+    currentAnswer,
+    isAnswerValid,
+    useGradient,
+    containerStyle,
+    handleNext,
+    handlePrevious,
+    handleSkip,
+    setCurrentAnswer,
+  };
+}
+

package/src/presentation/screens/OnboardingScreen.tsx

@@ -3,26 +3,15 @@
  *
  * 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 } 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 React from "react";
+import { StyleSheet } from "react-native";
 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";
-import { OnboardingFooter } from "../components/OnboardingFooter";
+import { useOnboardingScreenState } from "../hooks/useOnboardingScreenState";
+import { OnboardingScreenContent } from "../components/OnboardingScreenContent";
 
 export interface OnboardingScreenProps extends OnboardingOptions {
   /**
@@ -81,11 +70,6 @@ export interface OnboardingScreenProps extends OnboardingOptions {
   }>;
 }
 
-/**
- * Onboarding Screen Component
- *
- * Displays onboarding flow with theme-aware colors, animations, and navigation
- */
 export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   slides,
   onComplete,
@@ -108,192 +92,63 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   useGradient: globalUseGradient = false,
   SliderComponent,
 }) => {
-  const insets = useSafeAreaInsets();
-  const tokens = useAppDesignTokens();
-  const { themeMode } = useTheme();
-  const onboardingStore = useOnboardingStore();
-
-  // Filter slides using service
-  const filteredSlides = useMemo(() => {
-    // Safety check: if slides is undefined or empty, return empty array
-    if (!slides || !Array.isArray(slides) || slides.length === 0) {
-      return [];
-    }
-    const userData = onboardingStore.getUserData();
-    return OnboardingSlideService.filterSlides(slides, userData);
-  }, [slides, onboardingStore]);
-
-  // Navigation hook
   const {
+    filteredSlides,
+    currentSlide,
     currentIndex,
-    goToNext,
-    goToPrevious,
-    complete: completeOnboarding,
-    skip: skipOnboarding,
-    isLastSlide,
     isFirstSlide,
-  } = 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 {
+    isLastSlide,
     currentAnswer,
+    isAnswerValid,
+    useGradient,
+    containerStyle,
+    handleNext,
+    handlePrevious,
+    handleSkip,
     setCurrentAnswer,
-    loadAnswerForSlide,
-    saveCurrentAnswer,
-  } = useOnboardingAnswers(currentSlide);
-
-  // Handle next slide
-  const handleNext = async () => {
-    await saveCurrentAnswer(currentSlide);
-
-    if (isLastSlide) {
-      await completeOnboarding();
-    } else {
-      goToNext();
-      const nextSlide = OnboardingSlideService.getSlideAtIndex(
-        filteredSlides,
-        currentIndex + 1,
-      );
-      loadAnswerForSlide(nextSlide);
-    }
-  };
-
-  // Handle previous slide
-  const handlePrevious = () => {
-    goToPrevious();
-    const prevSlide = OnboardingSlideService.getSlideAtIndex(
-      filteredSlides,
-      currentIndex - 1,
-    );
-    loadAnswerForSlide(prevSlide);
-  };
-
-  // Handle skip
-  const handleSkip = async () => {
-    await 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 OnboardingValidationService.validateAnswer(
-      currentSlide.question,
-      currentAnswer,
-    );
-  }, [currentSlide, currentAnswer]);
-
-  const styles = useMemo(
-    () => getStyles(insets, tokens, useGradient),
-    [insets, tokens, useGradient],
-  );
+  } = useOnboardingScreenState({
+    slides,
+    storageKey,
+    onComplete,
+    onSkip,
+    globalUseGradient,
+  });
 
   return (
-    <View style={styles.container}>
-      <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,
-          onBack: handlePrevious,
-          onSkip: handleSkip,
-        })
-      ) : (
-        <OnboardingHeader
-          isFirstSlide={isFirstSlide}
-          onBack={handlePrevious}
-          onSkip={handleSkip}
-          showBackButton={showBackButton}
-          showSkipButton={showSkipButton}
-          skipButtonText={skipButtonText}
-          useGradient={useGradient}
-        />
-      )}
-      {currentSlide && (
-        renderSlide ? (
-          renderSlide(currentSlide)
-        ) : currentSlide.type === "question" && currentSlide.question ? (
-          <QuestionSlide
-            slide={currentSlide}
-            value={currentAnswer}
-            onChange={setCurrentAnswer}
-            useGradient={useGradient}
-            SliderComponent={SliderComponent}
-          />
-        ) : (
-          <OnboardingSlideComponent slide={currentSlide} useGradient={useGradient} />
-        )
-      )}
-      {renderFooter ? (
-        renderFooter({
-          currentIndex,
-          totalSlides: filteredSlides.length,
-          isLastSlide,
-          onNext: handleNext,
-          onUpgrade,
-          showPaywallOnComplete,
-        })
-      ) : (
-        <OnboardingFooter
-          currentIndex={currentIndex}
-          totalSlides={filteredSlides.length}
-          isLastSlide={isLastSlide}
-          onNext={handleNext}
-          showProgressBar={showProgressBar}
-          showDots={showDots}
-          showProgressText={showProgressText}
-          nextButtonText={nextButtonText}
-          getStartedButtonText={getStartedButtonText}
-          disabled={!isAnswerValid}
-          useGradient={useGradient}
-        />
-      )}
-    </View>
+    <OnboardingScreenContent
+      containerStyle={[styles.container, containerStyle]}
+      useGradient={useGradient}
+      currentSlide={currentSlide}
+      isFirstSlide={isFirstSlide}
+      isLastSlide={isLastSlide}
+      currentIndex={currentIndex}
+      totalSlides={filteredSlides.length}
+      currentAnswer={currentAnswer}
+      isAnswerValid={isAnswerValid}
+      showBackButton={showBackButton}
+      showSkipButton={showSkipButton}
+      showProgressBar={showProgressBar}
+      showDots={showDots}
+      showProgressText={showProgressText}
+      skipButtonText={skipButtonText}
+      nextButtonText={nextButtonText}
+      getStartedButtonText={getStartedButtonText}
+      onBack={handlePrevious}
+      onSkip={handleSkip}
+      onNext={handleNext}
+      onAnswerChange={setCurrentAnswer}
+      renderHeader={renderHeader}
+      renderFooter={renderFooter}
+      renderSlide={renderSlide}
+      onUpgrade={onUpgrade}
+      showPaywallOnComplete={showPaywallOnComplete}
+      SliderComponent={SliderComponent}
+    />
   );
 };
 
-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,
-    },
-  });
-
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});