@umituz/react-native-onboarding 1.0.7 → 1.0.8
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-onboarding",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
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
|
-
|
|
@@ -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
|
|
|
@@ -51,45 +51,27 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
|
|
|
51
51
|
},
|
|
52
52
|
|
|
53
53
|
complete: async (storageKey = DEFAULT_STORAGE_KEY) => {
|
|
54
|
-
|
|
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
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
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
|
-
|
|
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
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
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 }),
|
|
@@ -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();
|
|
@@ -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
|