@umituz/react-native-onboarding 2.6.7 → 2.6.9

package/package.json

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

@@ -15,12 +15,24 @@ export interface QuestionRendererProps {
   question: OnboardingQuestion;
   value: any;
   onChange: (value: any) => void;
+  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 QuestionRenderer: React.FC<QuestionRendererProps> = ({
   question,
   value,
   onChange,
+  SliderComponent,
 }) => {
   switch (question.type) {
     case "single_choice":
@@ -48,11 +60,15 @@ export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
         />
       );
     case "slider":
+      if (!SliderComponent) {
+        return null;
+      }
       return (
         <SliderQuestion
           question={question}
           value={value}
           onChange={onChange}
+          SliderComponent={SliderComponent}
         />
       );
     case "rating":
@@ -67,4 +83,3 @@ export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
       return null;
   }
 };
-

package/src/presentation/components/QuestionSlide.tsx

@@ -15,6 +15,17 @@ export interface QuestionSlideProps {
   value: any;
   onChange: (value: any) => void;
   useGradient?: 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 QuestionSlide: React.FC<QuestionSlideProps> = ({
@@ -22,6 +33,7 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   value,
   onChange,
   useGradient = false,
+  SliderComponent,
 }) => {
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
@@ -36,7 +48,12 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
       <QuestionSlideHeader slide={slide} useGradient={useGradient} />
 
       <View style={styles.questionContainer}>
-        <QuestionRenderer question={question} value={value} onChange={onChange} />
+        <QuestionRenderer
+          question={question}
+          value={value}
+          onChange={onChange}
+          SliderComponent={SliderComponent}
+        />
       </View>
 
       {question.validation?.required && !value && (

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

@@ -4,22 +4,24 @@
  */
 
 import React, { useMemo } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { View, Text, StyleSheet } from "react-native";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
-// Lazy import slider to handle peer dependency gracefully
-let SliderComponent: any = null;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  SliderComponent = require("@react-native-community/slider").default;
-} catch {
-  // Slider not available - will show fallback
-}
-
 export interface SliderQuestionProps {
   question: OnboardingQuestion;
   value: number | undefined;
   onChange: (value: number) => void;
+  SliderComponent: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
 }
 
 const getSliderConfig = (question: OnboardingQuestion) => {
@@ -29,87 +31,35 @@ const getSliderConfig = (question: OnboardingQuestion) => {
   return { min, max };
 };
 
-const SliderFallback: React.FC<{
-  min: number;
-  max: number;
-  value: number;
-  onChange: (value: number) => void;
-}> = ({ min, max, value, onChange }) => {
-  const handleIncrement = () => {
-    if (value < max) {
-      onChange(value + 1);
-    }
-  };
-
-  const handleDecrement = () => {
-    if (value > min) {
-      onChange(value - 1);
-    }
-  };
-
-  return (
-    <View style={styles.fallbackContainer}>
-      <View style={styles.fallbackControls}>
-        <TouchableOpacity
-          style={styles.fallbackButton}
-          onPress={handleDecrement}
-          activeOpacity={0.7}
-        >
-          <Text style={styles.fallbackButtonText}>−</Text>
-        </TouchableOpacity>
-        <Text style={styles.fallbackValue}>{value}</Text>
-        <TouchableOpacity
-          style={styles.fallbackButton}
-          onPress={handleIncrement}
-          activeOpacity={0.7}
-        >
-          <Text style={styles.fallbackButtonText}>+</Text>
-        </TouchableOpacity>
-      </View>
-      <View style={styles.fallbackLabels}>
-        <Text style={styles.label}>{min}</Text>
-        <Text style={styles.label}>{max}</Text>
-      </View>
-    </View>
-  );
-};
-
 export const SliderQuestion: React.FC<SliderQuestionProps> = ({
   question,
   value,
   onChange,
+  SliderComponent,
 }) => {
   const { min, max } = useMemo(() => getSliderConfig(question), [question]);
   const currentValue = value ?? min;
 
-  const sliderProps = {
-    style: styles.slider,
-    minimumValue: min,
-    maximumValue: max,
-    value: currentValue,
-    onValueChange: onChange,
-    minimumTrackTintColor: "#FFFFFF",
-    maximumTrackTintColor: "rgba(255, 255, 255, 0.3)",
-    thumbTintColor: "#FFFFFF",
-    step: 1,
-  };
-
   return (
     <View style={styles.container}>
       <View style={styles.valueContainer}>
         <Text style={styles.valueText}>{currentValue}</Text>
       </View>
-      {SliderComponent ? (
-        <>
-          <SliderComponent {...sliderProps} />
-          <View style={styles.labels}>
-            <Text style={styles.label}>{min}</Text>
-            <Text style={styles.label}>{max}</Text>
-          </View>
-        </>
-      ) : (
-        <SliderFallback min={min} max={max} value={currentValue} onChange={onChange} />
-      )}
+      <SliderComponent
+        style={styles.slider}
+        minimumValue={min}
+        maximumValue={max}
+        value={currentValue}
+        onValueChange={onChange}
+        minimumTrackTintColor="#FFFFFF"
+        maximumTrackTintColor="rgba(255, 255, 255, 0.3)"
+        thumbTintColor="#FFFFFF"
+        step={1}
+      />
+      <View style={styles.labels}>
+        <Text style={styles.label}>{min}</Text>
+        <Text style={styles.label}>{max}</Text>
+      </View>
     </View>
   );
 };
@@ -142,39 +92,4 @@ const styles = StyleSheet.create({
     color: "rgba(255, 255, 255, 0.7)",
     fontWeight: "500",
   },
-  fallbackContainer: {
-    width: "100%",
-  },
-  fallbackControls: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 24,
-  },
-  fallbackButton: {
-    width: 60,
-    height: 60,
-    backgroundColor: "rgba(255, 255, 255, 0.2)",
-    borderRadius: 30,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  fallbackButtonText: {
-    fontSize: 48,
-    fontWeight: "bold",
-    color: "#FFFFFF",
-    lineHeight: 60,
-  },
-  fallbackValue: {
-    fontSize: 36,
-    fontWeight: "bold",
-    color: "#FFFFFF",
-    minWidth: 80,
-    textAlign: "center",
-  },
-  fallbackLabels: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginTop: 16,
-  },
 });

package/src/presentation/screens/OnboardingScreen.tsx

@@ -3,15 +3,14 @@
  *
  * 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 { StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAppDesignTokens, useTheme } from "@umituz/react-native-design-system-theme";
+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";
@@ -19,10 +18,7 @@ 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 { OnboardingScreenContent } from "../components/OnboardingScreenContent";
 
 export interface OnboardingScreenProps extends OnboardingOptions {
   /**
@@ -62,13 +58,25 @@ export interface OnboardingScreenProps extends OnboardingOptions {
    * When true, shows premium paywall before completing onboarding
    */
   showPaywallOnComplete?: boolean;
+
+  /**
+   * Slider component for slider questions
+   * Required if using slider question type
+   * Import from @react-native-community/slider
+   */
+  SliderComponent?: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
 }
 
-/**
- * Onboarding Screen Component
- *
- * Displays onboarding flow with theme-aware colors, animations, and navigation
- */
 export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   slides,
   onComplete,
@@ -89,15 +97,14 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   onUpgrade,
   showPaywallOnComplete = false,
   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 [];
     }
@@ -147,7 +154,6 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   // Handle next slide
   const handleNext = async () => {
     await saveCurrentAnswer(currentSlide);
-
     if (isLastSlide) {
       await completeOnboarding();
     } else {
@@ -189,92 +195,52 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
     );
   }, [currentSlide, currentAnswer]);
 
-  const styles = useMemo(
-    () => getStyles(insets, tokens, useGradient),
-    [insets, tokens, useGradient],
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      {
+        paddingTop: insets.top,
+        backgroundColor: useGradient ? "transparent" : tokens.colors.backgroundPrimary,
+      },
+    ],
+    [insets.top, useGradient, tokens.colors.backgroundPrimary],
   );
 
   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}
-          />
-        ) : (
-          <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={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,
+  },
+});