react-native-app-onboard 0.1.9 → 0.2.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 +89 -7
- package/lib/commonjs/components/CustomPages.js +31 -55
- package/lib/commonjs/components/CustomPages.js.map +1 -1
- package/lib/commonjs/components/OnboardingPages.js +59 -74
- package/lib/commonjs/components/OnboardingPages.js.map +1 -1
- package/lib/commonjs/components/Page.js +8 -3
- package/lib/commonjs/components/Page.js.map +1 -1
- package/lib/commonjs/components/Pagination.js +75 -13
- package/lib/commonjs/components/Pagination.js.map +1 -1
- package/lib/commonjs/components/Swiper.js +58 -85
- package/lib/commonjs/components/Swiper.js.map +1 -1
- package/lib/commonjs/components/button.js +3 -1
- package/lib/commonjs/components/button.js.map +1 -1
- package/lib/commonjs/context/OnboardingContext.js +101 -21
- package/lib/commonjs/context/OnboardingContext.js.map +1 -1
- package/lib/commonjs/hooks/useOnboarding.js +1 -1
- package/lib/commonjs/hooks/useOnboarding.js.map +1 -1
- package/lib/commonjs/index.js +33 -2
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/utils/persistence.js +51 -0
- package/lib/commonjs/utils/persistence.js.map +1 -0
- package/lib/module/components/CustomPages.js +31 -55
- package/lib/module/components/CustomPages.js.map +1 -1
- package/lib/module/components/OnboardingPages.js +60 -75
- package/lib/module/components/OnboardingPages.js.map +1 -1
- package/lib/module/components/Page.js +8 -3
- package/lib/module/components/Page.js.map +1 -1
- package/lib/module/components/Pagination.js +76 -14
- package/lib/module/components/Pagination.js.map +1 -1
- package/lib/module/components/Swiper.js +59 -86
- package/lib/module/components/Swiper.js.map +1 -1
- package/lib/module/components/button.js +3 -1
- package/lib/module/components/button.js.map +1 -1
- package/lib/module/context/OnboardingContext.js +102 -22
- package/lib/module/context/OnboardingContext.js.map +1 -1
- package/lib/module/hooks/useOnboarding.js +1 -1
- package/lib/module/hooks/useOnboarding.js.map +1 -1
- package/lib/module/index.js +8 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/utils/persistence.js +42 -0
- package/lib/module/utils/persistence.js.map +1 -0
- package/lib/typescript/src/components/CustomPages.d.ts +6 -2
- package/lib/typescript/src/components/CustomPages.d.ts.map +1 -1
- package/lib/typescript/src/components/OnboardingPages.d.ts +6 -2
- package/lib/typescript/src/components/OnboardingPages.d.ts.map +1 -1
- package/lib/typescript/src/components/Page.d.ts +2 -0
- package/lib/typescript/src/components/Page.d.ts.map +1 -1
- package/lib/typescript/src/components/Pagination.d.ts +9 -0
- package/lib/typescript/src/components/Pagination.d.ts.map +1 -1
- package/lib/typescript/src/components/Swiper.d.ts.map +1 -1
- package/lib/typescript/src/components/button.d.ts.map +1 -1
- package/lib/typescript/src/context/OnboardingContext.d.ts +9 -0
- package/lib/typescript/src/context/OnboardingContext.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useOnboarding.d.ts +3 -0
- package/lib/typescript/src/hooks/useOnboarding.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +4 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/types/index.d.ts +13 -0
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/persistence.d.ts +31 -0
- package/lib/typescript/src/utils/persistence.d.ts.map +1 -0
- package/package.json +13 -3
- package/src/components/CustomPages.tsx +62 -69
- package/src/components/OnboardingPages.tsx +79 -82
- package/src/components/Page.tsx +8 -2
- package/src/components/Pagination.tsx +121 -29
- package/src/components/Swiper.tsx +65 -87
- package/src/components/button.tsx +6 -1
- package/src/context/OnboardingContext.tsx +145 -26
- package/src/hooks/useOnboarding.tsx +1 -3
- package/src/index.tsx +16 -1
- package/src/types/index.ts +13 -0
- package/src/utils/persistence.ts +58 -0
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
# react-native-app-onboard
|
|
2
|
-
[](https://www.npmjs.com/package/react-native-app-onboard) [](https://github.com/julekgwa/react-native-app-onboard) [](https://unpkg.com/react-native-app-onboard/dist/index.js) ](https://www.npmjs.com/package/react-native-app-onboard) [](https://github.com/julekgwa/react-native-app-onboard) [](https://unpkg.com/react-native-app-onboard/dist/index.js) 
|
|
3
3
|
|
|
4
4
|
React Native App Onboard is a customizable, easy-to-use, and efficient library for creating compelling onboarding experiences for your React Native applications. It provides smooth, fluid transitions and animations, with a focus on simplicity and usability.
|
|
5
5
|
|
|
@@ -7,7 +7,24 @@ React Native App Onboard is a customizable, easy-to-use, and efficient library f
|
|
|
7
7
|
| --------------------- | --------------------- | ------------------ |
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
<a href="https://snack.expo.dev/@lekgwaraj/react-native-app-onboard?platform=ios">
|
|
11
|
+
<img src="https://img.shields.io/badge/Try%20it%20on-Expo%20Snack-4630EB.svg?style=for-the-badge&logo=expo&labelColor=FFF&logoColor=000" alt="Try it on Expo Snack"/>
|
|
12
|
+
</a>
|
|
13
|
+
|
|
14
|
+
## Features
|
|
15
|
+
|
|
16
|
+
- Declarative `pages` array or custom child components.
|
|
17
|
+
- Animated background-color transitions between pages.
|
|
18
|
+
- Pagination as animated dots or a progress bar, with optional tap-to-navigate.
|
|
19
|
+
- Skip, Next, Previous, and Done controls with customizable labels and styles.
|
|
20
|
+
- Autoplay with optional looping.
|
|
21
|
+
- Right-to-left (RTL) support.
|
|
22
|
+
- Accessibility support, including screen-reader page announcements.
|
|
23
|
+
- `useOnboarding` hook for reading and controlling the flow.
|
|
24
|
+
- Custom footer via a render prop.
|
|
25
|
+
- Storage-agnostic persistence helpers.
|
|
26
|
+
- Optional native-driver animations.
|
|
27
|
+
- Written in TypeScript with a single runtime dependency.
|
|
11
28
|
|
|
12
29
|
## Installation
|
|
13
30
|
|
|
@@ -64,12 +81,23 @@ export default App;
|
|
|
64
81
|
| `showSkip` | `boolean` | `false` | Optional. Determines whether the "Skip" button is shown. |
|
|
65
82
|
| `showNext` | `boolean` | `true` | Optional. Determines whether the "Next" button is shown. |
|
|
66
83
|
| `showDone` | `boolean` | `true` | Optional. Determines whether the "Done" button is shown. |
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
84
|
+
| `showPrevious` | `boolean` | `false` | Optional. Shows a "Back" button (on the left of the footer) once past the first page. |
|
|
85
|
+
| `previousLabel` | `string` \| `React.ReactNode` | `Back` | Optional. Custom label for the "Back" button. |
|
|
86
|
+
| `scrollAnimationDuration` | `number` | | Optional. Custom duration (ms) for programmatic page transitions (`nextPage`/`previousPage`/`scrollTo`/autoplay). When unset, the platform's default scroll animation is used. |
|
|
87
|
+
| `useNativeDriver` | `boolean` | `false` | Optional. Drives the pagination dot animation on the native thread for smoother performance. The background-color transition always stays JS-driven. |
|
|
88
|
+
| `rtl` | `boolean` | `I18nManager.isRTL` | Optional. Renders the slider right-to-left. Defaults to the device direction; set explicitly to force a direction (applies to the declarative `pages` API). |
|
|
69
89
|
| `onDone` | `() => void` | | Optional. Callback function that is called when the "Done" button is pressed. |
|
|
70
90
|
| `onSkip` | `() => void` | | Optional. Callback function that is called when the "Skip" button is pressed. |
|
|
91
|
+
| `onPageChange` | `(index: number) => void` | | Optional. Called with the new page index on every page change (swipe, button, or autoplay). Useful for analytics. |
|
|
71
92
|
| `showPagination` | `boolean` | `true` | Optional. Determines whether pagination indicators are shown. |
|
|
93
|
+
| `paginationStyle` | `'dots'` \| `'progress'` | `'dots'`| Optional. Renders the pagination as animated dots or as a progress bar. |
|
|
94
|
+
| `progressBarStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the progress bar track (when `paginationStyle="progress"`). |
|
|
95
|
+
| `progressBarFillStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the progress bar fill (when `paginationStyle="progress"`). |
|
|
96
|
+
| `dotsAreTappable` | `boolean` | `false` | Optional. When `true`, tapping a pagination dot scrolls to that page. |
|
|
72
97
|
| `scrollEnabled` | `boolean` | `true` | Optional. Determines whether the onboarding screens are scrollable. |
|
|
98
|
+
| `autoPlay` | `boolean` | `false` | Optional. Automatically advances through the pages. Pauses as soon as the user scrolls manually. |
|
|
99
|
+
| `autoPlayInterval` | `number` | `3000` | Optional. Delay (ms) between automatic page advances when `autoPlay` is enabled. |
|
|
100
|
+
| `loop` | `boolean` | `false` | Optional. Wraps navigation around at either end (used by autoplay and the Next/Back buttons). |
|
|
73
101
|
| `customFooter` | `(props: { nextPage: () => void }) => React.ReactNode` | | Optional. Function that returns a custom footer component. Receives a `nextPage` function as a prop. |
|
|
74
102
|
| `paginationContainerStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the pagination container. |
|
|
75
103
|
| `buttonRightContainerStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the container of the button positioned on the right. |
|
|
@@ -78,6 +106,7 @@ export default App;
|
|
|
78
106
|
| `doneLabelStyle` | `StyleProp<TextStyle>` | | Optional. Custom style for the "Done" label. |
|
|
79
107
|
| `skipLabelStyle` | `StyleProp<TextStyle>` | | Optional. Custom style for the "Skip" label. |
|
|
80
108
|
| `nextLabelStyle` | `StyleProp<TextStyle>` | | Optional. Custom style for the "Next" label. |
|
|
109
|
+
| `previousLabelStyle` | `StyleProp<TextStyle>` | | Optional. Custom style for the "Back" label. |
|
|
81
110
|
| `containerStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the main container of the onboarding component. |
|
|
82
111
|
| `imageContainerStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the image container. |
|
|
83
112
|
| `titleContainerStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the title container. |
|
|
@@ -90,6 +119,7 @@ export default App;
|
|
|
90
119
|
| `skipButtonContainerStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the container of the "Skip" button. |
|
|
91
120
|
| `nextButtonContainerStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the container of the "Next" button. |
|
|
92
121
|
| `doneButtonContainerStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the container of the "Done" button. |
|
|
122
|
+
| `previousButtonContainerStyle` | `StyleProp<ViewStyle>` | | Optional. Custom style for the container of the "Back" button. |
|
|
93
123
|
| `skipButtonPosition` | `'top-left'` \| `'top-right'` | | Optional. Specifies the position of the "Skip" button. Can be either 'top-left' or 'top-right'. |
|
|
94
124
|
| `swap` | `boolean` | false | Optional. If true, swaps the positions of the title/subtitle and image. |
|
|
95
125
|
|
|
@@ -142,9 +172,11 @@ To manage the state and navigation of the onboarding flow more effectively, you
|
|
|
142
172
|
- **`flatListRef`**: A ref object for the underlying FlatList component, allowing for programmatic control of the scroll position.
|
|
143
173
|
- **`numberOfScreens`**: The total number of screens in the onboarding sequence.
|
|
144
174
|
- **`nextPage`**: A function to navigate to the next page in the onboarding sequence.
|
|
175
|
+
- **`previousPage`**: A function to navigate to the previous page in the onboarding sequence.
|
|
145
176
|
- **`scrollTo`**: A function that scrolls to a specific page in the onboarding flow.
|
|
146
|
-
- **`progress`**: A value representing the user's progress through the onboarding screens.
|
|
177
|
+
- **`progress`**: A value (0–100) representing the user's progress through the onboarding screens.
|
|
147
178
|
- **`isDone`**: A boolean state that indicates whether the user has completed the onboarding process.
|
|
179
|
+
- **`pauseAutoPlay` / `resumeAutoPlay`**: Functions to pause and resume autoplay programmatically.
|
|
148
180
|
|
|
149
181
|
### Example Usage
|
|
150
182
|
|
|
@@ -172,6 +204,52 @@ const OnboardingScreen = () => {
|
|
|
172
204
|
export default OnboardingScreen;
|
|
173
205
|
```
|
|
174
206
|
|
|
207
|
+
## Persisting onboarding completion
|
|
208
|
+
|
|
209
|
+
The library ships small, storage-agnostic helpers so you can show onboarding only once. They accept any object that implements the `getItem`/`setItem`/`removeItem` interface (e.g. [`@react-native-async-storage/async-storage`](https://github.com/react-native-async-storage/async-storage)), so no extra peer dependency is forced on you.
|
|
210
|
+
|
|
211
|
+
```jsx
|
|
212
|
+
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
213
|
+
import { createOnboardingStorage } from 'react-native-app-onboard';
|
|
214
|
+
|
|
215
|
+
const onboardingStorage = createOnboardingStorage(AsyncStorage);
|
|
216
|
+
|
|
217
|
+
// On app launch:
|
|
218
|
+
const seen = await onboardingStorage.hasCompleted();
|
|
219
|
+
|
|
220
|
+
// When the user finishes onboarding:
|
|
221
|
+
<Onboarding
|
|
222
|
+
pages={pages}
|
|
223
|
+
onDone={() => onboardingStorage.markComplete()}
|
|
224
|
+
/>;
|
|
225
|
+
|
|
226
|
+
// To replay onboarding later:
|
|
227
|
+
await onboardingStorage.reset();
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
The standalone functions are also exported if you prefer to pass the storage explicitly: `hasCompletedOnboarding(storage, key?)`, `markOnboardingComplete(storage, key?)`, and `resetOnboarding(storage, key?)`. All default to a namespaced key, which you can override with the optional second argument.
|
|
231
|
+
|
|
232
|
+
## Accessibility
|
|
233
|
+
|
|
234
|
+
Buttons and pagination indicators ship with sensible `accessibilityRole` / `accessibilityLabel` values, the progress bar exposes `accessibilityValue`, and page changes are announced to screen readers automatically.
|
|
235
|
+
|
|
236
|
+
## RTL support
|
|
237
|
+
|
|
238
|
+
|  |  |  |
|
|
239
|
+
| --------------------- | --------------------- | ------------------ |
|
|
240
|
+
|
|
241
|
+
By default the slider follows the device writing direction (`I18nManager.isRTL`), so apps localized for Arabic, Hebrew, etc. get a right-to-left onboarding flow automatically — the footer buttons and pagination use direction-aware layout.
|
|
242
|
+
|
|
243
|
+
You can also force a direction with the `rtl` prop, independent of the device:
|
|
244
|
+
|
|
245
|
+
```jsx
|
|
246
|
+
<Onboarding pages={pages} rtl />
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
When the requested direction differs from the device direction, the slider (pages, dots, and progress bar) is mirrored so swiping and the indicators stay consistent. Forced mirroring applies to the declarative `pages` API; when you provide custom children, RTL follows the device direction (lay out your own screens with logical `start`/`end` styles).
|
|
250
|
+
|
|
251
|
+
A complete Arabic example is available in the example app (`example/src/rtl/Rtl.tsx`, the "Show RTL (Arabic)" entry).
|
|
252
|
+
|
|
175
253
|
## Expo Snack Examples
|
|
176
254
|
|
|
177
255
|
#### Using the custom footer component:
|
|
@@ -179,7 +257,9 @@ export default OnboardingScreen;
|
|
|
179
257
|
|  |  |  |
|
|
180
258
|
| --------------------- | --------------------- | ------------------ |
|
|
181
259
|
|
|
182
|
-
|
|
260
|
+
<a href="https://snack.expo.dev/@lekgwaraj/react-native-app-onboard-custom-pagination?platform=ios">
|
|
261
|
+
<img src="https://img.shields.io/badge/Try%20it%20on-Expo%20Snack-4630EB.svg?style=for-the-badge&logo=expo&labelColor=FFF&logoColor=000" alt="Try it on Expo Snack"/>
|
|
262
|
+
</a>
|
|
183
263
|
|
|
184
264
|
#### Using the custom page,
|
|
185
265
|
|
|
@@ -188,7 +268,9 @@ you can provide a custom component for each page by passing the components as ch
|
|
|
188
268
|
|  |  |  |
|
|
189
269
|
| --------------------- | --------------------- | ------------------ |
|
|
190
270
|
|
|
191
|
-
|
|
271
|
+
<a href="https://snack.expo.dev/@lekgwaraj/react-native-app-onboard-custom?platform=ios">
|
|
272
|
+
<img src="https://img.shields.io/badge/Try%20it%20on-Expo%20Snack-4630EB.svg?style=for-the-badge&logo=expo&labelColor=FFF&logoColor=000" alt="Try it on Expo Snack"/>
|
|
273
|
+
</a>
|
|
192
274
|
|
|
193
275
|
## Acknowledgements
|
|
194
276
|
|
|
@@ -17,32 +17,29 @@ const CustomPages = ({
|
|
|
17
17
|
showNext = true,
|
|
18
18
|
...props
|
|
19
19
|
}) => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}, props.skipButtonPosition && props.showSkip && /*#__PURE__*/_react.default.createElement(_button.SkipButton, {
|
|
23
|
-
buttonTextStyle: props.skipLabelStyle,
|
|
24
|
-
buttonStyle: props.skipButtonContainerStyle,
|
|
25
|
-
position: props.skipButtonPosition,
|
|
26
|
-
onPress: props.onSkip,
|
|
27
|
-
label: props.skipLabel
|
|
28
|
-
}), showPagination && props.paginationPosition === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.customFooter && props.customFooter({
|
|
29
|
-
nextPage: props.nextPage
|
|
30
|
-
}), !props.customFooter && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
|
|
20
|
+
const pageWidth = props.width || width;
|
|
21
|
+
const paginationProps = {
|
|
31
22
|
color: '#fff',
|
|
32
23
|
backgroundColor: '#333',
|
|
33
|
-
width:
|
|
24
|
+
width: pageWidth,
|
|
34
25
|
onNext: props.nextPage,
|
|
35
26
|
onSkip: props.onSkip,
|
|
36
27
|
onDone: props.onDone,
|
|
37
28
|
showDone: props.showDone,
|
|
38
|
-
|
|
29
|
+
showPrevious: props.showPrevious,
|
|
30
|
+
animatedValue: props.dotsAnimatedValue,
|
|
39
31
|
showSkip: props.showSkip,
|
|
40
32
|
numberOfScreens: props.numberOfScreens,
|
|
41
33
|
skipLabel: props.skipLabel,
|
|
42
|
-
showNext
|
|
34
|
+
showNext,
|
|
43
35
|
nextLabel: props.nextLabel,
|
|
36
|
+
previousLabel: props.previousLabel,
|
|
44
37
|
doneLabel: props.doneLabel,
|
|
45
38
|
hasSkipPosition: !!props.skipButtonPosition,
|
|
39
|
+
paginationStyle: props.paginationStyle,
|
|
40
|
+
progressBarStyle: props.progressBarStyle,
|
|
41
|
+
progressBarFillStyle: props.progressBarFillStyle,
|
|
42
|
+
dotsAreTappable: props.dotsAreTappable,
|
|
46
43
|
paginationContainerStyle: props.paginationContainerStyle,
|
|
47
44
|
buttonRightContainerStyle: props.buttonRightContainerStyle,
|
|
48
45
|
buttonLeftContainerStyle: props.buttonLeftContainerStyle,
|
|
@@ -51,28 +48,34 @@ const CustomPages = ({
|
|
|
51
48
|
skipButtonContainerStyle: props.skipButtonContainerStyle,
|
|
52
49
|
nextButtonContainerStyle: props.nextButtonContainerStyle,
|
|
53
50
|
doneButtonContainerStyle: props.doneButtonContainerStyle,
|
|
51
|
+
previousButtonContainerStyle: props.previousButtonContainerStyle,
|
|
54
52
|
skipLabelStyle: props.skipLabelStyle,
|
|
53
|
+
previousLabelStyle: props.previousLabelStyle,
|
|
55
54
|
nextLabelStyle: props.nextLabelStyle,
|
|
56
55
|
paginationPosition: props.paginationPosition
|
|
57
|
-
}
|
|
58
|
-
|
|
56
|
+
};
|
|
57
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
58
|
+
style: [styles.container]
|
|
59
|
+
}, props.skipButtonPosition && props.showSkip && /*#__PURE__*/_react.default.createElement(_button.SkipButton, {
|
|
60
|
+
buttonTextStyle: props.skipLabelStyle,
|
|
61
|
+
buttonStyle: props.skipButtonContainerStyle,
|
|
62
|
+
position: props.skipButtonPosition,
|
|
63
|
+
onPress: props.onSkip,
|
|
64
|
+
label: props.skipLabel
|
|
65
|
+
}), showPagination && props.paginationPosition === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.customFooter && props.customFooter({
|
|
66
|
+
nextPage: props.nextPage
|
|
67
|
+
}), !props.customFooter && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, paginationProps)), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.FlatList, {
|
|
68
|
+
ref: node => props.setFlatListRef(node),
|
|
59
69
|
data: _react.default.Children.toArray(props.children),
|
|
60
70
|
horizontal: true,
|
|
61
71
|
pagingEnabled: true,
|
|
62
72
|
showsHorizontalScrollIndicator: false,
|
|
63
73
|
scrollEnabled: props.scrollEnabled,
|
|
64
|
-
onScroll:
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
x: props.scrollX
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
}], {
|
|
71
|
-
useNativeDriver: false
|
|
72
|
-
}),
|
|
73
|
-
scrollEventThrottle: 1,
|
|
74
|
+
onScroll: props.onScroll,
|
|
75
|
+
onScrollBeginDrag: props.onScrollBeginDrag,
|
|
76
|
+
scrollEventThrottle: 16,
|
|
74
77
|
onMomentumScrollEnd: event => {
|
|
75
|
-
const pageIndex = Math.round(event.nativeEvent.contentOffset.x /
|
|
78
|
+
const pageIndex = Math.round(event.nativeEvent.contentOffset.x / pageWidth);
|
|
76
79
|
props.setPage(pageIndex || 0);
|
|
77
80
|
},
|
|
78
81
|
keyExtractor: (_, index) => index.toString(),
|
|
@@ -89,34 +92,7 @@ const CustomPages = ({
|
|
|
89
92
|
}
|
|
90
93
|
}), showPagination && props.paginationPosition !== 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.customFooter && props.customFooter({
|
|
91
94
|
nextPage: props.nextPage
|
|
92
|
-
}), !props.customFooter && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination,
|
|
93
|
-
color: '#fff',
|
|
94
|
-
backgroundColor: '#333',
|
|
95
|
-
width: width,
|
|
96
|
-
onNext: props.nextPage,
|
|
97
|
-
onSkip: props.onSkip,
|
|
98
|
-
onDone: props.onDone,
|
|
99
|
-
showDone: props.showDone,
|
|
100
|
-
animatedValue: props.scrollX,
|
|
101
|
-
showSkip: props.showSkip,
|
|
102
|
-
numberOfScreens: props.numberOfScreens,
|
|
103
|
-
skipLabel: props.skipLabel,
|
|
104
|
-
nextLabel: props.nextLabel,
|
|
105
|
-
showNext: showNext,
|
|
106
|
-
doneLabel: props.doneLabel,
|
|
107
|
-
paginationContainerStyle: props.paginationContainerStyle,
|
|
108
|
-
buttonRightContainerStyle: props.buttonRightContainerStyle,
|
|
109
|
-
buttonLeftContainerStyle: props.buttonLeftContainerStyle,
|
|
110
|
-
dotsContainerStyle: props.dotsContainerStyle,
|
|
111
|
-
doneLabelStyle: props.doneLabelStyle,
|
|
112
|
-
skipButtonContainerStyle: props.skipButtonContainerStyle,
|
|
113
|
-
nextButtonContainerStyle: props.nextButtonContainerStyle,
|
|
114
|
-
doneButtonContainerStyle: props.doneButtonContainerStyle,
|
|
115
|
-
skipLabelStyle: props.skipLabelStyle,
|
|
116
|
-
hasSkipPosition: !!props.skipButtonPosition,
|
|
117
|
-
paginationPosition: props.paginationPosition,
|
|
118
|
-
nextLabelStyle: props.nextLabelStyle
|
|
119
|
-
})));
|
|
95
|
+
}), !props.customFooter && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, paginationProps)));
|
|
120
96
|
};
|
|
121
97
|
exports.CustomPages = CustomPages;
|
|
122
98
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_react","_interopRequireDefault","_Pagination","_button","e","__esModule","default","width","Dimensions","get","CustomPages","showPagination","showNext","props","
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_react","_interopRequireDefault","_Pagination","_button","e","__esModule","default","width","Dimensions","get","CustomPages","showPagination","showNext","props","pageWidth","paginationProps","color","backgroundColor","onNext","nextPage","onSkip","onDone","showDone","showPrevious","animatedValue","dotsAnimatedValue","showSkip","numberOfScreens","skipLabel","nextLabel","previousLabel","doneLabel","hasSkipPosition","skipButtonPosition","paginationStyle","progressBarStyle","progressBarFillStyle","dotsAreTappable","paginationContainerStyle","buttonRightContainerStyle","buttonLeftContainerStyle","dotsContainerStyle","doneLabelStyle","skipButtonContainerStyle","nextButtonContainerStyle","doneButtonContainerStyle","previousButtonContainerStyle","skipLabelStyle","previousLabelStyle","nextLabelStyle","paginationPosition","createElement","View","style","styles","container","SkipButton","buttonTextStyle","buttonStyle","position","onPress","label","Fragment","customFooter","Pagination","Animated","FlatList","ref","node","setFlatListRef","data","React","Children","toArray","children","horizontal","pagingEnabled","showsHorizontalScrollIndicator","scrollEnabled","onScroll","onScrollBeginDrag","scrollEventThrottle","onMomentumScrollEnd","event","pageIndex","Math","round","nativeEvent","contentOffset","x","setPage","keyExtractor","_","index","toString","renderItem","item","cloneElement","currentPage","exports","StyleSheet","create","flex","justifyContent","alignItems","screen","pagination","flexDirection","paddingVertical","paddingHorizontal","dot","height","borderRadius","margin","dotsContainer"],"sourceRoot":"../../../src","sources":["components/CustomPages.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -22,122 +22,102 @@ const OnboardingPages = ({
|
|
|
22
22
|
showNext = true,
|
|
23
23
|
...props
|
|
24
24
|
}) => {
|
|
25
|
-
|
|
26
|
-
const backgroundColorAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
27
|
-
const [previousPage, setPreviousPage] = _react.default.useState(0);
|
|
25
|
+
const pageWidth = props.width || width;
|
|
28
26
|
const currentPage_ = props.pages[props.currentPage];
|
|
29
|
-
const currentBackgroundColor = (currentPage_ === null || currentPage_ === void 0 ? void 0 : currentPage_.backgroundColor)
|
|
27
|
+
const currentBackgroundColor = (currentPage_ === null || currentPage_ === void 0 ? void 0 : currentPage_.backgroundColor) ?? 'white';
|
|
30
28
|
const isLight = (0, _tinycolor.default)(currentBackgroundColor).getBrightness() > 180;
|
|
31
29
|
const footerBackgroundColor = isLight ? (0, _tinycolor.default)(currentBackgroundColor).darken(30).toString() : (0, _tinycolor.default)(currentBackgroundColor).lighten(30).toString();
|
|
32
30
|
const color = (0, _tinycolor.default)(footerBackgroundColor).getBrightness() > 180 ? (0, _tinycolor.default)(footerBackgroundColor).darken(60).toString() : (0, _tinycolor.default)(footerBackgroundColor).lighten(60).toString();
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}, props.skipButtonPosition && props.showSkip && /*#__PURE__*/_react.default.createElement(_button.SkipButton, {
|
|
49
|
-
buttonTextStyle: props.skipLabelStyle,
|
|
50
|
-
buttonStyle: props.skipButtonContainerStyle,
|
|
51
|
-
position: props.skipButtonPosition,
|
|
52
|
-
label: props.skipLabel,
|
|
53
|
-
onPress: props.onSkip
|
|
54
|
-
}), props.paginationPosition === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showPagination && props.customFooter && props.customFooter({
|
|
55
|
-
nextPage: props.nextPage
|
|
56
|
-
}), !props.customFooter && showPagination && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
|
|
57
|
-
width: props.width || width,
|
|
31
|
+
const interpolatedBackgroundColor = (0, _react.useMemo)(() => {
|
|
32
|
+
const pages = props.pages;
|
|
33
|
+
// interpolate() requires at least 2 stops; for 0 or 1 pages there is
|
|
34
|
+
// nothing to animate between, so use the solid current color.
|
|
35
|
+
if (pages.length < 2) return currentBackgroundColor;
|
|
36
|
+
const inputRange = pages.map((_, i) => i * pageWidth);
|
|
37
|
+
const outputRange = pages.map(p => p.backgroundColor ?? 'white');
|
|
38
|
+
return props.scrollX.interpolate({
|
|
39
|
+
inputRange,
|
|
40
|
+
outputRange,
|
|
41
|
+
extrapolate: 'clamp'
|
|
42
|
+
});
|
|
43
|
+
}, [props.pages, props.scrollX, pageWidth, currentBackgroundColor]);
|
|
44
|
+
const paginationProps = {
|
|
45
|
+
width: pageWidth,
|
|
58
46
|
onNext: props.nextPage,
|
|
59
47
|
onSkip: props.onSkip,
|
|
60
|
-
color
|
|
61
|
-
showNext
|
|
48
|
+
color,
|
|
49
|
+
showNext,
|
|
62
50
|
onDone: props.onDone,
|
|
63
51
|
showDone: props.showDone,
|
|
52
|
+
showPrevious: props.showPrevious,
|
|
64
53
|
backgroundColor: footerBackgroundColor,
|
|
65
|
-
animatedValue: props.
|
|
54
|
+
animatedValue: props.dotsAnimatedValue,
|
|
66
55
|
showSkip: props.showSkip,
|
|
67
56
|
numberOfScreens: props.pages.length,
|
|
68
57
|
skipLabel: props.skipLabel,
|
|
69
58
|
nextLabel: props.nextLabel,
|
|
59
|
+
previousLabel: props.previousLabel,
|
|
70
60
|
hasSkipPosition: !!props.skipButtonPosition,
|
|
71
61
|
doneLabel: props.doneLabel,
|
|
62
|
+
paginationStyle: props.paginationStyle,
|
|
63
|
+
progressBarStyle: props.progressBarStyle,
|
|
64
|
+
progressBarFillStyle: props.progressBarFillStyle,
|
|
65
|
+
dotsAreTappable: props.dotsAreTappable,
|
|
66
|
+
mirror: props.mirror,
|
|
72
67
|
paginationContainerStyle: props.paginationContainerStyle,
|
|
73
68
|
buttonRightContainerStyle: props.buttonRightContainerStyle,
|
|
74
69
|
buttonLeftContainerStyle: props.buttonLeftContainerStyle,
|
|
75
70
|
dotsContainerStyle: props.dotsContainerStyle,
|
|
76
71
|
doneLabelStyle: props.doneLabelStyle,
|
|
77
72
|
skipLabelStyle: props.skipLabelStyle,
|
|
73
|
+
previousLabelStyle: props.previousLabelStyle,
|
|
78
74
|
nextLabelStyle: props.nextLabelStyle,
|
|
79
75
|
skipButtonContainerStyle: props.skipButtonContainerStyle,
|
|
80
76
|
nextButtonContainerStyle: props.nextButtonContainerStyle,
|
|
81
|
-
doneButtonContainerStyle: props.doneButtonContainerStyle
|
|
82
|
-
|
|
83
|
-
|
|
77
|
+
doneButtonContainerStyle: props.doneButtonContainerStyle,
|
|
78
|
+
previousButtonContainerStyle: props.previousButtonContainerStyle
|
|
79
|
+
};
|
|
80
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
81
|
+
style: [styles.container, {
|
|
82
|
+
backgroundColor: interpolatedBackgroundColor
|
|
83
|
+
}]
|
|
84
|
+
}, props.skipButtonPosition && props.showSkip && /*#__PURE__*/_react.default.createElement(_button.SkipButton, {
|
|
85
|
+
buttonTextStyle: props.skipLabelStyle,
|
|
86
|
+
buttonStyle: props.skipButtonContainerStyle,
|
|
87
|
+
position: props.skipButtonPosition,
|
|
88
|
+
label: props.skipLabel,
|
|
89
|
+
onPress: props.onSkip
|
|
90
|
+
}), props.paginationPosition === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showPagination && props.customFooter && props.customFooter({
|
|
91
|
+
nextPage: props.nextPage
|
|
92
|
+
}), !props.customFooter && showPagination && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, paginationProps)), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.FlatList, {
|
|
93
|
+
ref: node => props.setFlatListRef(node),
|
|
84
94
|
data: props.pages,
|
|
85
95
|
horizontal: true,
|
|
86
96
|
pagingEnabled: true,
|
|
87
97
|
showsHorizontalScrollIndicator: false,
|
|
98
|
+
scrollEnabled: props.scrollEnabled,
|
|
99
|
+
style: props.mirror ? styles.mirror : undefined,
|
|
88
100
|
keyExtractor: (_, index) => index.toString(),
|
|
89
101
|
renderItem: ({
|
|
90
102
|
item,
|
|
91
103
|
index
|
|
92
104
|
}) => /*#__PURE__*/_react.default.createElement(_Page.OnboardingPage, _extends({
|
|
93
105
|
color: color,
|
|
94
|
-
width:
|
|
106
|
+
width: pageWidth,
|
|
95
107
|
swap: props.swap,
|
|
108
|
+
mirror: props.mirror,
|
|
96
109
|
key: index
|
|
97
110
|
}, item)),
|
|
98
|
-
onScroll:
|
|
99
|
-
|
|
100
|
-
contentOffset: {
|
|
101
|
-
x: props.scrollX
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}], {
|
|
105
|
-
useNativeDriver: false
|
|
106
|
-
}),
|
|
111
|
+
onScroll: props.onScroll,
|
|
112
|
+
onScrollBeginDrag: props.onScrollBeginDrag,
|
|
107
113
|
scrollEventThrottle: 16,
|
|
108
114
|
onMomentumScrollEnd: event => {
|
|
109
|
-
const pageIndex = Math.round(event.nativeEvent.contentOffset.x /
|
|
110
|
-
|
|
115
|
+
const pageIndex = Math.round(event.nativeEvent.contentOffset.x / pageWidth);
|
|
116
|
+
props.setPage(pageIndex || 0);
|
|
111
117
|
}
|
|
112
118
|
}), props.paginationPosition !== 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showPagination && props.customFooter && props.customFooter({
|
|
113
119
|
nextPage: props.nextPage
|
|
114
|
-
}), !props.customFooter && showPagination && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination,
|
|
115
|
-
width: props.width || width,
|
|
116
|
-
onNext: props.nextPage,
|
|
117
|
-
onSkip: props.onSkip,
|
|
118
|
-
color: color,
|
|
119
|
-
hasSkipPosition: !!props.skipButtonPosition,
|
|
120
|
-
onDone: props.onDone,
|
|
121
|
-
showDone: props.showDone,
|
|
122
|
-
backgroundColor: footerBackgroundColor,
|
|
123
|
-
animatedValue: props.scrollX,
|
|
124
|
-
showSkip: props.showSkip,
|
|
125
|
-
numberOfScreens: props.pages.length,
|
|
126
|
-
skipLabel: props.skipLabel,
|
|
127
|
-
nextLabel: props.nextLabel,
|
|
128
|
-
doneLabel: props.doneLabel,
|
|
129
|
-
paginationContainerStyle: props.paginationContainerStyle,
|
|
130
|
-
buttonRightContainerStyle: props.buttonRightContainerStyle,
|
|
131
|
-
buttonLeftContainerStyle: props.buttonLeftContainerStyle,
|
|
132
|
-
dotsContainerStyle: props.dotsContainerStyle,
|
|
133
|
-
doneLabelStyle: props.doneLabelStyle,
|
|
134
|
-
skipLabelStyle: props.skipLabelStyle,
|
|
135
|
-
skipButtonContainerStyle: props.skipButtonContainerStyle,
|
|
136
|
-
nextButtonContainerStyle: props.nextButtonContainerStyle,
|
|
137
|
-
doneButtonContainerStyle: props.doneButtonContainerStyle,
|
|
138
|
-
showNext: showNext,
|
|
139
|
-
nextLabelStyle: props.nextLabelStyle
|
|
140
|
-
})));
|
|
120
|
+
}), !props.customFooter && showPagination && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, paginationProps)));
|
|
141
121
|
};
|
|
142
122
|
exports.OnboardingPages = OnboardingPages;
|
|
143
123
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -170,6 +150,11 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
170
150
|
flexDirection: 'row',
|
|
171
151
|
flex: 1,
|
|
172
152
|
justifyContent: 'center'
|
|
153
|
+
},
|
|
154
|
+
mirror: {
|
|
155
|
+
transform: [{
|
|
156
|
+
scaleX: -1
|
|
157
|
+
}]
|
|
173
158
|
}
|
|
174
159
|
});
|
|
175
160
|
//# sourceMappingURL=OnboardingPages.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_tinycolor","_interopRequireDefault","_reactNative","_Pagination","_Page","_button","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","width","Dimensions","OnboardingPages","showPagination","showNext","props","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_tinycolor","_interopRequireDefault","_reactNative","_Pagination","_Page","_button","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","width","Dimensions","OnboardingPages","showPagination","showNext","props","pageWidth","currentPage_","pages","currentPage","currentBackgroundColor","backgroundColor","isLight","tinycolor","getBrightness","footerBackgroundColor","darken","toString","lighten","color","interpolatedBackgroundColor","useMemo","inputRange","map","_","outputRange","p","scrollX","interpolate","extrapolate","paginationProps","onNext","nextPage","onSkip","onDone","showDone","showPrevious","animatedValue","dotsAnimatedValue","showSkip","numberOfScreens","skipLabel","nextLabel","previousLabel","hasSkipPosition","skipButtonPosition","doneLabel","paginationStyle","progressBarStyle","progressBarFillStyle","dotsAreTappable","mirror","paginationContainerStyle","buttonRightContainerStyle","buttonLeftContainerStyle","dotsContainerStyle","doneLabelStyle","skipLabelStyle","previousLabelStyle","nextLabelStyle","skipButtonContainerStyle","nextButtonContainerStyle","doneButtonContainerStyle","previousButtonContainerStyle","createElement","Animated","View","style","styles","container","SkipButton","buttonTextStyle","buttonStyle","position","label","onPress","paginationPosition","Fragment","customFooter","Pagination","FlatList","ref","node","setFlatListRef","data","horizontal","pagingEnabled","showsHorizontalScrollIndicator","scrollEnabled","undefined","keyExtractor","index","renderItem","item","OnboardingPage","swap","key","onScroll","onScrollBeginDrag","scrollEventThrottle","onMomentumScrollEnd","event","pageIndex","Math","round","nativeEvent","contentOffset","x","setPage","exports","StyleSheet","create","flex","justifyContent","alignItems","screen","pagination","flexDirection","paddingVertical","paddingHorizontal","dot","height","borderRadius","margin","dotsContainer","transform","scaleX"],"sourceRoot":"../../../src","sources":["components/OnboardingPages.tsx"],"mappings":"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","ignoreList":[]}
|