@umituz/react-native-onboarding 2.2.0 → 2.4.0

package/README.md

@@ -185,6 +185,8 @@ const slides: OnboardingSlide[] = [
 | `showProgressText` | `boolean` | `true` | Show progress text (1 of 5) |
 | `storageKey` | `string` | - | Custom storage key for completion state |
 | `autoComplete` | `boolean` | `false` | Auto-complete on last slide |
+| `enableDeviceTracking` | `boolean` | `false` | Collect device info during onboarding |
+| `userId` | `string` | - | User ID for device tracking (optional) |
 
 ### OnboardingSlide Interface
 
@@ -328,6 +330,69 @@ const isComplete = userData.completedAt !== undefined;
 
 // Check if onboarding was skipped
 const wasSkipped = userData.skipped === true;
+
+// Get device info (if device tracking was enabled)
+const deviceInfo = userData.deviceInfo;
+```
+
+## 📱 Device Tracking (Optional)
+
+Collect device information during onboarding for analytics or support purposes.
+
+### Installation
+
+First, install the device tracking package:
+
+```bash
+npm install @umituz/react-native-device
+```
+
+### Usage
+
+```tsx
+import { OnboardingScreen } from '@umituz/react-native-onboarding';
+
+<OnboardingScreen
+  slides={slides}
+  enableDeviceTracking={true}
+  userId="user123" // Optional
+  onComplete={async () => {
+    const userData = onboardingStore.getUserData();
+    
+    // Device info is now available
+    console.log('Device:', userData.deviceInfo?.platform);
+    console.log('OS:', userData.deviceInfo?.osVersion);
+    console.log('App:', userData.deviceInfo?.appVersion);
+  }}
+/>
+```
+
+### Device Info Structure
+
+```typescript
+{
+  deviceId: string;
+  platform: 'ios' | 'android' | 'web';
+  osVersion: string;
+  appVersion: string;
+  deviceName: string;
+  manufacturer: string;
+  brand: string;
+  timestamp: number;
+  userId?: string; // If provided
+}
+```
+
+### Manual Device Info Collection
+
+```tsx
+import { OnboardingDeviceTrackingService } from '@umituz/react-native-onboarding';
+
+// Collect device info manually
+const deviceInfo = await OnboardingDeviceTrackingService.collectDeviceInfo('user123');
+
+// Check if device tracking is available
+const isAvailable = await OnboardingDeviceTrackingService.isDeviceTrackingAvailable();
 ```
 
 ## 🔄 Resetting Onboarding

package/package.json

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

@@ -85,5 +85,17 @@ export interface OnboardingOptions {
    * Show paywall modal on onboarding completion (default: false)
    */
   showPaywallOnComplete?: boolean;
+
+  /**
+   * Enable device tracking (default: false)
+   * When enabled, collects device information during onboarding
+   */
+  enableDeviceTracking?: boolean;
+
+  /**
+   * User ID for device tracking (optional)
+   * Only used when enableDeviceTracking is true
+   */
+  userId?: string;
 }
 

package/src/domain/entities/OnboardingUserData.ts

@@ -39,5 +39,17 @@ export interface OnboardingUserData {
     gender?: string;
     [key: string]: any;
   };
+
+  /**
+   * Device information (optional)
+   * Only collected when enableDeviceTracking is true
+   */
+  deviceInfo?: {
+    deviceId?: string;
+    platform?: string;
+    osVersion?: string;
+    appVersion?: string;
+    [key: string]: any;
+  };
 }
 

package/src/index.ts

@@ -52,6 +52,7 @@ export {
   useOnboardingNavigation,
   type UseOnboardingNavigationReturn,
 } from "./infrastructure/hooks/useOnboardingNavigation";
+export { OnboardingDeviceTrackingService } from "./infrastructure/services/OnboardingDeviceTrackingService";
 
 // =============================================================================
 // PRESENTATION LAYER - Components and Screens

package/src/infrastructure/storage/OnboardingStore.ts

@@ -75,6 +75,7 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
     // Update user data with completion timestamp
     const userData = get().userData;
     userData.completedAt = new Date().toISOString();
+
     await storageRepository.setObject(USER_DATA_STORAGE_KEY, userData);
 
     set({

package/src/presentation/screens/OnboardingScreen.tsx

@@ -217,16 +217,18 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
           useGradient={useGradient}
         />
       )}
-      {renderSlide ? (
-        renderSlide(currentSlide)
-      ) : currentSlide.type === "question" && currentSlide.question ? (
-        <QuestionSlide
-          slide={currentSlide}
-          value={currentAnswer}
-          onChange={setCurrentAnswer}
-        />
-      ) : (
-        <OnboardingSlideComponent slide={currentSlide} />
+      {currentSlide && (
+        renderSlide ? (
+          renderSlide(currentSlide)
+        ) : currentSlide.type === "question" && currentSlide.question ? (
+          <QuestionSlide
+            slide={currentSlide}
+            value={currentAnswer}
+            onChange={setCurrentAnswer}
+          />
+        ) : (
+          <OnboardingSlideComponent slide={currentSlide} />
+        )
       )}
       {renderFooter ? (
         renderFooter({