@umituz/react-native-onboarding 2.6.9 → 2.6.11

package/README.md

@@ -156,8 +156,11 @@ const slides: OnboardingSlide[] = [
   },
 ];
 
+import Slider from '@react-native-community/slider';
+
 <OnboardingScreen
   slides={slides}
+  SliderComponent={Slider}
   onComplete={async () => {
     const userData = onboardingStore.getUserData();
     console.log('User answers:', userData.answers);
@@ -185,6 +188,7 @@ const slides: OnboardingSlide[] = [
 | `showProgressText` | `boolean` | `true` | Show progress text (1 of 5) |
 | `storageKey` | `string` | - | Custom storage key for completion state |
 | `autoComplete` | `boolean` | `false` | Auto-complete on last slide |
+| `SliderComponent` | `React.ComponentType` | - | **Required if using slider questions.** Import from `@react-native-community/slider` |
 
 ### OnboardingSlide Interface
 
@@ -246,6 +250,18 @@ interface OnboardingSlide {
 
 #### Slider
 
+**⚠️ Important:** When using slider questions, you must provide the `SliderComponent` prop to `OnboardingScreen`:
+
+```tsx
+import Slider from '@react-native-community/slider';
+
+<OnboardingScreen
+  slides={slides}
+  SliderComponent={Slider}
+  onComplete={handleComplete}
+/>
+```
+
 ```typescript
 {
   type: 'slider',
@@ -255,6 +271,8 @@ interface OnboardingSlide {
 }
 ```
 
+**Note:** Make sure `@react-native-community/slider` is installed and properly linked (run `pod install` for iOS).
+
 #### Rating
 
 ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.6.9",
+  "version": "2.6.11",
   "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/QuestionRenderer.tsx

@@ -4,6 +4,7 @@
  */
 
 import React from "react";
+import { View, Text } from "react-native";
 import type { OnboardingQuestion } from "../../domain/entities/OnboardingQuestion";
 import { SingleChoiceQuestion } from "./questions/SingleChoiceQuestion";
 import { MultipleChoiceQuestion } from "./questions/MultipleChoiceQuestion";
@@ -61,7 +62,19 @@ export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
       );
     case "slider":
       if (!SliderComponent) {
-        return null;
+        // Show helpful error message if SliderComponent is not provided
+        return (
+          <View style={{ padding: 20, alignItems: "center" }}>
+            <Text style={{ color: "#FFFFFF", textAlign: "center" }}>
+              Slider component is not available. Please provide SliderComponent prop
+              to OnboardingScreen.
+            </Text>
+            <Text style={{ color: "#FFFFFF", textAlign: "center", marginTop: 8, fontSize: 12 }}>
+              Example: SliderComponent={Slider} where Slider is imported from
+              "@react-native-community/slider"
+            </Text>
+          </View>
+        );
       }
       return (
         <SliderQuestion

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

@@ -7,17 +7,10 @@
  * This component only handles UI coordination - no business logic
  */
 
-import React, { useMemo } from "react";
+import React from "react";
 import { StyleSheet } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAppDesignTokens } 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 { useOnboardingScreenState } from "../hooks/useOnboardingScreenState";
 import { OnboardingScreenContent } from "../components/OnboardingScreenContent";
 
 export interface OnboardingScreenProps extends OnboardingOptions {
@@ -99,116 +92,31 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   useGradient: globalUseGradient = false,
   SliderComponent,
 }) => {
-  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 {
+    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 containerStyle = useMemo(
-    () => [
-      styles.container,
-      {
-        paddingTop: insets.top,
-        backgroundColor: useGradient ? "transparent" : tokens.colors.backgroundPrimary,
-      },
-    ],
-    [insets.top, useGradient, tokens.colors.backgroundPrimary],
-  );
+  } = useOnboardingScreenState({
+    slides,
+    storageKey,
+    onComplete,
+    onSkip,
+    globalUseGradient,
+  });
 
   return (
     <OnboardingScreenContent
-      containerStyle={containerStyle}
+      containerStyle={[styles.container, containerStyle]}
       useGradient={useGradient}
       currentSlide={currentSlide}
       isFirstSlide={isFirstSlide}