@umituz/react-native-onboarding 3.6.15 → 3.6.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.15",
+  "version": "3.6.17",
   "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/hooks/useOnboardingFlow.ts

@@ -0,0 +1,50 @@
+/**
+ * Onboarding Flow Hook
+ * Manages onboarding completion state with persistence
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { DeviceEventEmitter } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const ONBOARDING_KEY = 'onboarding_complete';
+
+export interface UseOnboardingFlowResult {
+  isOnboardingComplete: boolean;
+  completeOnboarding: () => Promise<void>;
+}
+
+export const useOnboardingFlow = (): UseOnboardingFlowResult => {
+  const [isOnboardingComplete, setIsOnboardingComplete] = useState(false);
+
+  // Load persisted state
+  useEffect(() => {
+    const loadPersistedState = async () => {
+      const value = await AsyncStorage.getItem(ONBOARDING_KEY);
+      setIsOnboardingComplete(value === 'true');
+    };
+
+    loadPersistedState();
+
+    const subscription = DeviceEventEmitter.addListener(
+      'onboarding-complete',
+      () => {
+        setIsOnboardingComplete(true);
+        AsyncStorage.setItem(ONBOARDING_KEY, 'true');
+      },
+    );
+
+    return () => subscription.remove();
+  }, []);
+
+  const completeOnboarding = useCallback(async () => {
+    await AsyncStorage.setItem(ONBOARDING_KEY, 'true');
+    setIsOnboardingComplete(true);
+    DeviceEventEmitter.emit('onboarding-complete');
+  }, []);
+
+  return {
+    isOnboardingComplete,
+    completeOnboarding,
+  };
+};

package/src/index.ts

@@ -105,3 +105,4 @@ export { OnboardingResetSetting } from "./presentation/components/OnboardingRese
 export type { OnboardingResetSettingProps } from "./presentation/components/OnboardingResetSetting";
 
 
+export { useOnboardingFlow, type UseOnboardingFlowResult } from './hooks/useOnboardingFlow';

package/src/presentation/screens/OnboardingScreen.tsx

@@ -7,8 +7,9 @@
  * This component only handles UI coordination - no business logic
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { OnboardingOptions } from "../../domain/entities/OnboardingOptions";
 import { useOnboardingScreenState } from "../hooks/useOnboardingScreenState";
 import { OnboardingScreenContent } from "../components/OnboardingScreenContent";
@@ -55,9 +56,9 @@ export interface OnboardingScreenProps extends OnboardingOptions {
   showPaywallOnComplete?: boolean;
 
   /**
-   * Theme colors for the onboarding (Required to avoid hardcoded values)
+   * Theme colors for the onboarding (Optional - will use design tokens if not provided)
    */
-  themeColors: OnboardingColors;
+  themeColors?: OnboardingColors;
 }
 
 export const OnboardingScreen = ({
@@ -81,12 +82,37 @@ export const OnboardingScreen = ({
   showPaywallOnComplete = false,
   useGradient: globalUseGradient = false,
   themeVariant = "default",
-  themeColors,
+  themeColors: providedThemeColors,
 }: OnboardingScreenProps) => {
   if (__DEV__) {
     console.log("[OnboardingScreen] Rendering with slides:", slides?.length);
   }
 
+  const tokens = useAppDesignTokens();
+
+  const themeColors = useMemo(
+    () =>
+      providedThemeColors ?? {
+        iconColor: tokens.colors.primary,
+        textColor: tokens.colors.textPrimary,
+        subTextColor: tokens.colors.textSecondary,
+        buttonBg: tokens.colors.primary,
+        buttonTextColor: tokens.colors.onPrimary,
+        progressBarBg: tokens.colors.surfaceSecondary,
+        progressFillColor: tokens.colors.primary,
+        dotColor: tokens.colors.surfaceSecondary,
+        activeDotColor: tokens.colors.primary,
+        progressTextColor: tokens.colors.textSecondary,
+        headerButtonBg: tokens.colors.surface,
+        headerButtonBorder: tokens.colors.borderLight,
+        iconBg: tokens.colors.surfaceSecondary,
+        iconBorder: tokens.colors.borderLight,
+        errorColor: tokens.colors.error,
+        featureItemBg: tokens.colors.surfaceSecondary,
+      },
+    [providedThemeColors, tokens]
+  );
+
   const {
     filteredSlides,
     currentSlide,