react-native-app-onboard 0.1.1

package/lib/typescript/src/components/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,QAAQ,EAER,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,WAAW,GAAG;IACjB,aAAa,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC9B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,wBAAwB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChD,yBAAyB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjD,wBAAwB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChD,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,kBAAkB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,qBA4E5C"}

package/lib/typescript/src/components/Swiper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { OnboardingProps } from '../types';
+export declare const Swiper: React.FC<OnboardingProps>;
+//# sourceMappingURL=Swiper.d.ts.map

package/lib/typescript/src/components/Swiper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swiper.d.ts","sourceRoot":"","sources":["../../../../src/components/Swiper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgD5C,CAAC"}

package/lib/typescript/src/components/button.d.ts

@@ -0,0 +1,12 @@
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import React from 'react';
+type ButtonProps = {
+    onPress?: () => void;
+    label?: string | React.ReactNode;
+    color?: string;
+    buttonStyle?: StyleProp<ViewStyle>;
+    buttonTextStyle?: StyleProp<TextStyle>;
+};
+export declare const Button: (props: ButtonProps) => number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/lib/typescript/src/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,MAAM,UAAW,WAAW,wFAkBxC,CAAC"}

package/lib/typescript/src/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Swiper';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/lib/typescript/src/context/OnboardingContext.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type FlatList } from 'react-native';
+export type SliderProps = {
+    currentPage: number;
+    numberOfScreens: number;
+    nextPage: (animated?: boolean) => void;
+    scrollTo: (index: number, animated?: boolean) => void;
+};
+type OnboardingContextType = SliderProps & {
+    setCurrentPage: (index: number) => void;
+    flatListRef: React.RefObject<FlatList>;
+    width?: number;
+    numberOfScreens: number;
+    progress: number;
+    scrollEnabled?: boolean;
+    enableScroll: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+    isDone: boolean;
+};
+type OnboardingProviderProps = {
+    children: React.ReactNode;
+    width?: number;
+    numberOfScreens: number;
+    scrollEnabled?: boolean;
+};
+export declare const OnboardingContext: React.Context<OnboardingContextType | undefined>;
+export declare const OnboardingProvider: React.FC<OnboardingProviderProps>;
+export {};
+//# sourceMappingURL=OnboardingContext.d.ts.map

package/lib/typescript/src/context/OnboardingContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingContext.d.ts","sourceRoot":"","sources":["../../../../src/context/OnboardingContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,KAAK,qBAAqB,GAAG,WAAW,GAAG;IACzC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC;IACxE,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,kDAElB,CAAC;AAEb,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8DhE,CAAC"}

package/lib/typescript/src/hooks/useOnboarding.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const useOnboarding: () => import("../context/OnboardingContext").SliderProps & {
+    setCurrentPage: (index: number) => void;
+    flatListRef: React.RefObject<import("react-native").FlatList<any>>;
+    width?: number | undefined;
+    numberOfScreens: number;
+    progress: number;
+    scrollEnabled?: boolean | undefined;
+    enableScroll: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+    isDone: boolean;
+};
+//# sourceMappingURL=useOnboarding.d.ts.map

