react-native-onboarding-steps 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.
Files changed (70) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +195 -0
  3. package/lib/commonjs/Button.js +62 -0
  4. package/lib/commonjs/Button.js.map +1 -0
  5. package/lib/commonjs/Onboarding.js +137 -0
  6. package/lib/commonjs/Onboarding.js.map +1 -0
  7. package/lib/commonjs/Step.js +45 -0
  8. package/lib/commonjs/Step.js.map +1 -0
  9. package/lib/commonjs/Steps.js +66 -0
  10. package/lib/commonjs/Steps.js.map +1 -0
  11. package/lib/commonjs/index.js +54 -0
  12. package/lib/commonjs/index.js.map +1 -0
  13. package/lib/commonjs/package.json +1 -0
  14. package/lib/commonjs/theme.js +42 -0
  15. package/lib/commonjs/theme.js.map +1 -0
  16. package/lib/commonjs/types.js +6 -0
  17. package/lib/commonjs/types.js.map +1 -0
  18. package/lib/module/Button.js +58 -0
  19. package/lib/module/Button.js.map +1 -0
  20. package/lib/module/Onboarding.js +131 -0
  21. package/lib/module/Onboarding.js.map +1 -0
  22. package/lib/module/Step.js +40 -0
  23. package/lib/module/Step.js.map +1 -0
  24. package/lib/module/Steps.js +60 -0
  25. package/lib/module/Steps.js.map +1 -0
  26. package/lib/module/index.js +8 -0
  27. package/lib/module/index.js.map +1 -0
  28. package/lib/module/package.json +1 -0
  29. package/lib/module/theme.js +36 -0
  30. package/lib/module/theme.js.map +1 -0
  31. package/lib/module/types.js +4 -0
  32. package/lib/module/types.js.map +1 -0
  33. package/lib/typescript/commonjs/package.json +1 -0
  34. package/lib/typescript/commonjs/src/Button.d.ts +15 -0
  35. package/lib/typescript/commonjs/src/Button.d.ts.map +1 -0
  36. package/lib/typescript/commonjs/src/Onboarding.d.ts +4 -0
  37. package/lib/typescript/commonjs/src/Onboarding.d.ts.map +1 -0
  38. package/lib/typescript/commonjs/src/Step.d.ts +11 -0
  39. package/lib/typescript/commonjs/src/Step.d.ts.map +1 -0
  40. package/lib/typescript/commonjs/src/Steps.d.ts +9 -0
  41. package/lib/typescript/commonjs/src/Steps.d.ts.map +1 -0
  42. package/lib/typescript/commonjs/src/index.d.ts +7 -0
  43. package/lib/typescript/commonjs/src/index.d.ts.map +1 -0
  44. package/lib/typescript/commonjs/src/theme.d.ts +14 -0
  45. package/lib/typescript/commonjs/src/theme.d.ts.map +1 -0
  46. package/lib/typescript/commonjs/src/types.d.ts +90 -0
  47. package/lib/typescript/commonjs/src/types.d.ts.map +1 -0
  48. package/lib/typescript/module/package.json +1 -0
  49. package/lib/typescript/module/src/Button.d.ts +15 -0
  50. package/lib/typescript/module/src/Button.d.ts.map +1 -0
  51. package/lib/typescript/module/src/Onboarding.d.ts +4 -0
  52. package/lib/typescript/module/src/Onboarding.d.ts.map +1 -0
  53. package/lib/typescript/module/src/Step.d.ts +11 -0
  54. package/lib/typescript/module/src/Step.d.ts.map +1 -0
  55. package/lib/typescript/module/src/Steps.d.ts +9 -0
  56. package/lib/typescript/module/src/Steps.d.ts.map +1 -0
  57. package/lib/typescript/module/src/index.d.ts +7 -0
  58. package/lib/typescript/module/src/index.d.ts.map +1 -0
  59. package/lib/typescript/module/src/theme.d.ts +14 -0
  60. package/lib/typescript/module/src/theme.d.ts.map +1 -0
  61. package/lib/typescript/module/src/types.d.ts +90 -0
  62. package/lib/typescript/module/src/types.d.ts.map +1 -0
  63. package/package.json +100 -0
  64. package/src/Button.tsx +72 -0
  65. package/src/Onboarding.tsx +147 -0
  66. package/src/Step.tsx +38 -0
  67. package/src/Steps.tsx +62 -0
  68. package/src/index.ts +15 -0
  69. package/src/theme.ts +34 -0
  70. package/src/types.ts +99 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2026 Andrew Azevedo
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,195 @@
1
+ <div align="center">
2
+
3
+ <img src="https://raw.githubusercontent.com/ded3zito/react-native-onboarding-steps/main/docs/demo.gif" alt="An onboarding flow where the step indicator's green track grows to connect each completed step" width="280">
4
+
5
+ # react-native-onboarding-steps
6
+
7
+ A drop-in onboarding flow for React Native and Expo whose step indicator animates as a single connected track — the pill grows to link every completed step instead of lighting up dots one by one — with the back and continue buttons, labels, colours and spring all customizable from props.
8
+
9
+ </div>
10
+
11
+ ## Features
12
+
13
+ - **60fps animations** — the track sweep and the dot crossfade run on the UI thread through [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) worklets, so they never stutter when JS is busy.
14
+ - **One source of truth** — the track width and every dot colour derive from a single shared value, so they cannot drift apart, including when the user goes backwards.
15
+ - **Cross-platform** — built on core primitives (`View`, `Text`, `Pressable`) plus Reanimated: iOS, Android and Web.
16
+ - **Customizable layout** — override the indicator's sizes, spacing, colours and spring through one `stepsTheme` object; the rest falls back to sensible defaults.
17
+ - **Bring your own buttons** — recolour the stock buttons, or replace either one with a render prop and keep the built-in show/hide animation.
18
+ - **Per-step labels and content** — each step carries its own content and can override the back, continue and finish labels.
19
+ - **TypeScript-first** — every prop is typed and documented inline.
20
+ - **Zero Babel config on Expo SDK 54+** — `babel-preset-expo` wires the Reanimated plugin automatically.
21
+
22
+ ## Installation
23
+
24
+ ```sh
25
+ npm install react-native-onboarding-steps
26
+ ```
27
+
28
+ ```sh
29
+ yarn add react-native-onboarding-steps
30
+ ```
31
+
32
+ ```sh
33
+ pnpm add react-native-onboarding-steps
34
+ ```
35
+
36
+ This package expects `react-native-reanimated` v4 (and its `react-native-worklets` companion) to be installed in your app. On Expo:
37
+
38
+ ```sh
39
+ npx expo install react-native-reanimated react-native-worklets
40
+ ```
41
+
42
+ ## Usage
43
+
44
+ ```tsx
45
+ import { StyleSheet, Text, View } from 'react-native';
46
+ import { Onboarding, type OnboardingStep } from 'react-native-onboarding-steps';
47
+
48
+ const Slide = ({ title }: { title: string }) => (
49
+ <View style={styles.slide}>
50
+ <Text style={styles.title}>{title}</Text>
51
+ </View>
52
+ );
53
+
54
+ const steps: OnboardingStep[] = [
55
+ { id: 'welcome', content: <Slide title="Welcome" /> },
56
+ { id: 'customize', content: <Slide title="Customize" /> },
57
+ {
58
+ id: 'ship',
59
+ content: <Slide title="Ship it" />,
60
+ finishButtonLabel: 'Get started',
61
+ },
62
+ ];
63
+
64
+ export default function Welcome({ onDone }: { onDone: () => void }) {
65
+ return (
66
+ <Onboarding
67
+ steps={steps}
68
+ onComplete={onDone}
69
+ onStepChange={(index, step) => console.log('step', index, step.id)}
70
+ />
71
+ );
72
+ }
73
+
74
+ const styles = StyleSheet.create({
75
+ slide: { flex: 1, justifyContent: 'center', alignItems: 'center' },
76
+ title: { fontSize: 28, fontWeight: '700' },
77
+ });
78
+ ```
79
+
80
+ `Onboarding` fills its parent, so give it a container with height — a screen,
81
+ a `SafeAreaView`, or any `flex: 1` view.
82
+
83
+ ### Theming the indicator
84
+
85
+ Pass only what you want to change — everything else comes from `defaultStepsTheme`.
86
+
87
+ ```tsx
88
+ <Onboarding
89
+ steps={steps}
90
+ stepsTheme={{
91
+ trackColor: '#FF6B6B',
92
+ stepSize: 34,
93
+ dotSize: 8,
94
+ stepGap: 16,
95
+ inactiveDotColor: '#C7C7CC',
96
+ }}
97
+ continueButtonColor="#1C1C1E"
98
+ />
99
+ ```
100
+
101
+ > Hoisting the theme object out of render (or wrapping it in `useMemo`) keeps it from being rebuilt on every render. It is safe either way — the spring is held in a ref so a new object cannot restart an animation in flight.
102
+
103
+ ### Custom buttons
104
+
105
+ Either button can be replaced entirely. The renderer receives everything it needs to draw itself and act, and the back button still fades in and out with the flow.
106
+
107
+ ```tsx
108
+ <Onboarding
109
+ steps={steps}
110
+ backButton={({ label, onPress }) => (
111
+ <Pressable onPress={onPress} style={styles.customBack}>
112
+ <Text style={styles.customBackLabel}>← {label}</Text>
113
+ </Pressable>
114
+ )}
115
+ />
116
+ ```
117
+
118
+ ## API
119
+
120
+ Every type below is exported from the package root and documented inline in
121
+ [`src/types.ts`](src/types.ts).
122
+
123
+ ### `<Onboarding />`
124
+
125
+ | Prop | Type | Default | Description |
126
+ | --- | --- | --- | --- |
127
+ | `steps` | `OnboardingStep[]` | — | The flow. Nothing renders when empty. |
128
+ | `initialStep` | `number` | `0` | Step to open on. Clamped into range. |
129
+ | `onComplete` | `() => void` | — | Fires when the primary button is pressed on the last step. The flow stays put — navigating away is your call. |
130
+ | `onStepChange` | `(index, step) => void` | — | Fires on every step change, forwards and backwards. |
131
+ | `onBack` | `(index, step) => void` | — | Fires when the back button rewinds a step. `onStepChange` fires too. |
132
+ | `stepsTheme` | `StepsThemeInput` | `defaultStepsTheme` | Partial override of the indicator's look. |
133
+ | `backButtonColor` | `string` | `#F1F1F1` | Background of the stock back button. |
134
+ | `backButtonLabelColor` | `string` | `#1C1C1E` | Label colour of the stock back button. |
135
+ | `backButton` | `OnboardingButtonRenderer` | — | Replaces the stock back button. |
136
+ | `continueButtonColor` | `string` | `#4382DF` | Background of the stock continue/finish button. |
137
+ | `continueButtonLabelColor` | `string` | `#F7F4ED` | Label colour of the stock continue/finish button. |
138
+ | `continueButton` | `OnboardingButtonRenderer` | — | Replaces the stock continue/finish button. |
139
+ | `style` | `StyleProp<ViewStyle>` | — | Style for the outermost container. |
140
+ | `contentStyle` | `StyleProp<ViewStyle>` | — | Style for the region hosting the active step's `content`. |
141
+
142
+ ### `OnboardingStep`
143
+
144
+ | Field | Type | Description |
145
+ | --- | --- | --- |
146
+ | `id` | `string \| number` | Stable identity, used as the React key. Required. |
147
+ | `content` | `ReactNode` | Fills the area above the indicator while this step is active. |
148
+ | `backButtonLabel` | `string` | Overrides the `"Back"` label on this step. |
149
+ | `continueButtonLabel` | `string` | Overrides the `"Continue"` label on this step. |
150
+ | `finishButtonLabel` | `string` | Overrides the `"Finish"` label. Last step only. |
151
+
152
+ ### `StepsTheme`
153
+
154
+ Supplied partially as `stepsTheme`; gaps are filled from `defaultStepsTheme`.
155
+
156
+ | Field | Type | Default | Description |
157
+ | --- | --- | --- | --- |
158
+ | `stepSize` | `number` | `26` | Diameter of a step's slot, and the track's height. |
159
+ | `dotSize` | `number` | `11` | Diameter of the dot inside each slot. |
160
+ | `stepGap` | `number` | `9` | Horizontal space between two slots. |
161
+ | `trackColor` | `string` | `#7ADAA5` | The pill connecting completed steps. |
162
+ | `activeDotColor` | `string` | `#fff` | Dot colour once the track has swept over it. |
163
+ | `inactiveDotColor` | `string` | `#696969` | Dot colour before the track reaches it. |
164
+ | `spring` | `WithSpringConfig` | `{ damping: 22, stiffness: 180, mass: 1 }` | Drives the sweep and the colour crossfade. |
165
+
166
+ ### `OnboardingButtonProps`
167
+
168
+ What a custom button renderer receives.
169
+
170
+ | Field | Type | Description |
171
+ | --- | --- | --- |
172
+ | `label` | `string` | Resolved from the step, falling back to the built-in default. |
173
+ | `onPress` | `() => void` | Advances or rewinds the flow. |
174
+ | `currentStep` | `number` | Zero-based index of the active step. |
175
+ | `totalSteps` | `number` | Number of steps in the flow. |
176
+
177
+ ### Also exported
178
+
179
+ `Steps`, `Step` and `Button` are exported if you want the indicator on its own,
180
+ along with `defaultStepsTheme`, `resolveStepsTheme` and the `trackWidth` worklet.
181
+
182
+ ## Running the example
183
+
184
+ ```sh
185
+ pnpm install
186
+ pnpm example ios # or: pnpm example android
187
+ ```
188
+
189
+ The example is a standalone Expo app in [`example/`](example/App.tsx). It
190
+ consumes the library through a workspace link, so edits to `src/` show up in
191
+ the running app without a rebuild.
192
+
193
+ ## License
194
+
195
+ MIT © Andrew Azevedo
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _reactNative = require("react-native");
8
+ var _jsxRuntime = require("react/jsx-runtime");
9
+ const Button = ({
10
+ label,
11
+ onPress,
12
+ variant = 'primary',
13
+ backgroundColor,
14
+ labelColor,
15
+ style
16
+ }) => {
17
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
18
+ onPress: onPress,
19
+ style: ({
20
+ pressed
21
+ }) => [styles.container, styles[variant], backgroundColor ? {
22
+ backgroundColor
23
+ } : null, style, pressed && styles.pressed],
24
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
25
+ style: [styles.text, styles[`${variant}Text`], labelColor ? {
26
+ color: labelColor
27
+ } : null],
28
+ children: label
29
+ })
30
+ });
31
+ };
32
+ const styles = _reactNative.StyleSheet.create({
33
+ container: {
34
+ flexDirection: 'row',
35
+ justifyContent: 'center',
36
+ alignItems: 'center',
37
+ height: 45,
38
+ borderRadius: 100,
39
+ paddingHorizontal: 28
40
+ },
41
+ pressed: {
42
+ opacity: 0.7
43
+ },
44
+ primary: {
45
+ backgroundColor: '#4382DF'
46
+ },
47
+ secondary: {
48
+ backgroundColor: '#F1F1F1'
49
+ },
50
+ text: {
51
+ fontSize: 18,
52
+ fontWeight: '700'
53
+ },
54
+ primaryText: {
55
+ color: '#F7F4ED'
56
+ },
57
+ secondaryText: {
58
+ color: '#1C1C1E'
59
+ }
60
+ });
61
+ var _default = exports.default = Button;
62
+ //# sourceMappingURL=Button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_reactNative","require","_jsxRuntime","Button","label","onPress","variant","backgroundColor","labelColor","style","jsx","Pressable","pressed","styles","container","children","Text","text","color","StyleSheet","create","flexDirection","justifyContent","alignItems","height","borderRadius","paddingHorizontal","opacity","primary","secondary","fontSize","fontWeight","primaryText","secondaryText","_default","exports","default"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAA2F,IAAAC,WAAA,GAAAD,OAAA;AAe3F,MAAME,MAAM,GAAGA,CAAC;EACdC,KAAK;EACLC,OAAO;EACPC,OAAO,GAAG,SAAS;EACnBC,eAAe;EACfC,UAAU;EACVC;AACW,CAAC,KAAK;EACjB,oBACE,IAAAP,WAAA,CAAAQ,GAAA,EAACV,YAAA,CAAAW,SAAS;IACRN,OAAO,EAAEA,OAAQ;IACjBI,KAAK,EAAEA,CAAC;MAAEG;IAAQ,CAAC,KAAK,CACtBC,MAAM,CAACC,SAAS,EAChBD,MAAM,CAACP,OAAO,CAAC,EACfC,eAAe,GAAG;MAAEA;IAAgB,CAAC,GAAG,IAAI,EAC5CE,KAAK,EACLG,OAAO,IAAIC,MAAM,CAACD,OAAO,CACzB;IAAAG,QAAA,eAEF,IAAAb,WAAA,CAAAQ,GAAA,EAACV,YAAA,CAAAgB,IAAI;MAACP,KAAK,EAAE,CAACI,MAAM,CAACI,IAAI,EAAEJ,MAAM,CAAC,GAAGP,OAAO,MAAM,CAAC,EAAEE,UAAU,GAAG;QAAEU,KAAK,EAAEV;MAAW,CAAC,GAAG,IAAI,CAAE;MAAAO,QAAA,EAC7FX;IAAK,CACF;EAAC,CACE,CAAC;AAEhB,CAAC;AAED,MAAMS,MAAM,GAAGM,uBAAU,CAACC,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,MAAM,EAAE,EAAE;IACVC,YAAY,EAAE,GAAG;IACjBC,iBAAiB,EAAE;EACrB,CAAC;EACDd,OAAO,EAAE;IACPe,OAAO,EAAE;EACX,CAAC;EACDC,OAAO,EAAE;IACPrB,eAAe,EAAE;EACnB,CAAC;EACDsB,SAAS,EAAE;IACTtB,eAAe,EAAE;EACnB,CAAC;EACDU,IAAI,EAAE;IACJa,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE;EACd,CAAC;EACDC,WAAW,EAAE;IACXd,KAAK,EAAE;EACT,CAAC;EACDe,aAAa,EAAE;IACbf,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAAC,IAAAgB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEYjC,MAAM","ignoreList":[]}
@@ -0,0 +1,137 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = require("react");
8
+ var _reactNative = require("react-native");
9
+ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
10
+ var _Button = _interopRequireDefault(require("./Button.js"));
11
+ var _Steps = _interopRequireDefault(require("./Steps.js"));
12
+ var _theme = require("./theme.js");
13
+ var _jsxRuntime = require("react/jsx-runtime");
14
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
16
+ const DEFAULT_BACK_LABEL = 'Back';
17
+ const DEFAULT_CONTINUE_LABEL = 'Continue';
18
+ const DEFAULT_FINISH_LABEL = 'Finish';
19
+ const clamp = (value, max) => Math.min(Math.max(value, 0), max);
20
+ const Onboarding = ({
21
+ steps,
22
+ initialStep = 0,
23
+ onComplete,
24
+ onStepChange,
25
+ onBack,
26
+ stepsTheme,
27
+ backButtonColor,
28
+ backButtonLabelColor,
29
+ backButton,
30
+ continueButtonColor,
31
+ continueButtonLabelColor,
32
+ continueButton,
33
+ style,
34
+ contentStyle
35
+ }) => {
36
+ const lastIndex = Math.max(steps.length - 1, 0);
37
+ const [currentStep, setCurrentStep] = (0, _react.useState)(() => clamp(initialStep, lastIndex));
38
+ const theme = (0, _react.useMemo)(() => (0, _theme.resolveStepsTheme)(stepsTheme), [stepsTheme]);
39
+
40
+ // Guard after the hooks so the hook order stays stable for every render.
41
+ if (steps.length === 0) {
42
+ return null;
43
+ }
44
+ const index = clamp(currentStep, lastIndex);
45
+ const step = steps[index];
46
+ const isFirstStep = index === 0;
47
+ const isLastStep = index === lastIndex;
48
+ const goToStep = next => {
49
+ setCurrentStep(next);
50
+ onStepChange?.(next, steps[next]);
51
+ };
52
+ const onPressContinue = () => {
53
+ // The flow deliberately stays on the last step; where to go next is the
54
+ // consumer's decision, made inside onComplete.
55
+ if (isLastStep) {
56
+ onComplete?.();
57
+ return;
58
+ }
59
+ goToStep(index + 1);
60
+ };
61
+ const onPressBack = () => {
62
+ if (isFirstStep) return;
63
+ const previous = index - 1;
64
+ onBack?.(previous, steps[previous]);
65
+ goToStep(previous);
66
+ };
67
+ const continueLabel = isLastStep ? step.finishButtonLabel ?? DEFAULT_FINISH_LABEL : step.continueButtonLabel ?? DEFAULT_CONTINUE_LABEL;
68
+ const sharedButtonProps = {
69
+ currentStep: index,
70
+ totalSteps: steps.length
71
+ };
72
+ const backProps = {
73
+ ...sharedButtonProps,
74
+ label: step.backButtonLabel ?? DEFAULT_BACK_LABEL,
75
+ onPress: onPressBack
76
+ };
77
+ const continueProps = {
78
+ ...sharedButtonProps,
79
+ label: continueLabel,
80
+ onPress: onPressContinue
81
+ };
82
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
83
+ style: [styles.container, style],
84
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
85
+ style: [styles.content, contentStyle],
86
+ children: step.content
87
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Steps.default, {
88
+ steps: steps,
89
+ currentStep: index,
90
+ theme: theme
91
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
92
+ style: styles.footer,
93
+ children: [!isFirstStep && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
94
+ entering: _reactNativeReanimated.FadeIn.duration(200),
95
+ exiting: _reactNativeReanimated.FadeOut.duration(150),
96
+ children: backButton ? backButton(backProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
97
+ label: backProps.label,
98
+ onPress: backProps.onPress,
99
+ variant: "secondary",
100
+ backgroundColor: backButtonColor,
101
+ labelColor: backButtonLabelColor
102
+ })
103
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
104
+ style: styles.primaryAction,
105
+ layout: _reactNativeReanimated.LinearTransition.duration(250),
106
+ children: continueButton ? continueButton(continueProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
107
+ label: continueProps.label,
108
+ onPress: continueProps.onPress,
109
+ backgroundColor: continueButtonColor,
110
+ labelColor: continueButtonLabelColor
111
+ })
112
+ })]
113
+ })]
114
+ });
115
+ };
116
+ const styles = _reactNative.StyleSheet.create({
117
+ container: {
118
+ flex: 1,
119
+ alignItems: 'center'
120
+ },
121
+ content: {
122
+ flex: 1,
123
+ alignSelf: 'stretch'
124
+ },
125
+ footer: {
126
+ flexDirection: 'row',
127
+ alignItems: 'center',
128
+ gap: 10,
129
+ width: '85%',
130
+ marginTop: 20
131
+ },
132
+ primaryAction: {
133
+ flex: 1
134
+ }
135
+ });
136
+ var _default = exports.default = Onboarding;
137
+ //# sourceMappingURL=Onboarding.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_Button","_interopRequireDefault","_Steps","_theme","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_BACK_LABEL","DEFAULT_CONTINUE_LABEL","DEFAULT_FINISH_LABEL","clamp","value","max","Math","min","Onboarding","steps","initialStep","onComplete","onStepChange","onBack","stepsTheme","backButtonColor","backButtonLabelColor","backButton","continueButtonColor","continueButtonLabelColor","continueButton","style","contentStyle","lastIndex","length","currentStep","setCurrentStep","useState","theme","useMemo","resolveStepsTheme","index","step","isFirstStep","isLastStep","goToStep","next","onPressContinue","onPressBack","previous","continueLabel","finishButtonLabel","continueButtonLabel","sharedButtonProps","totalSteps","backProps","label","backButtonLabel","onPress","continueProps","jsxs","View","styles","container","children","jsx","content","footer","entering","FadeIn","duration","exiting","FadeOut","variant","backgroundColor","labelColor","primaryAction","layout","LinearTransition","StyleSheet","create","flex","alignItems","alignSelf","flexDirection","gap","width","marginTop","_default","exports"],"sourceRoot":"../../src","sources":["Onboarding.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _reactNative = require("react-native");
8
+ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
9
+ var _jsxRuntime = require("react/jsx-runtime");
10
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
11
+ const Step = ({
12
+ index,
13
+ progress,
14
+ theme
15
+ }) => {
16
+ const {
17
+ stepSize,
18
+ dotSize,
19
+ activeDotColor,
20
+ inactiveDotColor
21
+ } = theme;
22
+
23
+ // The dot flips colour across the short window where the track's edge is
24
+ // sweeping over it, so the two always look like one movement.
25
+ const dotStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
26
+ backgroundColor: (0, _reactNativeReanimated.interpolateColor)(progress.value, [index - 0.65, index - 0.25], [inactiveDotColor, activeDotColor])
27
+ }));
28
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
29
+ style: {
30
+ alignItems: 'center',
31
+ justifyContent: 'center',
32
+ width: stepSize,
33
+ height: stepSize
34
+ },
35
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
36
+ style: [{
37
+ width: dotSize,
38
+ height: dotSize,
39
+ borderRadius: dotSize / 2
40
+ }, dotStyle]
41
+ })
42
+ });
43
+ };
44
+ var _default = exports.default = Step;
45
+ //# sourceMappingURL=Step.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_reactNative","require","_reactNativeReanimated","_interopRequireWildcard","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Step","index","progress","theme","stepSize","dotSize","activeDotColor","inactiveDotColor","dotStyle","useAnimatedStyle","backgroundColor","interpolateColor","value","jsx","View","style","alignItems","justifyContent","width","height","children","borderRadius","_default","exports"],"sourceRoot":"../../src","sources":["Step.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAIiC,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAUjC,MAAMkB,IAAI,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAiB,CAAC,KAAK;EACtD,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,cAAc;IAAEC;EAAiB,CAAC,GAAGJ,KAAK;;EAErE;EACA;EACA,MAAMK,QAAQ,GAAG,IAAAC,uCAAgB,EAAC,OAAO;IACvCC,eAAe,EAAE,IAAAC,uCAAgB,EAC/BT,QAAQ,CAACU,KAAK,EACd,CAACX,KAAK,GAAG,IAAI,EAAEA,KAAK,GAAG,IAAI,CAAC,EAC5B,CAACM,gBAAgB,EAAED,cAAc,CACnC;EACF,CAAC,CAAC,CAAC;EAEH,oBACE,IAAA1B,WAAA,CAAAiC,GAAA,EAACrC,YAAA,CAAAsC,IAAI;IAACC,KAAK,EAAE;MAAEC,UAAU,EAAE,QAAQ;MAAEC,cAAc,EAAE,QAAQ;MAAEC,KAAK,EAAEd,QAAQ;MAAEe,MAAM,EAAEf;IAAS,CAAE;IAAAgB,QAAA,eACjG,IAAAxC,WAAA,CAAAiC,GAAA,EAACnC,sBAAA,CAAAa,OAAQ,CAACuB,IAAI;MACZC,KAAK,EAAE,CAAC;QAAEG,KAAK,EAAEb,OAAO;QAAEc,MAAM,EAAEd,OAAO;QAAEgB,YAAY,EAAEhB,OAAO,GAAG;MAAE,CAAC,EAAEG,QAAQ;IAAE,CACnF;EAAC,CACE,CAAC;AAEX,CAAC;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAhC,OAAA,GAEaS,IAAI","ignoreList":[]}
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = require("react");
8
+ var _reactNative = require("react-native");
9
+ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
10
+ var _Step = _interopRequireDefault(require("./Step.js"));
11
+ var _theme = require("./theme.js");
12
+ var _jsxRuntime = require("react/jsx-runtime");
13
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
15
+ const Steps = ({
16
+ steps,
17
+ currentStep,
18
+ theme
19
+ }) => {
20
+ const {
21
+ stepSize,
22
+ stepGap,
23
+ trackColor,
24
+ spring
25
+ } = theme;
26
+
27
+ // Leading edge of the track, in step units. Every visual change — the
28
+ // track's width and each dot's colour — is derived from this one value so
29
+ // the sweep and the dots stay in sync, including on the way back.
30
+ const progress = (0, _reactNativeReanimated.useSharedValue)(currentStep);
31
+
32
+ // Held in a ref so an inline `stepsTheme={{ ... }}` — which hands us a new
33
+ // spring object on every render — cannot restart an in-flight animation.
34
+ // The step change is the only thing that should kick the spring off, and the
35
+ // ref is always current by the time it does.
36
+ const springRef = (0, _react.useRef)(spring);
37
+ springRef.current = spring;
38
+ (0, _react.useEffect)(() => {
39
+ progress.value = (0, _reactNativeReanimated.withSpring)(currentStep, springRef.current);
40
+ }, [currentStep]);
41
+ const trackStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
42
+ width: (0, _theme.trackWidth)(progress.value, stepSize, stepGap)
43
+ }));
44
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
45
+ style: {
46
+ flexDirection: 'row',
47
+ alignItems: 'center',
48
+ gap: stepGap
49
+ },
50
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
51
+ style: [{
52
+ position: 'absolute',
53
+ left: 0,
54
+ height: stepSize,
55
+ borderRadius: stepSize / 2,
56
+ backgroundColor: trackColor
57
+ }, trackStyle]
58
+ }), steps.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
59
+ index: index,
60
+ progress: progress,
61
+ theme: theme
62
+ }, item.id))]
63
+ });
64
+ };
65
+ var _default = exports.default = Steps;
66
+ //# sourceMappingURL=Steps.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_Step","_interopRequireDefault","_theme","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Steps","steps","currentStep","theme","stepSize","stepGap","trackColor","spring","progress","useSharedValue","springRef","useRef","current","useEffect","value","withSpring","trackStyle","useAnimatedStyle","width","trackWidth","jsxs","View","style","flexDirection","alignItems","gap","children","jsx","position","left","height","borderRadius","backgroundColor","map","item","index","id","_default","exports"],"sourceRoot":"../../src","sources":["Steps.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Button", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _Button.default;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "Onboarding", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _Onboarding.default;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "Step", {
19
+ enumerable: true,
20
+ get: function () {
21
+ return _Step.default;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "Steps", {
25
+ enumerable: true,
26
+ get: function () {
27
+ return _Steps.default;
28
+ }
29
+ });
30
+ Object.defineProperty(exports, "defaultStepsTheme", {
31
+ enumerable: true,
32
+ get: function () {
33
+ return _theme.defaultStepsTheme;
34
+ }
35
+ });
36
+ Object.defineProperty(exports, "resolveStepsTheme", {
37
+ enumerable: true,
38
+ get: function () {
39
+ return _theme.resolveStepsTheme;
40
+ }
41
+ });
42
+ Object.defineProperty(exports, "trackWidth", {
43
+ enumerable: true,
44
+ get: function () {
45
+ return _theme.trackWidth;
46
+ }
47
+ });
48
+ var _Onboarding = _interopRequireDefault(require("./Onboarding.js"));
49
+ var _Steps = _interopRequireDefault(require("./Steps.js"));
50
+ var _Step = _interopRequireDefault(require("./Step.js"));
51
+ var _Button = _interopRequireDefault(require("./Button.js"));
52
+ var _theme = require("./theme.js");
53
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
54
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_Onboarding","_interopRequireDefault","require","_Steps","_Step","_Button","_theme","e","__esModule","default"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AAA2E,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
@@ -0,0 +1 @@
1
+ {"type":"commonjs"}