@blazejkustra/react-native-onboarding 0.1.3 → 1.0.0
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/README.md +13 -6
- package/lib/module/index.js +4 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/spill-onboarding/components/OnboardingModal.js +3 -3
- package/lib/module/spill-onboarding/components/OnboardingModal.js.map +1 -1
- package/lib/module/spill-onboarding/index.js +1 -5
- package/lib/module/spill-onboarding/index.js.map +1 -1
- package/lib/typescript/src/index.d.ts +2 -2
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/spill-onboarding/index.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/index.tsx +8 -2
- package/src/spill-onboarding/components/OnboardingModal.tsx +3 -3
- package/src/spill-onboarding/index.tsx +1 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
#
|
|
3
|
+
# react-native-onboarding
|
|
4
4
|
|
|
5
5
|
✨ **Beautiful, customizable onboarding/tutorial flows** for React Native — with smooth animations, flexible theming, and highly customizable components.
|
|
6
6
|
|
|
@@ -338,21 +338,28 @@ skipButton={({ onPress }) => (
|
|
|
338
338
|
### Image Consistency
|
|
339
339
|
Use images with the same dimensions for the best visual effect. This prevents layout shifts and creates smooth transitions between steps.
|
|
340
340
|
|
|
341
|
+
**Image creator**: Use this [Figma Community template](https://www.figma.com/community/file/1556597720381753708) to design consistent onboarding illustrations and export assets with the recommended dimensions.
|
|
342
|
+
|
|
341
343
|
### Persistent Storage
|
|
342
344
|
Save onboarding completion state to persistent storage (MMKV, AsyncStorage) to prevent users from seeing the onboarding again after completion.
|
|
343
345
|
|
|
344
346
|
### Navigation
|
|
345
347
|
On completion, navigate users to the main app to provide a smooth transition from onboarding to the core experience.
|
|
346
348
|
|
|
347
|
-
|
|
348
349
|
## 🤝 Contributing
|
|
349
350
|
|
|
350
351
|
We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for development workflow and [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) for our code of conduct.
|
|
351
352
|
|
|
352
|
-
## 📄 License
|
|
353
|
-
|
|
354
|
-
MIT © [Blazej Kustra](https://github.com/blazejkustra)
|
|
355
|
-
|
|
356
353
|
---
|
|
357
354
|
|
|
358
355
|
Built with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) 🛠
|
|
356
|
+
|
|
357
|
+
## React Native Onboarding is created by Software Mansion
|
|
358
|
+
|
|
359
|
+
[](https://swmansion.com)
|
|
360
|
+
|
|
361
|
+
Since 2012 [Software Mansion](https://swmansion.com) is a software agency with
|
|
362
|
+
experience in building web and mobile apps. We are Core React Native
|
|
363
|
+
Contributors and experts in dealing with all kinds of React Native issues. We
|
|
364
|
+
can help you build your next dream product –
|
|
365
|
+
[Hire us](https://swmansion.com/contact/projects?utm_source=typegpu&utm_medium=readme).
|
package/lib/module/index.js
CHANGED
|
@@ -3,13 +3,16 @@
|
|
|
3
3
|
import ThemeProvider from "./utils/ThemeContext.js";
|
|
4
4
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
5
5
|
import SpillOnboarding from "./spill-onboarding/index.js";
|
|
6
|
+
import { Platform } from 'react-native';
|
|
7
|
+
import React from 'react';
|
|
6
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
9
|
function Onboarding({
|
|
8
10
|
colors,
|
|
9
11
|
fonts,
|
|
10
12
|
...props
|
|
11
13
|
}) {
|
|
12
|
-
|
|
14
|
+
const SafeArea = Platform.OS === 'web' ? React.Fragment : SafeAreaProvider;
|
|
15
|
+
return /*#__PURE__*/_jsx(SafeArea, {
|
|
13
16
|
children: /*#__PURE__*/_jsx(ThemeProvider, {
|
|
14
17
|
colors: colors,
|
|
15
18
|
fonts: fonts,
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ThemeProvider","SafeAreaProvider","SpillOnboarding","jsx","_jsx","Onboarding","colors","fonts","props","children"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,aAAa,MAAM,yBAAsB;AAChD,SAASC,gBAAgB,QAAQ,gCAAgC;
|
|
1
|
+
{"version":3,"names":["ThemeProvider","SafeAreaProvider","SpillOnboarding","Platform","React","jsx","_jsx","Onboarding","colors","fonts","props","SafeArea","OS","Fragment","children"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,aAAa,MAAM,yBAAsB;AAChD,SAASC,gBAAgB,QAAQ,gCAAgC;AASjE,OAAOC,eAAe,MAAM,6BAAoB;AAChD,SAASC,QAAQ,QAAQ,cAAc;AACvC,OAAOC,KAAK,MAAM,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1B,SAASC,UAAUA,CAAC;EAAEC,MAAM;EAAEC,KAAK;EAAE,GAAGC;AAAuB,CAAC,EAAE;EAChE,MAAMC,QAAQ,GAAGR,QAAQ,CAACS,EAAE,KAAK,KAAK,GAAGR,KAAK,CAACS,QAAQ,GAAGZ,gBAAgB;EAE1E,oBACEK,IAAA,CAACK,QAAQ;IAAAG,QAAA,eACPR,IAAA,CAACN,aAAa;MAACQ,MAAM,EAAEA,MAAO;MAACC,KAAK,EAAEA,KAAM;MAAAK,QAAA,eAC1CR,IAAA,CAACJ,eAAe;QAAA,GAAKQ;MAAK,CAAG;IAAC,CACjB;EAAC,CACR,CAAC;AAEf;AAEA,eAAeH,UAAU","ignoreList":[]}
|
|
@@ -48,9 +48,9 @@ const createStyles = (theme, height, width) => StyleSheet.create({
|
|
|
48
48
|
bottom: 0
|
|
49
49
|
},
|
|
50
50
|
webModal: {
|
|
51
|
-
width: Math.min(width
|
|
52
|
-
height: Math.min(height
|
|
53
|
-
borderRadius: 28,
|
|
51
|
+
width: Math.min(width, 500),
|
|
52
|
+
height: Math.min(height, 800),
|
|
53
|
+
borderRadius: width > 500 ? 28 : 0,
|
|
54
54
|
shadowColor: '#000',
|
|
55
55
|
shadowOffset: {
|
|
56
56
|
width: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","View","StyleSheet","Modal","TouchableOpacity","useWindowDimensions","useTheme","jsx","_jsx","jsxs","_jsxs","OnboardingModal","onSkip","children","theme","height","width","styles","createStyles","visible","transparent","onRequestClose","style","webOverlay","webBackdrop","activeOpacity","onPress","webModal","create","flex","backgroundColor","justifyContent","alignItems","position","top","left","right","bottom","Math","min","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","overflow","bg","secondary","webContent","paddingTop"],"sourceRoot":"../../../../src","sources":["spill-onboarding/components/OnboardingModal.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACEC,IAAI,EACJC,UAAU,EACVC,KAAK,EACLC,gBAAgB,EAChBC,mBAAmB,QACd,cAAc;AACrB,SAASC,QAAQ,QAAQ,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQpD,eAAe,SAASC,eAAeA,CAAC;EACtCC,MAAM;EACNC;AACoB,CAAC,EAAE;EACvB,MAAM;IAAEC;EAAM,CAAC,GAAGR,QAAQ,CAAC,CAAC;EAC5B,MAAM;IAAES,MAAM;IAAEC;EAAM,CAAC,GAAGX,mBAAmB,CAAC,CAAC;EAC/C,MAAMY,MAAM,GAAGjB,OAAO,CACpB,MAAMkB,YAAY,CAACJ,KAAK,EAAEC,MAAM,EAAEC,KAAK,CAAC,EACxC,CAACD,MAAM,EAAEC,KAAK,EAAEF,KAAK,CACvB,CAAC;EAED,oBACEN,IAAA,CAACL,KAAK;IAACgB,OAAO;IAACC,WAAW;IAACC,cAAc,EAAET,MAAO;IAAAC,QAAA,eAChDH,KAAA,CAACT,IAAI;MAACqB,KAAK,EAAEL,MAAM,CAACM,UAAW;MAAAV,QAAA,gBAC7BL,IAAA,CAACJ,gBAAgB;QACfkB,KAAK,EAAEL,MAAM,CAACO,WAAY;QAC1BC,aAAa,EAAE,CAAE;QACjBC,OAAO,EAAEd;MAAO,CACjB,CAAC,eACFJ,IAAA,CAACP,IAAI;QAACqB,KAAK,EAAEL,MAAM,CAACU,QAAS;QAAAd,QAAA,EAAEA;MAAQ,CAAO,CAAC;IAAA,CAC3C;EAAC,CACF,CAAC;AAEZ;AAEA,MAAMK,YAAY,GAAGA,CAACJ,KAAY,EAAEC,MAAc,EAAEC,KAAa,KAC/Dd,UAAU,CAAC0B,MAAM,CAAC;EAChBL,UAAU,EAAE;IACVM,IAAI,EAAE,CAAC;IACPC,eAAe,EAAE,oBAAoB;IACrCC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDR,WAAW,EAAE;IACXS,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV,CAAC;EACDV,QAAQ,EAAE;IACRX,KAAK,EAAEsB,IAAI,CAACC,GAAG,CAACvB,KAAK,
|
|
1
|
+
{"version":3,"names":["React","useMemo","View","StyleSheet","Modal","TouchableOpacity","useWindowDimensions","useTheme","jsx","_jsx","jsxs","_jsxs","OnboardingModal","onSkip","children","theme","height","width","styles","createStyles","visible","transparent","onRequestClose","style","webOverlay","webBackdrop","activeOpacity","onPress","webModal","create","flex","backgroundColor","justifyContent","alignItems","position","top","left","right","bottom","Math","min","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","overflow","bg","secondary","webContent","paddingTop"],"sourceRoot":"../../../../src","sources":["spill-onboarding/components/OnboardingModal.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACEC,IAAI,EACJC,UAAU,EACVC,KAAK,EACLC,gBAAgB,EAChBC,mBAAmB,QACd,cAAc;AACrB,SAASC,QAAQ,QAAQ,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQpD,eAAe,SAASC,eAAeA,CAAC;EACtCC,MAAM;EACNC;AACoB,CAAC,EAAE;EACvB,MAAM;IAAEC;EAAM,CAAC,GAAGR,QAAQ,CAAC,CAAC;EAC5B,MAAM;IAAES,MAAM;IAAEC;EAAM,CAAC,GAAGX,mBAAmB,CAAC,CAAC;EAC/C,MAAMY,MAAM,GAAGjB,OAAO,CACpB,MAAMkB,YAAY,CAACJ,KAAK,EAAEC,MAAM,EAAEC,KAAK,CAAC,EACxC,CAACD,MAAM,EAAEC,KAAK,EAAEF,KAAK,CACvB,CAAC;EAED,oBACEN,IAAA,CAACL,KAAK;IAACgB,OAAO;IAACC,WAAW;IAACC,cAAc,EAAET,MAAO;IAAAC,QAAA,eAChDH,KAAA,CAACT,IAAI;MAACqB,KAAK,EAAEL,MAAM,CAACM,UAAW;MAAAV,QAAA,gBAC7BL,IAAA,CAACJ,gBAAgB;QACfkB,KAAK,EAAEL,MAAM,CAACO,WAAY;QAC1BC,aAAa,EAAE,CAAE;QACjBC,OAAO,EAAEd;MAAO,CACjB,CAAC,eACFJ,IAAA,CAACP,IAAI;QAACqB,KAAK,EAAEL,MAAM,CAACU,QAAS;QAAAd,QAAA,EAAEA;MAAQ,CAAO,CAAC;IAAA,CAC3C;EAAC,CACF,CAAC;AAEZ;AAEA,MAAMK,YAAY,GAAGA,CAACJ,KAAY,EAAEC,MAAc,EAAEC,KAAa,KAC/Dd,UAAU,CAAC0B,MAAM,CAAC;EAChBL,UAAU,EAAE;IACVM,IAAI,EAAE,CAAC;IACPC,eAAe,EAAE,oBAAoB;IACrCC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDR,WAAW,EAAE;IACXS,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV,CAAC;EACDV,QAAQ,EAAE;IACRX,KAAK,EAAEsB,IAAI,CAACC,GAAG,CAACvB,KAAK,EAAE,GAAG,CAAC;IAC3BD,MAAM,EAAEuB,IAAI,CAACC,GAAG,CAACxB,MAAM,EAAE,GAAG,CAAC;IAC7ByB,YAAY,EAAExB,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,CAAC;IAClCyB,WAAW,EAAE,MAAM;IACnBC,YAAY,EAAE;MACZ1B,KAAK,EAAE,CAAC;MACRD,MAAM,EAAE;IACV,CAAC;IACD4B,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE,QAAQ;IAClBf,eAAe,EAAEhB,KAAK,CAACgC,EAAE,CAACC;EAC5B,CAAC;EACDC,UAAU,EAAE;IACVnB,IAAI,EAAE,CAAC;IACPoB,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -9,7 +9,6 @@ import OnboardingStepPanel from "./components/OnboardingStepPanel.js";
|
|
|
9
9
|
import OnboardingStepContainer from "./components/OnboardingStepContainer.js";
|
|
10
10
|
import OnboardingImageContainer from "./components/OnboardingImageContainer.js";
|
|
11
11
|
import OnboardingModal from "./components/OnboardingModal.js";
|
|
12
|
-
import { useWindowDimensions } from 'react-native';
|
|
13
12
|
import useMeasureHeight from "./hooks/useMeasureHeight.js";
|
|
14
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
14
|
function SpillOnboarding({
|
|
@@ -28,9 +27,6 @@ function SpillOnboarding({
|
|
|
28
27
|
const {
|
|
29
28
|
theme
|
|
30
29
|
} = useTheme();
|
|
31
|
-
const {
|
|
32
|
-
width: screenWidth
|
|
33
|
-
} = useWindowDimensions();
|
|
34
30
|
const styles = useMemo(() => createStyles(theme), [theme]);
|
|
35
31
|
const backgroundSpillProgress = useSharedValue(0);
|
|
36
32
|
const [step, setStep] = useState(-1);
|
|
@@ -155,7 +151,7 @@ function SpillOnboarding({
|
|
|
155
151
|
});
|
|
156
152
|
|
|
157
153
|
// On web, wrap in modal; on mobile, render directly
|
|
158
|
-
if (Platform.OS === 'web' &&
|
|
154
|
+
if (Platform.OS === 'web' && wrapInModalOnWeb) {
|
|
159
155
|
return /*#__PURE__*/_jsx(OnboardingModal, {
|
|
160
156
|
onSkip: onSkip,
|
|
161
157
|
children: onboardingContent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","useState","useEffect","useCallback","View","BackHandler","Platform","StyleSheet","useTheme","OnboardingIntroPanel","useSharedValue","withTiming","OnboardingStepPanel","OnboardingStepContainer","OnboardingImageContainer","OnboardingModal","
|
|
1
|
+
{"version":3,"names":["useMemo","useState","useEffect","useCallback","View","BackHandler","Platform","StyleSheet","useTheme","OnboardingIntroPanel","useSharedValue","withTiming","OnboardingStepPanel","OnboardingStepContainer","OnboardingImageContainer","OnboardingModal","useMeasureHeight","jsx","_jsx","jsxs","_jsxs","SpillOnboarding","animationDuration","introPanel","introPanelProps","steps","onComplete","onSkip","onStepChange","onStepChangeProps","showCloseButton","showBackButton","wrapInModalOnWeb","background","skipButton","theme","styles","createStyles","backgroundSpillProgress","step","setStep","currentStep","undefined","firstStep","stepNumber","backHandler","addEventListener","set","duration","setTimeout","remove","stepPanel","screen","onPressStart","onNextPress","length","onBackPress","renderIntroPanel","title","subtitle","button","image","renderStepContent","component","onNext","onBack","isLast","label","description","buttonLabel","buttonPrimary","currentStepImage","onboardingContent","style","container","ref","children","bottomPanel","position","screenHeight","height","OS","create","flex","backgroundColor","bg","secondary","paddingHorizontal","paddingBottom","insets","bottom","left","right"],"sourceRoot":"../../../src","sources":["spill-onboarding/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { type OnboardingProps, type OnboardingColors, type OnboardingFonts, type OnboardingIntroPanelProps, type OnboardingStepPanelProps } from './spill-onboarding/types';
|
|
1
|
+
import { type OnboardingProps, type OnboardingColors, type OnboardingFonts, type OnboardingIntroPanelProps, type OnboardingStepPanelProps, type OnboardingStep } from './spill-onboarding/types';
|
|
2
2
|
declare function Onboarding({ colors, fonts, ...props }: OnboardingProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Onboarding;
|
|
4
|
-
export type { OnboardingProps, OnboardingColors, OnboardingFonts, OnboardingIntroPanelProps, OnboardingStepPanelProps, };
|
|
4
|
+
export type { OnboardingProps, OnboardingColors, OnboardingFonts, OnboardingIntroPanelProps, OnboardingStepPanelProps, OnboardingStep, };
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,cAAc,EACpB,MAAM,0BAA0B,CAAC;AAKlC,iBAAS,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAU/D;AAED,eAAe,UAAU,CAAC;AAC1B,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,yBAAyB,EACzB,wBAAwB,EACxB,cAAc,GACf,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/spill-onboarding/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/spill-onboarding/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAI/C,iBAAS,eAAe,CAAC,EACvB,iBAAuB,EACvB,UAAU,EAAE,eAAe,EAC3B,KAAK,EACL,UAAU,EACV,MAAM,EACN,YAAY,EAAE,iBAAiB,EAC/B,eAAsB,EACtB,cAAqB,EACrB,gBAAuB,EACvB,UAAU,EACV,UAAU,GACX,EAAE,eAAe,2CAwKjB;AAED,eAAe,eAAe,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blazejkustra/react-native-onboarding",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Onboarding/tutorial flow for React Native.",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -49,14 +49,14 @@
|
|
|
49
49
|
],
|
|
50
50
|
"repository": {
|
|
51
51
|
"type": "git",
|
|
52
|
-
"url": "git+https://github.com/
|
|
52
|
+
"url": "git+https://github.com/software-mansion-labs/react-native-onboarding.git"
|
|
53
53
|
},
|
|
54
54
|
"author": "Blazej Kustra <kustrablazej@gmail.com> (https://github.com/blazejkustra)",
|
|
55
55
|
"license": "MIT",
|
|
56
56
|
"bugs": {
|
|
57
|
-
"url": "https://github.com/
|
|
57
|
+
"url": "https://github.com/software-mansion-labs/react-native-onboarding/issues"
|
|
58
58
|
},
|
|
59
|
-
"homepage": "https://github.com/
|
|
59
|
+
"homepage": "https://github.com/software-mansion-labs/react-native-onboarding#readme",
|
|
60
60
|
"publishConfig": {
|
|
61
61
|
"registry": "https://registry.npmjs.org/"
|
|
62
62
|
},
|
package/src/index.tsx
CHANGED
|
@@ -6,16 +6,21 @@ import {
|
|
|
6
6
|
type OnboardingFonts,
|
|
7
7
|
type OnboardingIntroPanelProps,
|
|
8
8
|
type OnboardingStepPanelProps,
|
|
9
|
+
type OnboardingStep,
|
|
9
10
|
} from './spill-onboarding/types';
|
|
10
11
|
import SpillOnboarding from './spill-onboarding';
|
|
12
|
+
import { Platform } from 'react-native';
|
|
13
|
+
import React from 'react';
|
|
11
14
|
|
|
12
15
|
function Onboarding({ colors, fonts, ...props }: OnboardingProps) {
|
|
16
|
+
const SafeArea = Platform.OS === 'web' ? React.Fragment : SafeAreaProvider;
|
|
17
|
+
|
|
13
18
|
return (
|
|
14
|
-
<
|
|
19
|
+
<SafeArea>
|
|
15
20
|
<ThemeProvider colors={colors} fonts={fonts}>
|
|
16
21
|
<SpillOnboarding {...props} />
|
|
17
22
|
</ThemeProvider>
|
|
18
|
-
</
|
|
23
|
+
</SafeArea>
|
|
19
24
|
);
|
|
20
25
|
}
|
|
21
26
|
|
|
@@ -26,4 +31,5 @@ export type {
|
|
|
26
31
|
OnboardingFonts,
|
|
27
32
|
OnboardingIntroPanelProps,
|
|
28
33
|
OnboardingStepPanelProps,
|
|
34
|
+
OnboardingStep,
|
|
29
35
|
};
|
|
@@ -55,9 +55,9 @@ const createStyles = (theme: Theme, height: number, width: number) =>
|
|
|
55
55
|
bottom: 0,
|
|
56
56
|
},
|
|
57
57
|
webModal: {
|
|
58
|
-
width: Math.min(width
|
|
59
|
-
height: Math.min(height
|
|
60
|
-
borderRadius: 28,
|
|
58
|
+
width: Math.min(width, 500),
|
|
59
|
+
height: Math.min(height, 800),
|
|
60
|
+
borderRadius: width > 500 ? 28 : 0,
|
|
61
61
|
shadowColor: '#000',
|
|
62
62
|
shadowOffset: {
|
|
63
63
|
width: 0,
|
|
@@ -14,7 +14,6 @@ import OnboardingStepContainer from './components/OnboardingStepContainer';
|
|
|
14
14
|
import OnboardingImageContainer from './components/OnboardingImageContainer';
|
|
15
15
|
import OnboardingModal from './components/OnboardingModal';
|
|
16
16
|
import { type OnboardingProps } from './types';
|
|
17
|
-
import { useWindowDimensions } from 'react-native';
|
|
18
17
|
import useMeasureHeight from './hooks/useMeasureHeight';
|
|
19
18
|
import { type Theme } from '../utils/theme';
|
|
20
19
|
|
|
@@ -32,7 +31,6 @@ function SpillOnboarding({
|
|
|
32
31
|
skipButton,
|
|
33
32
|
}: OnboardingProps) {
|
|
34
33
|
const { theme } = useTheme();
|
|
35
|
-
const { width: screenWidth } = useWindowDimensions();
|
|
36
34
|
|
|
37
35
|
const styles = useMemo(() => createStyles(theme), [theme]);
|
|
38
36
|
const backgroundSpillProgress = useSharedValue(0);
|
|
@@ -192,7 +190,7 @@ function SpillOnboarding({
|
|
|
192
190
|
);
|
|
193
191
|
|
|
194
192
|
// On web, wrap in modal; on mobile, render directly
|
|
195
|
-
if (Platform.OS === 'web' &&
|
|
193
|
+
if (Platform.OS === 'web' && wrapInModalOnWeb) {
|
|
196
194
|
return (
|
|
197
195
|
<OnboardingModal onSkip={onSkip}>{onboardingContent}</OnboardingModal>
|
|
198
196
|
);
|