package/lib/typescript/src/hooks/useOnboarding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboarding.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useOnboarding.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,aAAa;;;;;;;;;CAQzB,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { OnboardingProps } from './types';
+export { useOnboarding } from './hooks/useOnboarding';
+export declare function Onboarding(props: OnboardingProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAUhD"}

package/lib/typescript/src/types/index.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { Page } from '../components/Page';
+export type OnboardingProps = {
+    children?: React.ReactNode[];
+    nextLabel?: string | React.ReactNode;
+    skipLabel?: string | React.ReactNode;
+    doneLabel?: string | React.ReactNode;
+    showSkip?: boolean;
+    showNext?: boolean;
+    showDone?: boolean;
+    onDone?: () => void;
+    onSkip?: () => void;
+    showPagination?: boolean;
+    scrollEnabled?: boolean;
+    customFooter?: (props: {
+        nextPage: () => void;
+    }) => React.ReactNode;
+    paginationContainerStyle?: StyleProp<ViewStyle>;
+    buttonRightContainerStyle?: StyleProp<ViewStyle>;
+    buttonLeftContainerStyle?: StyleProp<ViewStyle>;
+    dotsContainerStyle?: StyleProp<ViewStyle>;
+    doneLabelStyle?: StyleProp<TextStyle>;
+    skipLabelStyle?: StyleProp<TextStyle>;
+    nextLabelStyle?: StyleProp<TextStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    imageContainerStyle?: StyleProp<ViewStyle>;
+    titleContainerStyle?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<TextStyle>;
+    subtitleStyle?: StyleProp<TextStyle>;
+    paginationPosition?: 'top' | 'bottom';
+    scrollAnimationDuration?: number;
+    useNativeDriver?: boolean;
+    width?: number;
+    color?: string;
+    pages?: Page[];
+} & ({
+    children?: React.ReactNode[];
+} | {
+    pages: Page[];
+});
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE,wBAAwB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChD,yBAAyB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjD,wBAAwB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChD,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACtC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAChB,GAAG,CACA;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC9B,GACD;IAAE,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CACpB,CAAC"}

package/package.json

@@ -0,0 +1,160 @@
+{
+  "name": "react-native-app-onboard",
+  "version": "0.1.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",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-app-onboard-example",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/julekgwa/react-native-app-onboard.git"
+  },
+  "author": "Junius Lekgwara <phutigravel@gmail.com> (https://github.com/julekgwa)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/julekgwa/react-native-app-onboard/issues"
+  },
+  "homepage": "https://github.com/julekgwa/react-native-app-onboard#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@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",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-native": "0.74.2",
+    "react-native-builder-bob": "^0.20.0",
+    "release-it": "^15.0.0",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "tinycolor2": "^1.6.0"
+  }
+}

package/src/components/CustomPages.tsx

@@ -0,0 +1,160 @@
+import { View, Dimensions, Animated, StyleSheet, FlatList } from 'react-native';
+import React from 'react';
+import { Pagination } from './Pagination';
+import type { OnboardingProps } from '../types';
+
+const { width } = Dimensions.get('window');
+
+type CustomPagesProps = OnboardingProps & {
+  children?: React.ReactNode[];
+  currentPage: number;
+  setPage: (newPageIndex: number) => void;
+  flatListRef: React.RefObject<FlatList>;
+  scrollX: Animated.Value;
+  nextPage: () => void;
+  numberOfScreens: number;
+};
+
+export type SliderProps = {
+  index?: number;
+  currentPage: number;
+  numberOfScreens: number;
+  nextPage: () => void;
+};
+
+export const CustomPages = ({
+  showPagination = true,
+  ...props
+}: CustomPagesProps) => {
+  return (
+    <View style={[styles.container]}>
+      {showPagination && props.paginationPosition === 'top' && (
+        <>
+          {showPagination &&
+            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}
+              doneLabel={props.doneLabel}
+              paginationContainerStyle={props.paginationContainerStyle}
+              buttonRightContainerStyle={props.buttonRightContainerStyle}
+              buttonLeftContainerStyle={props.buttonLeftContainerStyle}
+              dotsContainerStyle={props.dotsContainerStyle}
+              doneLabelStyle={props.doneLabelStyle}
+              skipLabelStyle={props.skipLabelStyle}
+              nextLabelStyle={props.nextLabelStyle}
+            />
+          )}
+        </>
+      )}
+      <Animated.FlatList
+        ref={props.flatListRef}
+        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}
+        onMomentumScrollEnd={(event) => {
+          const pageIndex = Math.round(
+            event.nativeEvent.contentOffset.x / width
+          );
+          props.setPage(pageIndex || 0);
+        }}
+        keyExtractor={(_, index) => index.toString()}
+        renderItem={({ item, index }) => {
+          return React.cloneElement(
+            item as React.ReactElement<SliderProps>,
+            {
+              currentPage: props.currentPage,
+              numberOfScreens: props.numberOfScreens,
+              nextPage: props.nextPage,
+              index,
+            } as SliderProps
+          );
+        }}
+      />
+
+      {showPagination && props.paginationPosition !== 'top' && (
+        <>
+          {showPagination &&
+            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}
+              doneLabel={props.doneLabel}
+              paginationContainerStyle={props.paginationContainerStyle}
+              buttonRightContainerStyle={props.buttonRightContainerStyle}
+              buttonLeftContainerStyle={props.buttonLeftContainerStyle}
+              dotsContainerStyle={props.dotsContainerStyle}
+              doneLabelStyle={props.doneLabelStyle}
+              skipLabelStyle={props.skipLabelStyle}
+              nextLabelStyle={props.nextLabelStyle}
+            />
+          )}
+        </>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  screen: {
+    width,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'blue',
+  },
+  pagination: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    width,
+  },
+  dot: {
+    height: 10,
+    width: 10,
+    borderRadius: 5,
+    backgroundColor: '#333',
+    margin: 5,
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'center',
+  },
+});

