{"_id":"@ahmat-2000/react-native-onboarding","_rev":"3-bdb749c0d4d92b82ba347f7fd9e87991","name":"@ahmat-2000/react-native-onboarding","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@ahmat-2000/react-native-onboarding","version":"0.1.0","keywords":["react-native","expo","onboarding","carousel","compound-components","reanimated","pager","safe-area"],"author":{"name":"Ahmat Mahamat"},"license":"MIT","_id":"@ahmat-2000/react-native-onboarding@0.1.0","maintainers":[{"name":"ahmat-2000","email":"ahmat.finance@gmail.com"}],"homepage":"https://github.com/ahmat-2000/react-native-onboarding#readme","bugs":{"url":"https://github.com/ahmat-2000/react-native-onboarding/issues"},"dist":{"shasum":"ae67c19eb24b203ee72e8b2f221a8de7568829eb","tarball":"https://registry.npmjs.org/@ahmat-2000/react-native-onboarding/-/react-native-onboarding-0.1.0.tgz","fileCount":106,"integrity":"sha512-kBA3nmRS0eediWRwBQrQKuh5M1GsqGcUoyK4xdUmcwXkLOO2TV+WS2W4R3yM7kbdx6RiNggLybLAq8S+pgvRfQ==","signatures":[{"sig":"MEUCIQDWJGbVJ+ZH3fZfWfkfspVrAhh/ZnoI+Crh9d0iD1G3qgIgQF9GQ2f2EKFjr5txB8a8WyUm/Jmcr9DBZghTWIHFA60=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":140737},"main":"lib/commonjs/index.js","type":"commonjs","types":"lib/typescript/commonjs/index.d.ts","module":"lib/module/index.js","source":"src/index.ts","engines":{"node":">=20"},"exports":{".":{"import":{"types":"./lib/typescript/module/index.d.ts","default":"./lib/module/index.js"},"source":"./src/index.ts","require":{"types":"./lib/typescript/commonjs/index.d.ts","default":"./lib/commonjs/index.js"},"react-native":"./src/index.ts"},"./package.json":"./package.json"},"gitHead":"d8a55bea093669c716aec3ab876a1b19c4f76518","scripts":{"test":"echo \"Error: no test specified\" && exit 1","clean":"rm -rf lib","prepare":"bob build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"ahmat-2000","email":"ahmat.finance@gmail.com"},"repository":{"url":"git+https://github.com/ahmat-2000/react-native-onboarding.git","type":"git"},"_npmVersion":"11.11.0","description":"Composable onboarding slides for React Native — horizontal pager, dots, and footer without opinionated UI.","directories":{},"_nodeVersion":"22.22.0","react-native":"src/index.ts","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"19.2.0","typescript":"~5.9.2","@types/react":"~19.2.2","react-native":"0.83.6","react-native-worklets":"0.7.4","react-native-reanimated":"4.2.1","react-native-builder-bob":"^0.40.0","react-native-safe-area-context":"~5.6.2"},"peerDependencies":{"react":">=19.2.0","react-native":">=0.83.6","react-native-worklets":">=0.7.4","react-native-reanimated":">=4.2.1","react-native-safe-area-context":">=5.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-native-onboarding_0.1.0_1778332659888_0.9698852830161837","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":[["commonjs",{"esm":true}],["module",{"esm":true}],"typescript"]}},"0.1.1":{"name":"@ahmat-2000/react-native-onboarding","version":"0.1.1","keywords":["react-native","expo","onboarding","carousel","compound-components","reanimated","pager","safe-area"],"author":{"name":"Ahmat Mahamat"},"license":"MIT","_id":"@ahmat-2000/react-native-onboarding@0.1.1","maintainers":[{"name":"ahmat-2000","email":"ahmat.finance@gmail.com"}],"homepage":"https://github.com/ahmat-2000/react-native-onboarding#readme","bugs":{"url":"https://github.com/ahmat-2000/react-native-onboarding/issues"},"dist":{"shasum":"85e18ba992dbf11d54662d752e5d20c25026a9a4","tarball":"https://registry.npmjs.org/@ahmat-2000/react-native-onboarding/-/react-native-onboarding-0.1.1.tgz","fileCount":106,"integrity":"sha512-OSew5uaQxpdTVy5RVHDJncJg2njSR+U5EvbbD447dGAZ5spEg7u0DNr70kkPb+syOPslWL3uPriJ5jIsqXmGeg==","signatures":[{"sig":"MEYCIQCR9cqNLGgKSfryJjLLFKfI306hYgmap2wc8u+iNTNArQIhAP/dPpYV1RcZPaMeKn4H3VOwNBz8O76JkzCVwPvY/V7c","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":139615},"main":"lib/commonjs/index.js","type":"commonjs","types":"lib/typescript/commonjs/index.d.ts","module":"lib/module/index.js","source":"src/index.ts","engines":{"node":">=20"},"exports":{".":{"import":{"types":"./lib/typescript/module/index.d.ts","default":"./lib/module/index.js"},"source":"./src/index.ts","require":{"types":"./lib/typescript/commonjs/index.d.ts","default":"./lib/commonjs/index.js"},"react-native":"./src/index.ts"},"./package.json":"./package.json"},"gitHead":"09609c06711fd66ce859387b2d669f97038c284b","scripts":{"test":"echo \"Error: no test specified\" && exit 1","clean":"rm -rf lib","prepare":"bob build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"ahmat-2000","email":"ahmat.finance@gmail.com"},"repository":{"url":"git+https://github.com/ahmat-2000/react-native-onboarding.git","type":"git"},"_npmVersion":"11.11.0","description":"Composable onboarding slides for React Native — horizontal pager, dots, and footer without opinionated UI.","directories":{},"_nodeVersion":"22.22.0","react-native":"src/index.ts","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"19.2.0","typescript":"~5.9.2","@types/react":"~19.2.2","react-native":"0.83.6","react-native-worklets":"0.7.4","react-native-reanimated":"4.2.1","react-native-builder-bob":"^0.40.0","react-native-safe-area-context":"~5.6.2"},"peerDependencies":{"react":">=19.2.0","react-native":">=0.83.6","react-native-worklets":">=0.7.4","react-native-reanimated":">=4.2.1","react-native-safe-area-context":">=5.6.2"},"_npmOperationalInternal":{"tmp":"tmp/react-native-onboarding_0.1.1_1778427683617_0.622541931861228","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":[["commonjs",{"esm":true}],["module",{"esm":true}],"typescript"]}},"0.1.2":{"name":"@ahmat-2000/react-native-onboarding","version":"0.1.2","description":"Composable onboarding slides for React Native — horizontal pager, dots, and footer without opinionated UI.","keywords":["react-native","expo","onboarding","carousel","compound-components","reanimated","pager","safe-area"],"homepage":"https://github.com/ahmat-2000/react-native-onboarding#readme","bugs":{"url":"https://github.com/ahmat-2000/react-native-onboarding/issues"},"repository":{"type":"git","url":"git+https://github.com/ahmat-2000/react-native-onboarding.git"},"license":"MIT","author":{"name":"Ahmat Mahamat"},"type":"commonjs","main":"lib/commonjs/index.js","module":"lib/module/index.js","types":"lib/typescript/commonjs/index.d.ts","react-native":"src/index.ts","source":"src/index.ts","scripts":{"prepare":"bob build","typecheck":"tsc --noEmit","clean":"rm -rf lib","test":"echo \"Error: no test specified\" && exit 1"},"exports":{".":{"import":{"types":"./lib/typescript/module/index.d.ts","default":"./lib/module/index.js"},"require":{"types":"./lib/typescript/commonjs/index.d.ts","default":"./lib/commonjs/index.js"},"react-native":"./src/index.ts","source":"./src/index.ts"},"./package.json":"./package.json"},"peerDependencies":{"react":">=19.2.0","react-native":">=0.83.6","react-native-reanimated":">=4.2.1","react-native-safe-area-context":">=5.6.2","react-native-worklets":">=0.7.4"},"devDependencies":{"@types/react":"~19.2.2","react":"19.2.0","react-native":"0.83.6","react-native-builder-bob":"^0.40.0","react-native-reanimated":"4.2.1","react-native-safe-area-context":"~5.6.2","react-native-worklets":"0.7.4","typescript":"~5.9.2"},"react-native-builder-bob":{"source":"src","output":"lib","targets":[["commonjs",{"esm":true}],["module",{"esm":true}],"typescript"]},"publishConfig":{"access":"public"},"engines":{"node":">=20"},"gitHead":"091cde8e417669d7364793cbb4ad40e2c98813aa","_id":"@ahmat-2000/react-native-onboarding@0.1.2","_nodeVersion":"22.22.0","_npmVersion":"11.11.0","dist":{"integrity":"sha512-ayuRvrlbdB93R8vkgeTiLvyfF9g0anIiNL2YJLRfRsw4IieFMFZAkmG3wEwFViwlGW9MB4goQBpqT8nQKiUi2g==","shasum":"5c634677a7553ef831ba278e23fda4d883d244ac","tarball":"https://registry.npmjs.org/@ahmat-2000/react-native-onboarding/-/react-native-onboarding-0.1.2.tgz","fileCount":106,"unpackedSize":122665,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICI9e6zeXa5V93PIL0fcS8xqg/J+t376L92JVWjAYCBHAiEA2vYUTzKlX5b+8ePn7eATCuk1/ePMzfoOz7/JRNOy1kA="}]},"_npmUser":{"name":"ahmat-2000","email":"ahmat.finance@gmail.com"},"directories":{},"maintainers":[{"name":"ahmat-2000","email":"ahmat.finance@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-onboarding_0.1.2_1778437463393_0.19532710506989814"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-09T13:17:39.795Z","modified":"2026-05-10T18:24:23.671Z","0.1.0":"2026-05-09T13:17:40.047Z","0.1.1":"2026-05-10T15:41:23.784Z","0.1.2":"2026-05-10T18:24:23.566Z"},"bugs":{"url":"https://github.com/ahmat-2000/react-native-onboarding/issues"},"author":{"name":"Ahmat Mahamat"},"license":"MIT","homepage":"https://github.com/ahmat-2000/react-native-onboarding#readme","keywords":["react-native","expo","onboarding","carousel","compound-components","reanimated","pager","safe-area"],"repository":{"type":"git","url":"git+https://github.com/ahmat-2000/react-native-onboarding.git"},"description":"Composable onboarding slides for React Native — horizontal pager, dots, and footer without opinionated UI.","maintainers":[{"name":"ahmat-2000","email":"ahmat.finance@gmail.com"}],"readme":"# @ahmat-2000/react-native-onboarding\n\n[![npm version](https://img.shields.io/npm/v/@ahmat-2000/react-native-onboarding.svg)](https://www.npmjs.com/package/@ahmat-2000/react-native-onboarding)\n[![npm downloads](https://img.shields.io/npm/dm/@ahmat-2000/react-native-onboarding.svg)](https://www.npmjs.com/package/@ahmat-2000/react-native-onboarding)\n[![License: MIT](https://img.shields.io/badge/license-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA lightweight and flexible onboarding flow for React Native powered by **Reanimated**.\n\nBuilt around a **headless core**:\n\n* horizontal paging\n* animated background interpolation\n* onboarding state & hooks\n* safe area support\n* fully custom UI support\n\nOptional helper components are included for rapid setup.\n\n---\n\n# Features\n\n* Horizontal onboarding pager\n* Reanimated-powered scroll tracking\n* Background color interpolation between slides\n* Headless architecture\n* Compound API\n* Safe area support\n* Shared onboarding context\n* Per-slide progress hooks\n* Optional helper UI components\n* TypeScript support\n* Expo compatible\n* React Native New Architecture compatible\n\n---\n\n# Installation\n    npm install @ahmat-2000/react-native-onboarding\n\n\nInstall peer dependencies:\n\n```bash\nnpm install react-native-reanimated react-native-safe-area-context react-native-worklets\n```\n\n---\n\n# Peer dependencies\n\n| Package                        | Version |\n| ------------------------------ | ------- |\n| react                          | >= 19   |\n| react-native                   | >= 0.83 |\n| react-native-reanimated        | >= 4    |\n| react-native-safe-area-context | >= 5    |\n| react-native-worklets          | >= 0.7  |\n\n---\n\n# Reanimated setup\n\nAdd the Reanimated plugin inside your Babel config.\n\n```js\nmodule.exports = {\n  presets: [\"babel-preset-expo\"],\n  plugins: [\"react-native-reanimated/plugin\"],\n};\n```\n\nWrap your app with:\n\n```tsx\nimport { SafeAreaProvider } from \"react-native-safe-area-context\";\n\nexport default function App() {\n  return (\n    <SafeAreaProvider>\n      <Root />\n    </SafeAreaProvider>\n  );\n}\n```\n\n---\n\n# Quick Start\n\n```tsx\nimport { Text, View } from \"react-native\";\nimport { Onboarding } from \"@ahmat-2000/react-native-onboarding\";\n\nexport default function App() {\n  return (\n    <Onboarding onDone={() => console.log(\"done\")}>\n      <Onboarding.Slide backgroundColor=\"#dbeafe\">\n        <View style={{ flex: 1, justifyContent: \"center\" }}>\n          <Text>Welcome</Text>\n        </View>\n      </Onboarding.Slide>\n\n      <Onboarding.Slide backgroundColor=\"#fce7f3\">\n        <View style={{ flex: 1, justifyContent: \"center\" }}>\n          <Text>Features</Text>\n        </View>\n      </Onboarding.Slide>\n\n      <Onboarding.Bottom>\n        <Onboarding.SkipButton />\n        <Onboarding.Dots />\n        <Onboarding.NextButton />\n      </Onboarding.Bottom>\n    </Onboarding>\n  );\n}\n```\n\n---\n\n# Philosophy\n\nThis library separates:\n\n* onboarding behavior\n* onboarding UI\n\nThe core handles:\n\n* paging\n* navigation\n* scroll state\n* progress interpolation\n* slide state\n\nHelpers are optional.\n\nYou can build a completely custom onboarding experience using hooks and React Native primitives.\n\n---\n\n# Core Architecture\n\n```txt\ncore/\n├── OnboardingRoot.tsx\n├── Slide.tsx\n├── context.ts\n├── hooks.ts\n└── types.ts\n```\n\n## Core responsibilities\n\n### OnboardingRoot\n\n* horizontal pager\n* onboarding state\n* animated scroll handling\n* context provider\n* background interpolation\n* navigation methods\n\n### Slide\n\n* slide container\n* per-slide context\n* slide progress integration\n\n### Hooks\n\n* useOnboarding()\n* useSlide()\n* useSlideProgress()\n\n---\n\n# Helpers\n\n```txt\nhelper/\n├── Bottom.tsx\n├── Dots.tsx\n├── NextButton.tsx\n└── SkipButton.tsx\n```\n\nHelpers are intentionally lightweight and replaceable.\n\nThey exist for convenience, not to impose a design system.\n\n---\n\n# Compound API\n\n```tsx\n<Onboarding>\n  <Onboarding.Slide />\n\n  <Onboarding.Bottom>\n    <Onboarding.SkipButton />\n    <Onboarding.Dots />\n    <Onboarding.NextButton />\n  </Onboarding.Bottom>\n</Onboarding>\n```\n\n---\n\n# Fully Custom UI\n\nYou are not required to use helpers.\n\n```tsx\nimport {\n  OnboardingRoot,\n  Slide,\n  useOnboarding,\n} from \"@ahmat-2000/react-native-onboarding\";\n\nfunction Footer() {\n  const { index, count, goNext, isLast, onDone } =\n    useOnboarding();\n\n  return (\n    <View>\n      <Text>\n        {index + 1} / {count}\n      </Text>\n\n      <Button\n        title={isLast ? \"Done\" : \"Next\"}\n        onPress={() => {\n          if (isLast) {\n            onDone();\n          } else {\n            goNext();\n          }\n        }}\n      />\n    </View>\n  );\n}\n\nexport default function App() {\n  return (\n    <OnboardingRoot onDone={() => {}}>\n      <Slide backgroundColor=\"#dbeafe\">\n        <View />\n      </Slide>\n\n      <Slide backgroundColor=\"#fce7f3\">\n        <View />\n      </Slide>\n\n      <Footer />\n    </OnboardingRoot>\n  );\n}\n```\n\n---\n\n# Hooks\n\n## useOnboarding()\n\nAccess onboarding state and navigation.\n\n```tsx\nconst {\n  index,\n  count,\n  isFirst,\n  isLast,\n  goNext,\n  goPrev,\n  goTo,\n} = useOnboarding();\n```\n\n---\n\n## useSlide()\n\nAccess current slide metadata.\n\n```tsx\nconst { index } = useSlide();\n```\n\n---\n\n## useSlideProgress()\n\nReturns a Reanimated derived value normalized between:\n\n```txt\n-1 → previous\n 0 → centered\n+1 → next\n```\n\nPerfect for:\n\n* parallax\n* opacity\n* scale\n* translate animations\n\n---\n\n# API\n\n## Onboarding / OnboardingRoot\n\n| Prop                  | Type            | Description                      |\n| --------------------- | --------------- | -------------------------------- |\n| onDone                | () => void      | Called when onboarding completes |\n| onSkip                | () => void      | Optional skip callback           |\n| style                 | ViewStyle       | Root style                       |\n| contentContainerStyle | ViewStyle       | Root container style             |\n| scrollViewProps       | ScrollViewProps | Additional scroll props          |\n| testID                | string          | Test identifier                  |\n\n---\n\n## Slide\n\n| Prop            | Type      |\n| --------------- | --------- |\n| backgroundColor | string    |\n| animated        | boolean   |\n| style           | ViewStyle |\n\n---\n\n# TypeScript\n\nTypeScript definitions are bundled with the package.\n\nNo additional typings required.\n\n---\n\n# Expo compatibility\n\nCompatible with:\n\n* Expo\n* Expo Router\n* Expo Dev Client\n* React Native CLI\n\n---\n\n# Design goals\n\n* Headless first\n* UI optional\n* Minimal API surface\n* Strong TypeScript support\n* Predictable behavior\n* Easy customization\n* Production-ready defaults\n\n---\n\n# Contributing\n\nIssues and PRs are welcome.\n\nGitHub:\n\n* [https://github.com/ahmat-2000/react-native-onboarding](https://github.com/ahmat-2000/react-native-onboarding)\n\n---\n\n# License\n\nMIT © Ahmat Mahamat\n","readmeFilename":"README.md"}