@umituz/react-native-onboarding 2.6.8 → 2.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.6.8",
+  "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/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 {
   /**
@@ -81,11 +77,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,
@@ -110,12 +101,10 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
 }) => {
   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 [];
     }
@@ -165,7 +154,6 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   // Handle next slide
   const handleNext = async () => {
     await saveCurrentAnswer(currentSlide);
-
     if (isLastSlide) {
       await completeOnboarding();
     } else {
@@ -207,93 +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}
-            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={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,
+  },
+});