package/src/components/OnboardingPages.tsx

@@ -0,0 +1,173 @@
+import React, { useRef } from 'react';
+import tinycolor from 'tinycolor2';
+import { Animated, StyleSheet, Dimensions, FlatList } from 'react-native';
+import { Pagination } from './Pagination';
+import { OnboardingPage, type Page } from './Page';
+import type { OnboardingProps } from '../types';
+
+const { width } = Dimensions.get('window');
+
+type Props = OnboardingProps & {
+  pages: Page[];
+  currentPage: number;
+  setPage: (newPageIndex: number) => void;
+  flatListRef: React.RefObject<FlatList>;
+  scrollX: Animated.Value;
+  nextPage: () => void;
+};
+
+export const OnboardingPages = ({ showPagination = true, ...props }: Props) => {
+  const backgroundColorAnim = useRef(new Animated.Value(0)).current;
+  const [previousPage, setPreviousPage] = React.useState(0);
+  const currentPage_ = props.pages[props.currentPage];
+  const currentBackgroundColor = currentPage_?.backgroundColor || '';
+  const isLight = tinycolor(currentBackgroundColor).getBrightness() > 180;
+  const footerBackgroundColor = isLight
+    ? tinycolor(currentBackgroundColor).darken(30).toString()
+    : tinycolor(currentBackgroundColor).lighten(30).toString();
+  const color =
+    tinycolor(footerBackgroundColor).getBrightness() > 180
+      ? tinycolor(footerBackgroundColor).darken(60).toString()
+      : tinycolor(footerBackgroundColor).lighten(60).toString();
+
+  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 setPage_ = (newPageIndex: number) => {
+    setPreviousPage(props.currentPage);
+    props.setPage(newPageIndex);
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor: interpolatedBackgroundColor,
+        },
+      ]}
+    >
+      {props.paginationPosition === 'top' && (
+        <>
+          {showPagination &&
+            props.customFooter &&
+            props.customFooter({ nextPage: props.nextPage })}
+          {!props.customFooter && (
+            <Pagination
+              width={width}
+              onNext={props.nextPage}
+              onSkip={props.onSkip}
+              color={color}
+              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}
+              nextLabelStyle={props.nextLabelStyle}
+            />
+          )}
+        </>
+      )}
+      <Animated.FlatList
+        ref={props.flatListRef}
+        data={props.pages}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={(_, index) => index.toString()}
+        renderItem={({ item, index }) => (
+          <OnboardingPage color={color} width={width} key={index} {...item} />
+        )}
+        onScroll={Animated.event(
+          [{ nativeEvent: { contentOffset: { x: props.scrollX } } }],
+          { useNativeDriver: false }
+        )}
+        scrollEventThrottle={16} // Adjusted for better performance
+        onMomentumScrollEnd={(event) => {
+          const pageIndex = Math.round(
+            event.nativeEvent.contentOffset.x / width
+          );
+          setPage_(pageIndex || 0);
+        }}
+      />
+      {props.paginationPosition !== 'top' && (
+        <>
+          {showPagination &&
+            props.customFooter &&
+            props.customFooter({ nextPage: props.nextPage })}
+          <Pagination
+            width={width}
+            onNext={props.nextPage}
+            onSkip={props.onSkip}
+            color={color}
+            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}
+            nextLabelStyle={props.nextLabelStyle}
+          />
+        </>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  screen: {
+    width,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'blue',
+  },
+  pagination: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    width,
+  },
+  dot: {
+    height: 10,
+    width: 10,
+    borderRadius: 5,
+    backgroundColor: '#333',
+    margin: 5,
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'center',
+  },
+});