react-native-app-onboard 0.1.9 → 0.2.1

package/README.md

@@ -1,5 +1,5 @@
 # react-native-app-onboard
-[![npm](https://img.shields.io/npm/v/react-native-app-onboard.svg)](https://www.npmjs.com/package/react-native-app-onboard) [![GitHub stars](https://img.shields.io/github/stars/julekgwa/react-native-app-onboard.svg?style=social&label=Stars)](https://github.com/julekgwa/react-native-app-onboard) [![gzip size](http://img.badgesize.io/https://unpkg.com/react-native-app-onboard/src/index.tsx?compression=gzip)](https://unpkg.com/react-native-app-onboard/dist/index.js) ![npm](https://img.shields.io/npm/dw/react-native-app-onboard)
+[![npm](https://img.shields.io/npm/v/react-native-app-onboard.svg)](https://www.npmjs.com/package/react-native-app-onboard) [![GitHub stars](https://img.shields.io/github/stars/julekgwa/react-native-app-onboard.svg?style=social&label=Stars)](https://github.com/julekgwa/react-native-app-onboard) [![gzip size](http://img.badgesize.io/https://unpkg.com/react-native-app-onboard/src/index.tsx?compression=gzip)](https://unpkg.com/react-native-app-onboard/dist/index.js) ![npm](https://img.shields.io/npm/dm/react-native-app-onboard) [![install size](https://packagephobia.com/badge?p=react-native-app-onboard)](https://packagephobia.com/result?p=react-native-app-onboard) [![Socket Badge](https://badge.socket.dev/npm/package/react-native-app-onboard)](https://badge.socket.dev/npm/package/react-native-app-onboard)
 
 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.
 
@@ -7,7 +7,24 @@ React Native App Onboard is a customizable, easy-to-use, and efficient library f
 | --------------------- | --------------------- | ------------------ |
 
 
-[Expo Snack example](https://snack.expo.dev/@lekgwaraj/react-native-app-onboard?platform=ios)
+<a href="https://snack.expo.dev/@lekgwaraj/react-native-app-onboard?platform=ios">
+  <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"/>
+</a>
+
+## Features
+
+- Declarative `pages` array or custom child components.
+- Animated background-color transitions between pages.
+- Pagination as animated dots or a progress bar, with optional tap-to-navigate.
+- Skip, Next, Previous, and Done controls with customizable labels and styles.
+- Autoplay with optional looping.
+- Right-to-left (RTL) support.
+- Accessibility support, including screen-reader page announcements.
+- `useOnboarding` hook for reading and controlling the flow.
+- Custom footer via a render prop.
+- Storage-agnostic persistence helpers.
+- Optional native-driver animations.
+- Written in TypeScript with zero runtime dependencies.
 
 ## Installation
 
@@ -64,12 +81,23 @@ export default App;
 | `showSkip`                  | `boolean`                         | `false` | Optional. Determines whether the "Skip" button is shown. |
 | `showNext`                  | `boolean`                         | `true`  | Optional. Determines whether the "Next" button is shown. |
 | `showDone`                  | `boolean`                         | `true`  | Optional. Determines whether the "Done" button is shown. |
-| `scrollAnimationDuration`   | `number`                          | `500`   | Optional. Duration of the scroll animation in milliseconds. Default is 500. |
-| `useNativeDriver`           | `boolean`                         |         | Optional. Determines whether animations should use the native driver. |
+| `showPrevious`              | `boolean`                         | `false` | Optional. Shows a "Back" button (on the left of the footer) once past the first page. |
+| `previousLabel`             | `string` \| `React.ReactNode`     | `Back`  | Optional. Custom label for the "Back" button. |
+| `scrollAnimationDuration`   | `number`                          |         | Optional. Custom duration (ms) for programmatic page transitions (`nextPage`/`previousPage`/`scrollTo`/autoplay). When unset, the platform's default scroll animation is used. |
+| `useNativeDriver`           | `boolean`                         | `false` | Optional. Drives the pagination dot animation on the native thread for smoother performance. The background-color transition always stays JS-driven. |
+| `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). |
 | `onDone`                    | `() => void`                      |         | Optional. Callback function that is called when the "Done" button is pressed. |
 | `onSkip`                    | `() => void`                      |         | Optional. Callback function that is called when the "Skip" button is pressed. |
+| `onPageChange`              | `(index: number) => void`         |         | Optional. Called with the new page index on every page change (swipe, button, or autoplay). Useful for analytics. |
 | `showPagination`            | `boolean`                         | `true`  | Optional. Determines whether pagination indicators are shown. |
+| `paginationStyle`           | `'dots'` \| `'progress'`          | `'dots'`| Optional. Renders the pagination as animated dots or as a progress bar. |
+| `progressBarStyle`          | `StyleProp<ViewStyle>`            |         | Optional. Custom style for the progress bar track (when `paginationStyle="progress"`). |
+| `progressBarFillStyle`      | `StyleProp<ViewStyle>`            |         | Optional. Custom style for the progress bar fill (when `paginationStyle="progress"`). |
+| `dotsAreTappable`           | `boolean`                         | `false` | Optional. When `true`, tapping a pagination dot scrolls to that page. |
 | `scrollEnabled`             | `boolean`                         | `true`  | Optional. Determines whether the onboarding screens are scrollable. |
+| `autoPlay`                  | `boolean`                         | `false` | Optional. Automatically advances through the pages. Pauses as soon as the user scrolls manually. |
+| `autoPlayInterval`          | `number`                          | `3000`  | Optional. Delay (ms) between automatic page advances when `autoPlay` is enabled. |
+| `loop`                      | `boolean`                         | `false` | Optional. Wraps navigation around at either end (used by autoplay and the Next/Back buttons). |
 | `customFooter`              | `(props: { nextPage: () => void }) => React.ReactNode` | | Optional. Function that returns a custom footer component. Receives a `nextPage` function as a prop. |
 | `paginationContainerStyle`  | `StyleProp<ViewStyle>`            |         | Optional. Custom style for the pagination container. |
 | `buttonRightContainerStyle` | `StyleProp<ViewStyle>`            |         | Optional. Custom style for the container of the button positioned on the right. |
@@ -78,6 +106,7 @@ export default App;
 | `doneLabelStyle`            | `StyleProp<TextStyle>`            |         | Optional. Custom style for the "Done" label. |
 | `skipLabelStyle`            | `StyleProp<TextStyle>`            |         | Optional. Custom style for the "Skip" label. |
 | `nextLabelStyle`            | `StyleProp<TextStyle>`            |         | Optional. Custom style for the "Next" label. |
+| `previousLabelStyle`        | `StyleProp<TextStyle>`            |         | Optional. Custom style for the "Back" label. |
 | `containerStyle`            | `StyleProp<ViewStyle>`            |         | Optional. Custom style for the main container of the onboarding component. |
 | `imageContainerStyle`       | `StyleProp<ViewStyle>`            |         | Optional. Custom style for the image container. |
 | `titleContainerStyle`       | `StyleProp<ViewStyle>`            |         | Optional. Custom style for the title container. |
@@ -90,6 +119,7 @@ export default App;
 | `skipButtonContainerStyle`  | `StyleProp<ViewStyle>`            |         | Optional. Custom style for the container of the "Skip" button. |
 | `nextButtonContainerStyle`  | `StyleProp<ViewStyle>`            |         | Optional. Custom style for the container of the "Next" button. |
 | `doneButtonContainerStyle`  | `StyleProp<ViewStyle>`            |         | Optional. Custom style for the container of the "Done" button. |
+| `previousButtonContainerStyle` | `StyleProp<ViewStyle>`         |         | Optional. Custom style for the container of the "Back" button. |
 | `skipButtonPosition`        | `'top-left'` \| `'top-right'`     |         | Optional. Specifies the position of the "Skip" button. Can be either 'top-left' or 'top-right'. |
 | `swap`            | `boolean`                 | false       | Optional. If true, swaps the positions of the title/subtitle and image.     |
 
@@ -142,9 +172,11 @@ To manage the state and navigation of the onboarding flow more effectively, you
 - **`flatListRef`**: A ref object for the underlying FlatList component, allowing for programmatic control of the scroll position.
 - **`numberOfScreens`**: The total number of screens in the onboarding sequence.
 - **`nextPage`**: A function to navigate to the next page in the onboarding sequence.
+- **`previousPage`**: A function to navigate to the previous page in the onboarding sequence.
 - **`scrollTo`**: A function that scrolls to a specific page in the onboarding flow.
-- **`progress`**: A value representing the user's progress through the onboarding screens.
+- **`progress`**: A value (0–100) representing the user's progress through the onboarding screens.
 - **`isDone`**: A boolean state that indicates whether the user has completed the onboarding process.
+- **`pauseAutoPlay` / `resumeAutoPlay`**: Functions to pause and resume autoplay programmatically.
 
 ### Example Usage
 
@@ -172,6 +204,52 @@ const OnboardingScreen = () => {
 export default OnboardingScreen;
 ```
 
+## Persisting onboarding completion
+
+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.
+
+```jsx
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createOnboardingStorage } from 'react-native-app-onboard';
+
+const onboardingStorage = createOnboardingStorage(AsyncStorage);
+
+// On app launch:
+const seen = await onboardingStorage.hasCompleted();
+
+// When the user finishes onboarding:
+<Onboarding
+  pages={pages}
+  onDone={() => onboardingStorage.markComplete()}
+/>;
+
+// To replay onboarding later:
+await onboardingStorage.reset();
+```
+
+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.
+
+## Accessibility
+
+Buttons and pagination indicators ship with sensible `accessibilityRole` / `accessibilityLabel` values, the progress bar exposes `accessibilityValue`, and page changes are announced to screen readers automatically.
+
+## RTL support
+
+| ![](example/assets/RTL1.png) | ![](example/assets/RTL2.png) | ![](example/assets/RTL3.png) |
+| --------------------- | --------------------- | ------------------ |
+
+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.
+
+You can also force a direction with the `rtl` prop, independent of the device:
+
+```jsx
+<Onboarding pages={pages} rtl />
+```
+
+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).
+
+A complete Arabic example is available in the example app (`example/src/rtl/Rtl.tsx`, the "Show RTL (Arabic)" entry).
+
 ## Expo Snack Examples
 
 #### Using the custom footer component:
@@ -179,7 +257,9 @@ export default OnboardingScreen;
 | ![](example/assets/IMG_2187.PNG) | ![](example/assets/IMG_2188.PNG) | ![](example/assets/IMG_2189.PNG) |
 | --------------------- | --------------------- | ------------------ |
 
-[Expo Snack](https://snack.expo.dev/@lekgwaraj/react-native-app-onboard-custom-pagination?platform=ios)
+<a href="https://snack.expo.dev/@lekgwaraj/react-native-app-onboard-custom-pagination?platform=ios">
+  <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"/>
+</a>
 
 #### Using the custom page,
 
@@ -188,7 +268,9 @@ you can provide a custom component for each page by passing the components as ch
 | ![](example/assets/IMG_2192.PNG) | ![](example/assets/IMG_2193.PNG) | ![](example/assets/IMG_2194.PNG) |
 | --------------------- | --------------------- | ------------------ |
 
-[Expo Snack](https://snack.expo.dev/@lekgwaraj/react-native-app-onboard-custom?platform=ios)
+<a href="https://snack.expo.dev/@lekgwaraj/react-native-app-onboard-custom?platform=ios">
+  <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"/>
+</a>
 
 ## Acknowledgements
 

package/lib/commonjs/components/CustomPages.js

@@ -17,32 +17,29 @@ const CustomPages = ({
   showNext = true,
   ...props
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.container]
-  }, props.skipButtonPosition && props.showSkip && /*#__PURE__*/_react.default.createElement(_button.SkipButton, {
-    buttonTextStyle: props.skipLabelStyle,
-    buttonStyle: props.skipButtonContainerStyle,
-    position: props.skipButtonPosition,
-    onPress: props.onSkip,
-    label: props.skipLabel
-  }), showPagination && props.paginationPosition === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.customFooter && props.customFooter({
-    nextPage: props.nextPage
-  }), !props.customFooter && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
+  const pageWidth = props.width || width;
+  const paginationProps = {
     color: '#fff',
     backgroundColor: '#333',
-    width: width,
+    width: pageWidth,
     onNext: props.nextPage,
     onSkip: props.onSkip,
     onDone: props.onDone,
     showDone: props.showDone,
-    animatedValue: props.scrollX,
+    showPrevious: props.showPrevious,
+    animatedValue: props.dotsAnimatedValue,
     showSkip: props.showSkip,
     numberOfScreens: props.numberOfScreens,
     skipLabel: props.skipLabel,
-    showNext: showNext,
+    showNext,
     nextLabel: props.nextLabel,
+    previousLabel: props.previousLabel,
     doneLabel: props.doneLabel,
     hasSkipPosition: !!props.skipButtonPosition,
+    paginationStyle: props.paginationStyle,
+    progressBarStyle: props.progressBarStyle,
+    progressBarFillStyle: props.progressBarFillStyle,
+    dotsAreTappable: props.dotsAreTappable,
     paginationContainerStyle: props.paginationContainerStyle,
     buttonRightContainerStyle: props.buttonRightContainerStyle,
     buttonLeftContainerStyle: props.buttonLeftContainerStyle,
@@ -51,28 +48,34 @@ const CustomPages = ({
     skipButtonContainerStyle: props.skipButtonContainerStyle,
     nextButtonContainerStyle: props.nextButtonContainerStyle,
     doneButtonContainerStyle: props.doneButtonContainerStyle,
+    previousButtonContainerStyle: props.previousButtonContainerStyle,
     skipLabelStyle: props.skipLabelStyle,
+    previousLabelStyle: props.previousLabelStyle,
     nextLabelStyle: props.nextLabelStyle,
     paginationPosition: props.paginationPosition
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.FlatList, {
-    ref: props.flatListRef,
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container]
+  }, props.skipButtonPosition && props.showSkip && /*#__PURE__*/_react.default.createElement(_button.SkipButton, {
+    buttonTextStyle: props.skipLabelStyle,
+    buttonStyle: props.skipButtonContainerStyle,
+    position: props.skipButtonPosition,
+    onPress: props.onSkip,
+    label: props.skipLabel
+  }), showPagination && props.paginationPosition === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.customFooter && props.customFooter({
+    nextPage: props.nextPage
+  }), !props.customFooter && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, paginationProps)), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.FlatList, {
+    ref: node => props.setFlatListRef(node),
     data: _react.default.Children.toArray(props.children),
     horizontal: true,
     pagingEnabled: true,
     showsHorizontalScrollIndicator: false,
     scrollEnabled: props.scrollEnabled,
-    onScroll: _reactNative.Animated.event([{
-      nativeEvent: {
-        contentOffset: {
-          x: props.scrollX
-        }
-      }
-    }], {
-      useNativeDriver: false
-    }),
-    scrollEventThrottle: 1,
+    onScroll: props.onScroll,
+    onScrollBeginDrag: props.onScrollBeginDrag,
+    scrollEventThrottle: 16,
     onMomentumScrollEnd: event => {
-      const pageIndex = Math.round(event.nativeEvent.contentOffset.x / width);
+      const pageIndex = Math.round(event.nativeEvent.contentOffset.x / pageWidth);
       props.setPage(pageIndex || 0);
     },
     keyExtractor: (_, index) => index.toString(),
@@ -89,34 +92,7 @@ const CustomPages = ({
     }
   }), showPagination && props.paginationPosition !== 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.customFooter && props.customFooter({
     nextPage: props.nextPage
-  }), !props.customFooter && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
-    color: '#fff',
-    backgroundColor: '#333',
-    width: width,
-    onNext: props.nextPage,
-    onSkip: props.onSkip,
-    onDone: props.onDone,
-    showDone: props.showDone,
-    animatedValue: props.scrollX,
-    showSkip: props.showSkip,
-    numberOfScreens: props.numberOfScreens,
-    skipLabel: props.skipLabel,
-    nextLabel: props.nextLabel,
-    showNext: showNext,
-    doneLabel: props.doneLabel,
-    paginationContainerStyle: props.paginationContainerStyle,
-    buttonRightContainerStyle: props.buttonRightContainerStyle,
-    buttonLeftContainerStyle: props.buttonLeftContainerStyle,
-    dotsContainerStyle: props.dotsContainerStyle,
-    doneLabelStyle: props.doneLabelStyle,
-    skipButtonContainerStyle: props.skipButtonContainerStyle,
-    nextButtonContainerStyle: props.nextButtonContainerStyle,
-    doneButtonContainerStyle: props.doneButtonContainerStyle,
-    skipLabelStyle: props.skipLabelStyle,
-    hasSkipPosition: !!props.skipButtonPosition,
-    paginationPosition: props.paginationPosition,
-    nextLabelStyle: props.nextLabelStyle
-  })));
+  }), !props.customFooter && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, paginationProps)));
 };
 exports.CustomPages = CustomPages;
 const styles = _reactNative.StyleSheet.create({

package/lib/commonjs/components/CustomPages.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_react","_interopRequireDefault","_Pagination","_button","e","__esModule","default","width","Dimensions","get","CustomPages","showPagination","showNext","props","createElement","View","style","styles","container","skipButtonPosition","showSkip","SkipButton","buttonTextStyle","skipLabelStyle","buttonStyle","skipButtonContainerStyle","position","onPress","onSkip","label","skipLabel","paginationPosition","Fragment","customFooter","nextPage","Pagination","color","backgroundColor","onNext","onDone","showDone","animatedValue","scrollX","numberOfScreens","nextLabel","doneLabel","hasSkipPosition","paginationContainerStyle","buttonRightContainerStyle","buttonLeftContainerStyle","dotsContainerStyle","doneLabelStyle","nextButtonContainerStyle","doneButtonContainerStyle","nextLabelStyle","Animated","FlatList","ref","flatListRef","data","React","Children","toArray","children","horizontal","pagingEnabled","showsHorizontalScrollIndicator","scrollEnabled","onScroll","event","nativeEvent","contentOffset","x","useNativeDriver","scrollEventThrottle","onMomentumScrollEnd","pageIndex","Math","round","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":[]}
+{"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":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AASA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAEA,IAAAI,OAAA,GAAAJ,OAAA;AAAsC,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtC,MAAM;EAAEG;AAAM,CAAC,GAAGC,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC;AAyBnC,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,cAAc,GAAG,IAAI;EACrBC,QAAQ,GAAG,IAAI;EACf,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,SAAS,GAAGD,KAAK,CAACN,KAAK,IAAIA,KAAK;EAEtC,MAAMQ,eAAe,GAAG;IACtBC,KAAK,EAAE,MAAM;IACbC,eAAe,EAAE,MAAM;IACvBV,KAAK,EAAEO,SAAS;IAChBI,MAAM,EAAEL,KAAK,CAACM,QAAQ;IACtBC,MAAM,EAAEP,KAAK,CAACO,MAAM;IACpBC,MAAM,EAAER,KAAK,CAACQ,MAAM;IACpBC,QAAQ,EAAET,KAAK,CAACS,QAAQ;IACxBC,YAAY,EAAEV,KAAK,CAACU,YAAY;IAChCC,aAAa,EAAEX,KAAK,CAACY,iBAAiB;IACtCC,QAAQ,EAAEb,KAAK,CAACa,QAAQ;IACxBC,eAAe,EAAEd,KAAK,CAACc,eAAe;IACtCC,SAAS,EAAEf,KAAK,CAACe,SAAS;IAC1BhB,QAAQ;IACRiB,SAAS,EAAEhB,KAAK,CAACgB,SAAS;IAC1BC,aAAa,EAAEjB,KAAK,CAACiB,aAAa;IAClCC,SAAS,EAAElB,KAAK,CAACkB,SAAS;IAC1BC,eAAe,EAAE,CAAC,CAACnB,KAAK,CAACoB,kBAAkB;IAC3CC,eAAe,EAAErB,KAAK,CAACqB,eAAe;IACtCC,gBAAgB,EAAEtB,KAAK,CAACsB,gBAAgB;IACxCC,oBAAoB,EAAEvB,KAAK,CAACuB,oBAAoB;IAChDC,eAAe,EAAExB,KAAK,CAACwB,eAAe;IACtCC,wBAAwB,EAAEzB,KAAK,CAACyB,wBAAwB;IACxDC,yBAAyB,EAAE1B,KAAK,CAAC0B,yBAAyB;IAC1DC,wBAAwB,EAAE3B,KAAK,CAAC2B,wBAAwB;IACxDC,kBAAkB,EAAE5B,KAAK,CAAC4B,kBAAkB;IAC5CC,cAAc,EAAE7B,KAAK,CAAC6B,cAAc;IACpCC,wBAAwB,EAAE9B,KAAK,CAAC8B,wBAAwB;IACxDC,wBAAwB,EAAE/B,KAAK,CAAC+B,wBAAwB;IACxDC,wBAAwB,EAAEhC,KAAK,CAACgC,wBAAwB;IACxDC,4BAA4B,EAAEjC,KAAK,CAACiC,4BAA4B;IAChEC,cAAc,EAAElC,KAAK,CAACkC,cAAc;IACpCC,kBAAkB,EAAEnC,KAAK,CAACmC,kBAAkB;IAC5CC,cAAc,EAAEpC,KAAK,CAACoC,cAAc;IACpCC,kBAAkB,EAAErC,KAAK,CAACqC;EAC5B,CAAC;EAED,oBACElD,MAAA,CAAAM,OAAA,CAAA6C,aAAA,CAACrD,YAAA,CAAAsD,IAAI;IAACC,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS;EAAE,GAC7B1C,KAAK,CAACoB,kBAAkB,IAAIpB,KAAK,CAACa,QAAQ,iBACzC1B,MAAA,CAAAM,OAAA,CAAA6C,aAAA,CAAChD,OAAA,CAAAqD,UAAU;IACTC,eAAe,EAAE5C,KAAK,CAACkC,cAAe;IACtCW,WAAW,EAAE7C,KAAK,CAAC8B,wBAAyB;IAC5CgB,QAAQ,EAAE9C,KAAK,CAACoB,kBAAmB;IACnC2B,OAAO,EAAE/C,KAAK,CAACO,MAAO;IACtByC,KAAK,EAAEhD,KAAK,CAACe;EAAU,CACxB,CACF,EACAjB,cAAc,IAAIE,KAAK,CAACqC,kBAAkB,KAAK,KAAK,iBACnDlD,MAAA,CAAAM,OAAA,CAAA6C,aAAA,CAAAnD,MAAA,CAAAM,OAAA,CAAAwD,QAAA,QACGjD,KAAK,CAACkD,YAAY,IACjBlD,KAAK,CAACkD,YAAY,CAAC;IAAE5C,QAAQ,EAAEN,KAAK,CAACM;EAAS,CAAC,CAAC,EACjD,CAACN,KAAK,CAACkD,YAAY,iBAAI/D,MAAA,CAAAM,OAAA,CAAA6C,aAAA,CAACjD,WAAA,CAAA8D,UAAU,EAAKjD,eAAkB,CAC1D,CACH,eACDf,MAAA,CAAAM,OAAA,CAAA6C,aAAA,CAACrD,YAAA,CAAAmE,QAAQ,CAACC,QAAQ;IAChBC,GAAG,EAAGC,IAAI,IAAKvD,KAAK,CAACwD,cAAc,CAACD,IAAuB,CAAE;IAC7DE,IAAI,EAAEC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAAC5D,KAAK,CAAC6D,QAAQ,CAAE;IAC7CC,UAAU;IACVC,aAAa;IACbC,8BAA8B,EAAE,KAAM;IACtCC,aAAa,EAAEjE,KAAK,CAACiE,aAAc;IACnCC,QAAQ,EAAElE,KAAK,CAACkE,QAAS;IACzBC,iBAAiB,EAAEnE,KAAK,CAACmE,iBAAkB;IAC3CC,mBAAmB,EAAE,EAAG;IACxBC,mBAAmB,EAAGC,KAAK,IAAK;MAC9B,MAAMC,SAAS,GAAGC,IAAI,CAACC,KAAK,CAC1BH,KAAK,CAACI,WAAW,CAACC,aAAa,CAACC,CAAC,GAAG3E,SACtC,CAAC;MACDD,KAAK,CAAC6E,OAAO,CAACN,SAAS,IAAI,CAAC,CAAC;IAC/B,CAAE;IACFO,YAAY,EAAEA,CAACC,CAAC,EAAEC,KAAK,KAAKA,KAAK,CAACC,QAAQ,CAAC,CAAE;IAC7CC,UAAU,EAAEA,CAAC;MAAEC,IAAI;MAAEH;IAAM,CAAC,KAAK;MAC/B,oBAAOtB,cAAK,CAAC0B,YAAY,CACvBD,IAAI,EACJ;QACEE,WAAW,EAAErF,KAAK,CAACqF,WAAW;QAC9BvE,eAAe,EAAEd,KAAK,CAACc,eAAe;QACtCR,QAAQ,EAAEN,KAAK,CAACM,QAAQ;QACxB0E;MACF,CACF,CAAC;IACH;EAAE,CACH,CAAC,EAEDlF,cAAc,IAAIE,KAAK,CAACqC,kBAAkB,KAAK,KAAK,iBACnDlD,MAAA,CAAAM,OAAA,CAAA6C,aAAA,CAAAnD,MAAA,CAAAM,OAAA,CAAAwD,QAAA,QACGjD,KAAK,CAACkD,YAAY,IACjBlD,KAAK,CAACkD,YAAY,CAAC;IAAE5C,QAAQ,EAAEN,KAAK,CAACM;EAAS,CAAC,CAAC,EACjD,CAACN,KAAK,CAACkD,YAAY,iBAAI/D,MAAA,CAAAM,OAAA,CAAA6C,aAAA,CAACjD,WAAA,CAAA8D,UAAU,EAAKjD,eAAkB,CAC1D,CAEA,CAAC;AAEX,CAAC;AAACoF,OAAA,CAAAzF,WAAA,GAAAA,WAAA;AAEF,MAAM4C,MAAM,GAAG8C,uBAAU,CAACC,MAAM,CAAC;EAC/B9C,SAAS,EAAE;IACT+C,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDC,MAAM,EAAE;IACNlG,KAAK;IACLgG,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBvF,eAAe,EAAE;EACnB,CAAC;EACDyF,UAAU,EAAE;IACVC,aAAa,EAAE,KAAK;IACpBH,UAAU,EAAE,QAAQ;IACpBI,eAAe,EAAE,EAAE;IACnBC,iBAAiB,EAAE,EAAE;IACrBtG;EACF,CAAC;EACDuG,GAAG,EAAE;IACHC,MAAM,EAAE,EAAE;IACVxG,KAAK,EAAE,EAAE;IACTyG,YAAY,EAAE,CAAC;IACf/F,eAAe,EAAE,MAAM;IACvBgG,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbP,aAAa,EAAE,KAAK;IACpBL,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/components/OnboardingPages.js

@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OnboardingPages = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _color = require("../utils/color");
 var _reactNative = require("react-native");
 var _Pagination = require("./Pagination");
 var _Page = require("./Page");
 var _button = require("./button");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -22,122 +21,102 @@ const OnboardingPages = ({
   showNext = true,
   ...props
 }) => {
-  var _props$pages$previous;
-  const backgroundColorAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const [previousPage, setPreviousPage] = _react.default.useState(0);
+  const pageWidth = props.width || width;
   const currentPage_ = props.pages[props.currentPage];
-  const currentBackgroundColor = (currentPage_ === null || currentPage_ === void 0 ? void 0 : currentPage_.backgroundColor) || '';
-  const isLight = (0, _tinycolor.default)(currentBackgroundColor).getBrightness() > 180;
-  const footerBackgroundColor = isLight ? (0, _tinycolor.default)(currentBackgroundColor).darken(30).toString() : (0, _tinycolor.default)(currentBackgroundColor).lighten(30).toString();
-  const color = (0, _tinycolor.default)(footerBackgroundColor).getBrightness() > 180 ? (0, _tinycolor.default)(footerBackgroundColor).darken(60).toString() : (0, _tinycolor.default)(footerBackgroundColor).lighten(60).toString();
-  const previousBackgroundColor = ((_props$pages$previous = props.pages[previousPage]) === null || _props$pages$previous === void 0 ? void 0 : _props$pages$previous.backgroundColor) || 'white';
-  // Interpolating background color based on backgroundColorAnim value
-  const interpolatedBackgroundColor = backgroundColorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [currentBackgroundColor, previousBackgroundColor],
-    extrapolate: 'clamp'
-  });
-  const setPage_ = newPageIndex => {
-    setPreviousPage(props.currentPage);
-    props.setPage(newPageIndex);
-  };
-  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
-    style: [styles.container, {
-      backgroundColor: interpolatedBackgroundColor
-    }]
-  }, props.skipButtonPosition && props.showSkip && /*#__PURE__*/_react.default.createElement(_button.SkipButton, {
-    buttonTextStyle: props.skipLabelStyle,
-    buttonStyle: props.skipButtonContainerStyle,
-    position: props.skipButtonPosition,
-    label: props.skipLabel,
-    onPress: props.onSkip
-  }), props.paginationPosition === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showPagination && props.customFooter && props.customFooter({
-    nextPage: props.nextPage
-  }), !props.customFooter && showPagination && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
-    width: props.width || width,
+  const currentBackgroundColor = (currentPage_ === null || currentPage_ === void 0 ? void 0 : currentPage_.backgroundColor) ?? 'white';
+  const isLight = (0, _color.getBrightness)(currentBackgroundColor) > 180;
+  const footerBackgroundColor = isLight ? (0, _color.darken)(currentBackgroundColor, 30) : (0, _color.lighten)(currentBackgroundColor, 30);
+  const color = (0, _color.getBrightness)(footerBackgroundColor) > 180 ? (0, _color.darken)(footerBackgroundColor, 60) : (0, _color.lighten)(footerBackgroundColor, 60);
+  const interpolatedBackgroundColor = (0, _react.useMemo)(() => {
+    const pages = props.pages;
+    // interpolate() requires at least 2 stops; for 0 or 1 pages there is
+    // nothing to animate between, so use the solid current color.
+    if (pages.length < 2) return currentBackgroundColor;
+    const inputRange = pages.map((_, i) => i * pageWidth);
+    const outputRange = pages.map(p => p.backgroundColor ?? 'white');
+    return props.scrollX.interpolate({
+      inputRange,
+      outputRange,
+      extrapolate: 'clamp'
+    });
+  }, [props.pages, props.scrollX, pageWidth, currentBackgroundColor]);
+  const paginationProps = {
+    width: pageWidth,
     onNext: props.nextPage,
     onSkip: props.onSkip,
-    color: color,
-    showNext: showNext,
+    color,
+    showNext,
     onDone: props.onDone,
     showDone: props.showDone,
+    showPrevious: props.showPrevious,
     backgroundColor: footerBackgroundColor,
-    animatedValue: props.scrollX,
+    animatedValue: props.dotsAnimatedValue,
     showSkip: props.showSkip,
     numberOfScreens: props.pages.length,
     skipLabel: props.skipLabel,
     nextLabel: props.nextLabel,
+    previousLabel: props.previousLabel,
     hasSkipPosition: !!props.skipButtonPosition,
     doneLabel: props.doneLabel,
+    paginationStyle: props.paginationStyle,
+    progressBarStyle: props.progressBarStyle,
+    progressBarFillStyle: props.progressBarFillStyle,
+    dotsAreTappable: props.dotsAreTappable,
+    mirror: props.mirror,
     paginationContainerStyle: props.paginationContainerStyle,
     buttonRightContainerStyle: props.buttonRightContainerStyle,
     buttonLeftContainerStyle: props.buttonLeftContainerStyle,
     dotsContainerStyle: props.dotsContainerStyle,
     doneLabelStyle: props.doneLabelStyle,
     skipLabelStyle: props.skipLabelStyle,
+    previousLabelStyle: props.previousLabelStyle,
     nextLabelStyle: props.nextLabelStyle,
     skipButtonContainerStyle: props.skipButtonContainerStyle,
     nextButtonContainerStyle: props.nextButtonContainerStyle,
-    doneButtonContainerStyle: props.doneButtonContainerStyle
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.FlatList, {
-    ref: props.flatListRef,
+    doneButtonContainerStyle: props.doneButtonContainerStyle,
+    previousButtonContainerStyle: props.previousButtonContainerStyle
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styles.container, {
+      backgroundColor: interpolatedBackgroundColor
+    }]
+  }, props.skipButtonPosition && props.showSkip && /*#__PURE__*/_react.default.createElement(_button.SkipButton, {
+    buttonTextStyle: props.skipLabelStyle,
+    buttonStyle: props.skipButtonContainerStyle,
+    position: props.skipButtonPosition,
+    label: props.skipLabel,
+    onPress: props.onSkip
+  }), props.paginationPosition === 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showPagination && props.customFooter && props.customFooter({
+    nextPage: props.nextPage
+  }), !props.customFooter && showPagination && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, paginationProps)), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.FlatList, {
+    ref: node => props.setFlatListRef(node),
     data: props.pages,
     horizontal: true,
     pagingEnabled: true,
     showsHorizontalScrollIndicator: false,
+    scrollEnabled: props.scrollEnabled,
+    style: props.mirror ? styles.mirror : undefined,
     keyExtractor: (_, index) => index.toString(),
     renderItem: ({
       item,
       index
     }) => /*#__PURE__*/_react.default.createElement(_Page.OnboardingPage, _extends({
       color: color,
-      width: props.width || width,
+      width: pageWidth,
       swap: props.swap,
+      mirror: props.mirror,
       key: index
     }, item)),
-    onScroll: _reactNative.Animated.event([{
-      nativeEvent: {
-        contentOffset: {
-          x: props.scrollX
-        }
-      }
-    }], {
-      useNativeDriver: false
-    }),
+    onScroll: props.onScroll,
+    onScrollBeginDrag: props.onScrollBeginDrag,
     scrollEventThrottle: 16,
     onMomentumScrollEnd: event => {
-      const pageIndex = Math.round(event.nativeEvent.contentOffset.x / (props.width || width));
-      setPage_(pageIndex || 0);
+      const pageIndex = Math.round(event.nativeEvent.contentOffset.x / pageWidth);
+      props.setPage(pageIndex || 0);
     }
   }), props.paginationPosition !== 'top' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showPagination && props.customFooter && props.customFooter({
     nextPage: props.nextPage
-  }), !props.customFooter && showPagination && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
-    width: props.width || width,
-    onNext: props.nextPage,
-    onSkip: props.onSkip,
-    color: color,
-    hasSkipPosition: !!props.skipButtonPosition,
-    onDone: props.onDone,
-    showDone: props.showDone,
-    backgroundColor: footerBackgroundColor,
-    animatedValue: props.scrollX,
-    showSkip: props.showSkip,
-    numberOfScreens: props.pages.length,
-    skipLabel: props.skipLabel,
-    nextLabel: props.nextLabel,
-    doneLabel: props.doneLabel,
-    paginationContainerStyle: props.paginationContainerStyle,
-    buttonRightContainerStyle: props.buttonRightContainerStyle,
-    buttonLeftContainerStyle: props.buttonLeftContainerStyle,
-    dotsContainerStyle: props.dotsContainerStyle,
-    doneLabelStyle: props.doneLabelStyle,
-    skipLabelStyle: props.skipLabelStyle,
-    skipButtonContainerStyle: props.skipButtonContainerStyle,
-    nextButtonContainerStyle: props.nextButtonContainerStyle,
-    doneButtonContainerStyle: props.doneButtonContainerStyle,
-    showNext: showNext,
-    nextLabelStyle: props.nextLabelStyle
-  })));
+  }), !props.customFooter && showPagination && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, paginationProps)));
 };
 exports.OnboardingPages = OnboardingPages;
 const styles = _reactNative.StyleSheet.create({
@@ -170,6 +149,11 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: 'row',
     flex: 1,
     justifyContent: 'center'
+  },
+  mirror: {
+    transform: [{
+      scaleX: -1
+    }]
   }
 });
 //# sourceMappingURL=OnboardingPages.js.map