@umituz/react-native-onboarding 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -2
  2. package/src/domain/entities/OnboardingOptions.ts +10 -0
  3. package/src/infrastructure/storage/OnboardingStore.ts +12 -30
  4. package/src/presentation/components/OnboardingSlide.tsx +1 -1
  5. package/src/presentation/screens/OnboardingScreen.tsx +19 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-onboarding",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "description": "Generic onboarding flow for React Native apps with gradient backgrounds, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
@@ -61,4 +61,3 @@
61
61
  "LICENSE"
62
62
  ]
63
63
  }
64
-
package/src/domain/entities/OnboardingOptions.ts CHANGED
@@ -75,5 +75,15 @@ export interface OnboardingOptions {
75
75
  * Auto-complete onboarding on last slide (default: false)
76
76
  */
77
77
  autoComplete?: boolean;
78
+
79
+ /**
80
+ * Callback when user wants to upgrade from onboarding
81
+ */
82
+ onUpgrade?: () => void;
83
+
84
+ /**
85
+ * Show paywall modal on onboarding completion (default: false)
86
+ */
87
+ showPaywallOnComplete?: boolean;
78
88
  }
79
89
 
package/src/infrastructure/storage/OnboardingStore.ts CHANGED
@@ -51,45 +51,27 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
51
51
  },
52
52
 
53
53
  complete: async (storageKey = DEFAULT_STORAGE_KEY) => {
54
- // Optimistic update: Update state immediately for instant UI feedback
55
- set({
56
- isOnboardingComplete: true,
57
- loading: false,
58
- error: null
59
- });
54
+ set({ loading: true, error: null });
60
55
 
61
- // Persist to storage in background
62
56
  const result = await storageRepository.setString(storageKey, "true");
63
57
 
64
- // Update state only if storage operation failed
65
- if (!result.success) {
66
- set({
67
- isOnboardingComplete: false,
68
- loading: false,
69
- error: result.error?.message || "Failed to save onboarding completion",
70
- });
71
- }
58
+ set({
59
+ isOnboardingComplete: result.success,
60
+ loading: false,
61
+ error: result.success ? null : result.error?.message || null,
62
+ });
72
63
  },
73
64
 
74
65
  skip: async (storageKey = DEFAULT_STORAGE_KEY) => {
75
- // Optimistic update: Update state immediately for instant UI feedback
76
- set({
77
- isOnboardingComplete: true,
78
- loading: false,
79
- error: null
80
- });
66
+ set({ loading: true, error: null });
81
67
 
82
- // Persist to storage in background
83
68
  const result = await storageRepository.setString(storageKey, "true");
84
69
 
85
- // Update state only if storage operation failed
86
- if (!result.success) {
87
- set({
88
- isOnboardingComplete: false,
89
- loading: false,
90
- error: result.error?.message || "Failed to save onboarding skip",
91
- });
92
- }
70
+ set({
71
+ isOnboardingComplete: result.success,
72
+ loading: false,
73
+ error: result.success ? null : result.error?.message || null,
74
+ });
93
75
  },
94
76
 
95
77
  setCurrentStep: (step) => set({ currentStep: step }),
package/src/presentation/components/OnboardingSlide.tsx CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  import React, { useMemo } from "react";
8
8
  import { View, Text, StyleSheet, ScrollView } from "react-native";
9
- import { AtomicIcon } from "@umituz/react-native-design-system";
9
+ import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
10
10
  import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
11
11
 
12
12
  export interface OnboardingSlideProps {
package/src/presentation/screens/OnboardingScreen.tsx CHANGED
@@ -34,12 +34,26 @@ export interface OnboardingScreenProps extends OnboardingOptions {
34
34
  totalSlides: number;
35
35
  isLastSlide: boolean;
36
36
  onNext: () => void;
37
+ onUpgrade?: () => void;
38
+ showPaywallOnComplete?: boolean;
37
39
  }) => React.ReactNode;
38
40
 
39
41
  /**
40
42
  * Optional custom slide component
41
43
  */
42
44
  renderSlide?: (slide: OnboardingOptions["slides"][0]) => React.ReactNode;
45
+
46
+ /**
47
+ * Optional upgrade callback for premium features
48
+ * Called when user wants to upgrade from onboarding
49
+ */
50
+ onUpgrade?: () => void;
51
+
52
+ /**
53
+ * Show paywall modal on onboarding completion (default: false)
54
+ * When true, shows premium paywall before completing onboarding
55
+ */
56
+ showPaywallOnComplete?: boolean;
43
57
  }
44
58
 
45
59
  /**
@@ -64,6 +78,8 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
64
78
  renderHeader,
65
79
  renderFooter,
66
80
  renderSlide,
81
+ onUpgrade,
82
+ showPaywallOnComplete = false,
67
83
  }) => {
68
84
  const insets = useSafeAreaInsets();
69
85
  const onboardingStore = useOnboardingStore();
@@ -109,7 +125,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
109
125
  <View style={styles.container}>
110
126
  <StatusBar barStyle="light-content" />
111
127
  <LinearGradient
112
- colors={currentSlide.gradient}
128
+ colors={currentSlide.gradient as [string, string, ...string[]]}
113
129
  start={{ x: 0, y: 0 }}
114
130
  end={{ x: 1, y: 1 }}
115
131
  style={StyleSheet.absoluteFill}
@@ -141,6 +157,8 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
141
157
  totalSlides: slides.length,
142
158
  isLastSlide,
143
159
  onNext: handleNext,
160
+ onUpgrade,
161
+ showPaywallOnComplete,
144
162
  })
145
163
  ) : (
146
164
  <OnboardingFooter