react-native-app-onboard 0.1.9 → 0.2.1

package/lib/typescript/src/utils/color.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Minimal color helpers — a tiny, dependency-free replacement for the subset of
+ * tinycolor2 this library used: perceived brightness, HSL-based lighten/darken,
+ * and producing an `rgba()` string with a custom alpha.
+ *
+ * Accepts hex (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`), `rgb()`/`rgba()`, and
+ * CSS named colors. Invalid input resolves to black, matching tinycolor's
+ * behavior of treating unparseable colors as having zero brightness.
+ */
+/** Perceived brightness on a 0–255 scale (W3C formula, as tinycolor uses). */
+export declare function getBrightness(input: string): number;
+/** Lighten by `amount` percent (HSL lightness), returning a hex string. */
+export declare function lighten(input: string, amount?: number): string;
+/** Darken by `amount` percent (HSL lightness), returning a hex string. */
+export declare function darken(input: string, amount?: number): string;
+/** Return an `rgba()` string for `input` with the given alpha. */
+export declare function setAlpha(input: string, alpha: number): string;
+//# sourceMappingURL=color.d.ts.map

package/lib/typescript/src/utils/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/utils/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAyPH,8EAA8E;AAC9E,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGnD;AAQD,2EAA2E;AAC3E,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,SAAK,GAAG,MAAM,CAE1D;AAED,0EAA0E;AAC1E,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,SAAK,GAAG,MAAM,CAEzD;AAED,kEAAkE;AAClE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAG7D"}

package/lib/typescript/src/utils/persistence.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Minimal AsyncStorage-compatible interface. Any storage that implements these
+ * three methods works (e.g. @react-native-async-storage/async-storage,
+ * expo-secure-store wrappers, or an in-memory mock in tests). Keeping the
+ * dependency injected means this library does not have to ship a storage peer
+ * dependency of its own.
+ */
+export type OnboardingStorageAdapter = {
+    getItem: (key: string) => Promise<string | null>;
+    setItem: (key: string, value: string) => Promise<void>;
+    removeItem: (key: string) => Promise<void>;
+};
+/**
+ * Returns whether the user has previously completed onboarding stored under
+ * `key`. Defaults to a namespaced key so callers usually only pass the storage.
+ */
+export declare function hasCompletedOnboarding(storage: OnboardingStorageAdapter, key?: string): Promise<boolean>;
+/** Marks onboarding as completed so it can be skipped on subsequent launches. */
+export declare function markOnboardingComplete(storage: OnboardingStorageAdapter, key?: string): Promise<void>;
+/** Clears the stored completion flag (useful for "replay onboarding" actions). */
+export declare function resetOnboarding(storage: OnboardingStorageAdapter, key?: string): Promise<void>;
+/**
+ * Convenience factory that binds a storage adapter (and optional key) once and
+ * returns ready-to-call helpers, so app code doesn't repeat the storage arg.
+ */
+export declare function createOnboardingStorage(storage: OnboardingStorageAdapter, key?: string): {
+    hasCompleted: () => Promise<boolean>;
+    markComplete: () => Promise<void>;
+    reset: () => Promise<void>;
+};
+//# sourceMappingURL=persistence.d.ts.map

package/lib/typescript/src/utils/persistence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"persistence.d.ts","sourceRoot":"","sources":["../../../../src/utils/persistence.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjD,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5C,CAAC;AAKF;;;GAGG;AACH,wBAAsB,sBAAsB,CAC1C,OAAO,EAAE,wBAAwB,EACjC,GAAG,GAAE,MAAoB,GACxB,OAAO,CAAC,OAAO,CAAC,CAGlB;AAED,iFAAiF;AACjF,wBAAsB,sBAAsB,CAC1C,OAAO,EAAE,wBAAwB,EACjC,GAAG,GAAE,MAAoB,GACxB,OAAO,CAAC,IAAI,CAAC,CAEf;AAED,kFAAkF;AAClF,wBAAsB,eAAe,CACnC,OAAO,EAAE,wBAAwB,EACjC,GAAG,GAAE,MAAoB,GACxB,OAAO,CAAC,IAAI,CAAC,CAEf;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,wBAAwB,EACjC,GAAG,GAAE,MAAoB;;;;EAO1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-app-onboard",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "description": "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.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -26,7 +26,7 @@
     "!**/.*"
   ],
   "scripts": {
-    "example": "yarn workspace react-native-app-onboard-example",
+    "example": "yarn workspace react-native-app-onboard-example start",
     "test": "jest",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
@@ -66,11 +66,13 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/babel-preset": "0.74.84",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.44",
-    "@types/tinycolor2": "^1.4.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript/native-preview": "^7.0.0-dev.20260606.1",
     "commitlint": "^17.0.2",
     "del-cli": "^5.1.0",
     "eslint": "^8.51.0",
@@ -81,6 +83,7 @@
     "react": "18.2.0",
     "react-native": "0.74.2",
     "react-native-builder-bob": "^0.20.0",
+    "react-test-renderer": "18.2.0",
     "release-it": "^15.0.0",
     "typescript": "^5.2.2"
   },
@@ -94,6 +97,9 @@
   "packageManager": "yarn@3.6.1",
   "jest": {
     "preset": "react-native",
+    "moduleNameMapper": {
+      "^react-native-app-onboard$": "<rootDir>/src/index"
+    },
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
@@ -165,7 +171,7 @@
       ]
     ]
   },
-  "dependencies": {
-    "tinycolor2": "^1.6.0"
-  }
+  "workspaces": [
+    "example"
+  ]
 }

package/src/components/CustomPages.tsx

@@ -1,4 +1,12 @@
-import { View, Dimensions, Animated, StyleSheet, FlatList } from 'react-native';
+import {
+  View,
+  Dimensions,
+  Animated,
+  StyleSheet,
+  FlatList,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+} from 'react-native';
 import React from 'react';
 import { Pagination } from './Pagination';
 import type { OnboardingProps } from '../types';
@@ -10,10 +18,16 @@ type CustomPagesProps = OnboardingProps & {
   children?: React.ReactNode[];
   currentPage: number;
   setPage: (newPageIndex: number) => void;
-  flatListRef: React.RefObject<FlatList>;
+  setFlatListRef: (node: FlatList | null) => void;
   scrollX: Animated.Value;
+  dotsAnimatedValue: Animated.Value;
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  onScrollBeginDrag: () => void;
   nextPage: () => void;
   numberOfScreens: number;
+  // Accepted for prop-spread compatibility. Forced-`rtl` mirroring applies to
+  // the declarative `pages` API; custom children follow the device direction.
+  mirror?: boolean;
 };
 
 export type SliderProps = {
@@ -28,6 +42,45 @@ export const CustomPages = ({
   showNext = true,
   ...props
 }: CustomPagesProps) => {
+  const pageWidth = props.width || width;
+
+  const paginationProps = {
+    color: '#fff',
+    backgroundColor: '#333',
+    width: pageWidth,
+    onNext: props.nextPage,
+    onSkip: props.onSkip,
+    onDone: props.onDone,
+    showDone: props.showDone,
+    showPrevious: props.showPrevious,
+    animatedValue: props.dotsAnimatedValue,
+    showSkip: props.showSkip,
+    numberOfScreens: props.numberOfScreens,
+    skipLabel: props.skipLabel,
+    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,
+    dotsContainerStyle: props.dotsContainerStyle,
+    doneLabelStyle: props.doneLabelStyle,
+    skipButtonContainerStyle: props.skipButtonContainerStyle,
+    nextButtonContainerStyle: props.nextButtonContainerStyle,
+    doneButtonContainerStyle: props.doneButtonContainerStyle,
+    previousButtonContainerStyle: props.previousButtonContainerStyle,
+    skipLabelStyle: props.skipLabelStyle,
+    previousLabelStyle: props.previousLabelStyle,
+    nextLabelStyle: props.nextLabelStyle,
+    paginationPosition: props.paginationPosition,
+  };
+
   return (
     <View style={[styles.container]}>
       {props.skipButtonPosition && props.showSkip && (
@@ -43,53 +96,22 @@ export const CustomPages = ({
         <>
           {props.customFooter &&
             props.customFooter({ nextPage: props.nextPage })}
-          {!props.customFooter && (
-            <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}
-              showNext={showNext}
-              nextLabel={props.nextLabel}
-              doneLabel={props.doneLabel}
-              hasSkipPosition={!!props.skipButtonPosition}
-              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}
-              nextLabelStyle={props.nextLabelStyle}
-              paginationPosition={props.paginationPosition}
-            />
-          )}
+          {!props.customFooter && <Pagination {...paginationProps} />}
         </>
       )}
       <Animated.FlatList
-        ref={props.flatListRef}
+        ref={(node) => props.setFlatListRef(node as FlatList | null)}
         data={React.Children.toArray(props.children)}
         horizontal
         pagingEnabled
         showsHorizontalScrollIndicator={false}
         scrollEnabled={props.scrollEnabled}
-        onScroll={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
+            event.nativeEvent.contentOffset.x / pageWidth
           );
           props.setPage(pageIndex || 0);
         }}
@@ -111,36 +133,7 @@ export const CustomPages = ({
         <>
           {props.customFooter &&
             props.customFooter({ nextPage: props.nextPage })}
-          {!props.customFooter && (
-            <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 && <Pagination {...paginationProps} />}
         </>
       )}
     </View>

package/src/components/OnboardingPages.tsx

@@ -1,6 +1,13 @@
-import React, { useRef } from 'react';
-import tinycolor from 'tinycolor2';
-import { Animated, StyleSheet, Dimensions, FlatList } from 'react-native';
+import React, { useMemo } from 'react';
+import { getBrightness, lighten, darken } from '../utils/color';
+import {
+  Animated,
+  StyleSheet,
+  Dimensions,
+  FlatList,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+} from 'react-native';
 import { Pagination } from './Pagination';
 import { OnboardingPage, type Page } from './Page';
 import type { OnboardingProps } from '../types';
@@ -12,9 +19,13 @@ type Props = OnboardingProps & {
   pages: Page[];
   currentPage: number;
   setPage: (newPageIndex: number) => void;
-  flatListRef: React.RefObject<FlatList>;
+  setFlatListRef: (node: FlatList | null) => void;
   scrollX: Animated.Value;
+  dotsAnimatedValue: Animated.Value;
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  onScrollBeginDrag: () => void;
   nextPage: () => void;
+  mirror?: boolean;
 };
 
 export const OnboardingPages = ({
@@ -22,40 +33,74 @@ export const OnboardingPages = ({
   showNext = true,
   ...props
 }: Props) => {
-  const backgroundColorAnim = useRef(new Animated.Value(0)).current;
-  const [previousPage, setPreviousPage] = React.useState(0);
+  const pageWidth = props.width || width;
   const currentPage_ = props.pages[props.currentPage];
-  const currentBackgroundColor = currentPage_?.backgroundColor || '';
-  const isLight = tinycolor(currentBackgroundColor).getBrightness() > 180;
+  const currentBackgroundColor = currentPage_?.backgroundColor ?? 'white';
+  const isLight = getBrightness(currentBackgroundColor) > 180;
   const footerBackgroundColor = isLight
-    ? tinycolor(currentBackgroundColor).darken(30).toString()
-    : tinycolor(currentBackgroundColor).lighten(30).toString();
+    ? darken(currentBackgroundColor, 30)
+    : lighten(currentBackgroundColor, 30);
   const color =
-    tinycolor(footerBackgroundColor).getBrightness() > 180
-      ? tinycolor(footerBackgroundColor).darken(60).toString()
-      : tinycolor(footerBackgroundColor).lighten(60).toString();
+    getBrightness(footerBackgroundColor) > 180
+      ? darken(footerBackgroundColor, 60)
+      : lighten(footerBackgroundColor, 60);
 
-  const previousBackgroundColor =
-    props.pages[previousPage]?.backgroundColor || 'white';
-  // Interpolating background color based on backgroundColorAnim value
-  const interpolatedBackgroundColor = backgroundColorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [currentBackgroundColor, previousBackgroundColor],
-    extrapolate: 'clamp',
-  });
+  const interpolatedBackgroundColor = 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 setPage_ = (newPageIndex: number) => {
-    setPreviousPage(props.currentPage);
-    props.setPage(newPageIndex);
+  const paginationProps = {
+    width: pageWidth,
+    onNext: props.nextPage,
+    onSkip: props.onSkip,
+    color,
+    showNext,
+    onDone: props.onDone,
+    showDone: props.showDone,
+    showPrevious: props.showPrevious,
+    backgroundColor: footerBackgroundColor,
+    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,
+    previousButtonContainerStyle: props.previousButtonContainerStyle,
   };
 
   return (
     <Animated.View
       style={[
         styles.container,
-        {
-          backgroundColor: interpolatedBackgroundColor,
-        },
+        { backgroundColor: interpolatedBackgroundColor },
       ]}
     >
       {props.skipButtonPosition && props.showSkip && (
@@ -73,62 +118,37 @@ export const OnboardingPages = ({
             props.customFooter &&
             props.customFooter({ nextPage: props.nextPage })}
           {!props.customFooter && showPagination && (
-            <Pagination
-              width={props.width || width}
-              onNext={props.nextPage}
-              onSkip={props.onSkip}
-              color={color}
-              showNext={showNext}
-              onDone={props.onDone}
-              showDone={props.showDone}
-              backgroundColor={footerBackgroundColor}
-              animatedValue={props.scrollX}
-              showSkip={props.showSkip}
-              numberOfScreens={props.pages.length}
-              skipLabel={props.skipLabel}
-              nextLabel={props.nextLabel}
-              hasSkipPosition={!!props.skipButtonPosition}
-              doneLabel={props.doneLabel}
-              paginationContainerStyle={props.paginationContainerStyle}
-              buttonRightContainerStyle={props.buttonRightContainerStyle}
-              buttonLeftContainerStyle={props.buttonLeftContainerStyle}
-              dotsContainerStyle={props.dotsContainerStyle}
-              doneLabelStyle={props.doneLabelStyle}
-              skipLabelStyle={props.skipLabelStyle}
-              nextLabelStyle={props.nextLabelStyle}
-              skipButtonContainerStyle={props.skipButtonContainerStyle}
-              nextButtonContainerStyle={props.nextButtonContainerStyle}
-              doneButtonContainerStyle={props.doneButtonContainerStyle}
-            />
+            <Pagination {...paginationProps} />
           )}
         </>
       )}
       <Animated.FlatList
-        ref={props.flatListRef}
+        ref={(node) => props.setFlatListRef(node as FlatList | null)}
         data={props.pages}
         horizontal
         pagingEnabled
         showsHorizontalScrollIndicator={false}
+        scrollEnabled={props.scrollEnabled}
+        style={props.mirror ? styles.mirror : undefined}
         keyExtractor={(_, index) => index.toString()}
         renderItem={({ item, index }) => (
           <OnboardingPage
             color={color}
-            width={props.width || width}
+            width={pageWidth}
             swap={props.swap}
+            mirror={props.mirror}
             key={index}
             {...item}
           />
         )}
-        onScroll={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)
+            event.nativeEvent.contentOffset.x / pageWidth
           );
-          setPage_(pageIndex || 0);
+          props.setPage(pageIndex || 0);
         }}
       />
       {props.paginationPosition !== 'top' && (
@@ -137,33 +157,7 @@ export const OnboardingPages = ({
             props.customFooter &&
             props.customFooter({ nextPage: props.nextPage })}
           {!props.customFooter && showPagination && (
-            <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}
-            />
+            <Pagination {...paginationProps} />
           )}
         </>
       )}
@@ -202,4 +196,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
+  mirror: {
+    transform: [{ scaleX: -1 }],
+  },
 });

package/src/components/Page.tsx

@@ -22,10 +22,12 @@ export type Page = {
   titleStyle?: StyleProp<TextStyle>;
   subtitleStyle?: StyleProp<TextStyle>;
   swap?: boolean;
+  /** Internal: counter-flips page content when the slider is mirrored for RTL. */
+  mirror?: boolean;
 };
 
 const { width, height } = Dimensions.get('window');
-const potrait = height > width;
+const portrait = height > width;
 
 export function OnboardingPage(props: Page) {
   return (
@@ -35,6 +37,7 @@ export function OnboardingPage(props: Page) {
         { width: props.width },
         props.containerStyle,
         props.swap && styles.swapStyle,
+        props.mirror && styles.mirror,
       ]}
     >
       <View style={[styles.imageContainer, props.imageContainerStyle]}>
@@ -87,7 +90,7 @@ const styles = StyleSheet.create({
   },
   imageContainer: {
     flex: 0,
-    paddingBottom: potrait ? 60 : 10,
+    paddingBottom: portrait ? 60 : 10,
     alignItems: 'center',
     width: '100%',
   },
@@ -97,4 +100,7 @@ const styles = StyleSheet.create({
   swapStyle: {
     flexDirection: 'column-reverse',
   },
+  mirror: {
+    transform: [{ scaleX: -1 }],
+  },
 });