@umituz/react-native-onboarding 3.6.4 → 3.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.4",
+  "version": "3.6.8",
   "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",
@@ -29,7 +29,7 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
-    "@umituz/react-native-design-system": "^2.1.0",
+    "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-storage": "latest",
     "expo-image": ">=2.0.0",
@@ -37,18 +37,19 @@
     "expo-video": ">=1.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
-    "react-native-safe-area-context": ">=4.0.0"
+    "react-native-safe-area-context": ">=4.0.0",
+    "zustand": ">=4.5.2"
   },
   "devDependencies": {
     "@expo/vector-icons": "^14.0.0",
-    "@react-native-async-storage/async-storage": "^2.2.0",
-    "@react-native-community/datetimepicker": "^8.5.1",
+    "@react-native-async-storage/async-storage": "^2.1.2",
+    "@react-native-community/datetimepicker": "^8.2.0",
     "@react-native/eslint-config": "^0.83.1",
     "@types/react": "~19.1.10",
     "@types/react-native": "^0.72.8",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
-    "@umituz/react-native-design-system": "^2.1.0",
+    "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-storage": "latest",
     "eslint": "^9.39.2",
@@ -60,7 +61,8 @@
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-safe-area-context": "^5.6.0",
-    "typescript": "~5.9.2"
+    "typescript": "~5.9.2",
+    "zustand": "^5.0.3"
   },
   "publishConfig": {
     "access": "public"

package/src/infrastructure/storage/OnboardingStore.ts

@@ -29,11 +29,17 @@ interface OnboardingActions {
   setUserData: (data: OnboardingUserData) => Promise<void>;
 }
 
-export const useOnboardingStore = createStore<OnboardingStoreState, OnboardingActions>({
+export const useOnboardingStore = createStore<
+  OnboardingStoreState,
+  OnboardingActions
+>({
   name: "onboarding-store",
   initialState: initialOnboardingState,
   persist: false,
-  actions: (set: (state: Partial<OnboardingStoreState>) => void, get: () => OnboardingStoreState) => {
+  actions: (
+    set: (state: Partial<OnboardingStoreState>) => void,
+    get: () => OnboardingStoreState
+  ): OnboardingActions => {
     const actions = createOnboardingStoreActions(set, get);
 
     return {

package/src/presentation/components/BaseSlide.tsx

@@ -12,7 +12,10 @@ export interface BaseSlideProps {
   contentPosition?: ContentPosition;
 }
 
-export const BaseSlide = ({ children, contentPosition = "center" }: BaseSlideProps) => {
+export const BaseSlide = ({
+  children,
+  contentPosition = "center",
+}: BaseSlideProps) => {
   const isBottom = contentPosition === "bottom";
 
   return (
@@ -20,14 +23,12 @@ export const BaseSlide = ({ children, contentPosition = "center" }: BaseSlidePro
       style={styles.container}
       contentContainerStyle={[
         styles.content,
-        isBottom && styles.contentBottom
+        isBottom ? styles.contentBottom : styles.contentCenter,
       ]}
       showsVerticalScrollIndicator={false}
       bounces={false}
     >
-      <View style={styles.slideContainer}>
-        {children}
-      </View>
+      <View style={styles.slideContainer}>{children}</View>
     </ScrollView>
   );
 };
@@ -38,14 +39,17 @@ const styles = StyleSheet.create({
   },
   content: {
     flexGrow: 1,
-    justifyContent: "center",
     paddingVertical: 40,
   },
+  contentCenter: {
+    justifyContent: "center",
+  },
   contentBottom: {
     justifyContent: "flex-end",
-    paddingBottom: 140,
+    paddingBottom: 40, // Reduced from 140 as footer handles its own padding
   },
   slideContainer: {
+    width: "100%",
     paddingHorizontal: 24,
     alignItems: "center",
   },

package/src/presentation/components/OnboardingBackground.tsx

@@ -0,0 +1,78 @@
+/**
+ * Onboarding Background Component
+ * Handles rendering of video, image or gradient backgrounds
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { Image } from "expo-image";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { BackgroundVideo } from "./BackgroundVideo";
+
+interface OnboardingBackgroundProps {
+  currentSlide: OnboardingSlide | undefined;
+  useGradient: boolean;
+  effectivelyUseGradient: boolean;
+  overlayOpacity: number;
+}
+
+export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
+  currentSlide,
+  useGradient,
+  effectivelyUseGradient,
+  overlayOpacity,
+}) => {
+  if (!currentSlide) return null;
+
+  const renderContent = () => {
+    if (currentSlide.backgroundVideo) {
+      return (
+        <BackgroundVideo
+          source={currentSlide.backgroundVideo}
+          overlayOpacity={overlayOpacity}
+        />
+      );
+    }
+
+    if (currentSlide.backgroundImage) {
+      return (
+        <Image
+          source={currentSlide.backgroundImage}
+          style={StyleSheet.absoluteFill}
+          contentFit="cover"
+          transition={500}
+        />
+      );
+    }
+
+    if (useGradient && currentSlide.gradient) {
+      return (
+        <LinearGradient
+          colors={currentSlide.gradient as [string, string, ...string[]]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={StyleSheet.absoluteFill}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+      {renderContent()}
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            backgroundColor: effectivelyUseGradient
+              ? `rgba(0,0,0,${overlayOpacity})`
+              : "transparent",
+          },
+        ]}
+      />
+    </View>
+  );
+};

package/src/presentation/components/OnboardingScreenContent.tsx

@@ -5,56 +5,14 @@
 
 import React from "react";
 import { View, StyleSheet, StatusBar } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import { Image } from "expo-image";
 import { useTheme } from "@umituz/react-native-design-system";
-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";
-import { BackgroundVideo } from "./BackgroundVideo";
-
-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;
-  variant?: "default" | "card" | "minimal" | "fullscreen";
-}
+import { OnboardingBackground } from "./OnboardingBackground";
+import { useOnboardingGestures } from "../hooks/useOnboardingGestures";
+import type { OnboardingScreenContentProps } from "../types/OnboardingProps";
 
 export const OnboardingScreenContent = ({
   containerStyle,
@@ -86,70 +44,41 @@ export const OnboardingScreenContent = ({
   variant = "default",
 }: OnboardingScreenContentProps) => {
   const { themeMode } = useTheme();
-  /* useGradient is now passed as a prop */
 
-  const hasMedia = !!currentSlide?.backgroundImage || !!currentSlide?.backgroundVideo;
+  const panResponder = useOnboardingGestures({
+    isFirstSlide,
+    isAnswerValid,
+    onNext,
+    onBack,
+  });
+
+  const hasMedia =
+    !!currentSlide?.backgroundImage || !!currentSlide?.backgroundVideo;
   const overlayOpacity = currentSlide?.overlayOpacity ?? 0.5;
-  // If media is present, valid gradient mode is enforced (white text)
   const effectivelyUseGradient = useGradient || hasMedia;
 
-  const renderBackground = () => {
-    if (!currentSlide) return null;
-
-    if (currentSlide.backgroundVideo) {
-      return (
-        <BackgroundVideo
-          source={currentSlide.backgroundVideo}
-          overlayOpacity={overlayOpacity}
-        />
-      );
-    }
-
-    if (currentSlide.backgroundImage) {
-      return (
-        <View style={StyleSheet.absoluteFill}>
-          <Image
-            source={currentSlide.backgroundImage}
-            style={StyleSheet.absoluteFill}
-            contentFit="cover"
-            transition={500}
-          />
-          <View
-            style={[
-              StyleSheet.absoluteFill,
-              { backgroundColor: `rgba(0,0,0,${overlayOpacity})` }
-            ]}
-          />
-        </View>
-      );
-    }
-
-    if (useGradient && currentSlide.gradient) {
-      return (
-        <LinearGradient
-          colors={currentSlide.gradient as [string, string, ...string[]]}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={StyleSheet.absoluteFill}
-        />
-      );
-    }
-
-    return null;
-  };
-
   return (
-    <View style={[styles.container, containerStyle]}>
-      <StatusBar barStyle={themeMode === "dark" || effectivelyUseGradient ? "light-content" : "dark-content"} />
+    <View
+      style={[styles.container, containerStyle]}
+      {...panResponder.panHandlers}
+    >
+      <StatusBar
+        barStyle={
+          themeMode === "dark" || effectivelyUseGradient
+            ? "light-content"
+            : "dark-content"
+        }
+      />
 
-      {renderBackground()}
+      <OnboardingBackground
+        currentSlide={currentSlide}
+        useGradient={useGradient}
+        effectivelyUseGradient={effectivelyUseGradient}
+        overlayOpacity={overlayOpacity}
+      />
 
       {renderHeader ? (
-        renderHeader({
-          isFirstSlide,
-          onBack,
-          onSkip,
-        })
+        renderHeader({ isFirstSlide, onBack, onSkip })
       ) : (
         <OnboardingHeader
           isFirstSlide={isFirstSlide}
@@ -160,22 +89,24 @@ export const OnboardingScreenContent = ({
           skipButtonText={skipButtonText}
         />
       )}
-      {currentSlide &&
-        (renderSlide ? (
-          renderSlide(currentSlide)
-        ) : currentSlide.type === "question" && currentSlide.question ? (
-          <QuestionSlide
-            slide={currentSlide}
-            value={currentAnswer}
-            onChange={onAnswerChange}
-            variant={variant}
-          />
-        ) : (
-          <OnboardingSlideComponent
-            slide={currentSlide}
-            variant={variant}
-          />
-        ))}
+
+      {currentSlide && (
+        <View style={styles.content}>
+          {renderSlide ? (
+            renderSlide(currentSlide)
+          ) : currentSlide.type === "question" && currentSlide.question ? (
+            <QuestionSlide
+              slide={currentSlide}
+              value={currentAnswer}
+              onChange={onAnswerChange}
+              variant={variant}
+            />
+          ) : (
+            <OnboardingSlideComponent slide={currentSlide} variant={variant} />
+          )}
+        </View>
+      )}
+
       {renderFooter ? (
         renderFooter({
           currentIndex,
@@ -207,4 +138,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  content: {
+    flex: 1,
+  },
 });

package/src/presentation/components/QuestionSlide.tsx

@@ -33,7 +33,7 @@ export const QuestionSlide = ({
   if (!question) return null;
 
   return (
-    <BaseSlide>
+    <BaseSlide contentPosition={slide.contentPosition}>
       <QuestionSlideHeader slide={slide} />
 
       <View style={styles.questionContainer}>

package/src/presentation/hooks/useOnboardingGestures.ts

@@ -0,0 +1,45 @@
+/**
+ * useOnboardingGestures Hook
+ * Handles swipe gestures for onboarding navigation
+ */
+
+import { useRef } from "react";
+import { PanResponder } from "react-native";
+
+interface UseOnboardingGesturesProps {
+  isFirstSlide: boolean;
+  isAnswerValid: boolean;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+export const useOnboardingGestures = ({
+  isFirstSlide,
+  isAnswerValid,
+  onNext,
+  onBack,
+}: UseOnboardingGesturesProps) => {
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        // Only trigger for horizontal swipes
+        return Math.abs(gestureState.dx) > 20 && Math.abs(gestureState.dy) < 40;
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dx > 50) {
+          // Swipe Right -> Previous
+          if (!isFirstSlide) {
+            onBack();
+          }
+        } else if (gestureState.dx < -50) {
+          // Swipe Left -> Next
+          if (isAnswerValid) {
+            onNext();
+          }
+        }
+      },
+    })
+  ).current;
+
+  return panResponder;
+};

package/src/presentation/types/OnboardingProps.ts

@@ -0,0 +1,46 @@
+/**
+ * Onboarding Screen Content Props
+ */
+
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+
+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;
+  variant?: "default" | "card" | "minimal" | "fullscreen";
+}