@umituz/react-native-onboarding 3.6.3 → 3.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.3",
+  "version": "3.6.7",
   "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/domain/entities/OnboardingSlide.ts

@@ -11,6 +11,11 @@ import type { OnboardingQuestion } from "./OnboardingQuestion";
  */
 export type SlideType = "info" | "question" | "welcome" | "completion";
 
+/**
+ * Content position - determines where the text content is positioned
+ */
+export type ContentPosition = "center" | "bottom";
+
 /**
  * Onboarding Slide
  * Each slide represents one step in the onboarding flow
@@ -39,13 +44,23 @@ export interface OnboardingSlide {
   /**
    * Icon to display (emoji or icon name)
    */
-  icon: string;
+  icon?: string;
 
   /**
    * Type of icon: 'emoji' or 'icon' (default: 'icon')
    */
   iconType?: 'emoji' | 'icon';
 
+  /**
+   * Hide icon even if provided (default: false)
+   */
+  hideIcon?: boolean;
+
+  /**
+   * Content position: 'center' or 'bottom' (default: 'center')
+   */
+  contentPosition?: ContentPosition;
+
   /**
    * Gradient colors for the slide background (optional)
    * [startColor, endColor] or [color1, color2, color3] for multi-stop gradients
@@ -101,4 +116,3 @@ export interface OnboardingSlide {
    */
   skipIf?: (answers: Record<string, any>) => boolean;
 }
-

package/src/infrastructure/storage/OnboardingStore.ts

@@ -29,17 +29,23 @@ 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, get) => {
+  actions: (
+    set: (state: Partial<OnboardingStoreState>) => void,
+    get: () => OnboardingStoreState
+  ): OnboardingActions => {
     const actions = createOnboardingStoreActions(set, get);
 
     return {
-      setCurrentStep: (step) => set({ currentStep: step }),
-      setLoading: (loading) => set({ loading }),
-      setError: (error) => set({ error }),
+      setCurrentStep: (step: number) => set({ currentStep: step }),
+      setLoading: (loading: boolean) => set({ loading }),
+      setError: (error: string | null) => set({ error }),
       setState: set,
       getState: get,
 

package/src/presentation/components/BaseSlide.tsx

@@ -5,37 +5,48 @@
 
 import React from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
+import type { ContentPosition } from "../../domain/entities/OnboardingSlide";
 
 export interface BaseSlideProps {
-    children: React.ReactNode;
+  children: React.ReactNode;
+  contentPosition?: ContentPosition;
 }
 
-export const BaseSlide = ({ children }: BaseSlideProps) => {
-    return (
-        <ScrollView
-            style={styles.container}
-            contentContainerStyle={styles.content}
-            showsVerticalScrollIndicator={false}
-            bounces={false}
-        >
-            <View style={styles.slideContainer}>
-                {children}
-            </View>
-        </ScrollView>
-    );
+export const BaseSlide = ({ children, contentPosition = "center" }: BaseSlideProps) => {
+  const isBottom = contentPosition === "bottom";
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={[
+        styles.content,
+        isBottom && styles.contentBottom
+      ]}
+      showsVerticalScrollIndicator={false}
+      bounces={false}
+    >
+      <View style={styles.slideContainer}>
+        {children}
+      </View>
+    </ScrollView>
+  );
 };
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    content: {
-        flexGrow: 1,
-        justifyContent: "center",
-        paddingVertical: 40,
-    },
-    slideContainer: {
-        paddingHorizontal: 24,
-        alignItems: "center",
-    },
+  container: {
+    flex: 1,
+  },
+  content: {
+    flexGrow: 1,
+    justifyContent: "center",
+    paddingVertical: 40,
+  },
+  contentBottom: {
+    justifyContent: "flex-end",
+    paddingBottom: 140,
+  },
+  slideContainer: {
+    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,6 +89,7 @@ export const OnboardingScreenContent = ({
           skipButtonText={skipButtonText}
         />
       )}
+
       {currentSlide &&
         (renderSlide ? (
           renderSlide(currentSlide)
@@ -171,11 +101,9 @@ export const OnboardingScreenContent = ({
             variant={variant}
           />
         ) : (
-          <OnboardingSlideComponent
-            slide={currentSlide}
-            variant={variant}
-          />
+          <OnboardingSlideComponent slide={currentSlide} variant={variant} />
         ))}
+
       {renderFooter ? (
         renderFooter({
           currentIndex,

package/src/presentation/components/OnboardingSlide.tsx

@@ -21,13 +21,14 @@ export const OnboardingSlide = ({
 }: OnboardingSlideProps) => {
   const { colors } = useOnboardingTheme();
 
-  const hasIcon = !!slide.icon;
+  const shouldShowIcon = slide.icon && !slide.hideIcon;
   const isEmoji = slide.iconType === 'emoji';
   const iconSize = variant === "minimal" ? 80 : 72;
+  const contentPosition = slide.contentPosition || "center";
 
   return (
-    <BaseSlide>
-      {hasIcon && (
+    <BaseSlide contentPosition={contentPosition}>
+      {shouldShowIcon && slide.icon && (
         <View style={styles.iconBox}>
           {isEmoji ? (
             <AtomicText style={{ fontSize: iconSize }}>{slide.icon}</AtomicText>

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";
+}