{"id":21292901,"url":"https://github.com/hendrixgotcodes/react-native-versatile-onboarding","last_synced_at":"2025-07-29T11:08:52.708Z","repository":{"id":238504974,"uuid":"796441029","full_name":"hendrixgotcodes/react-native-versatile-onboarding","owner":"hendrixgotcodes","description":"React-native-versatile-onboarding is a highly customizable and easy-to-integrate React Native library designed to enhance the onboarding experience for mobile applications.","archived":false,"fork":false,"pushed_at":"2024-05-16T12:25:39.000Z","size":5592,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-04T19:53:11.266Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-versatile-onboarding","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hendrixgotcodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-05T23:42:34.000Z","updated_at":"2024-05-24T21:38:14.000Z","dependencies_parsed_at":"2024-11-21T17:16:52.604Z","dependency_job_id":"70830510-4d45-45d7-9b2f-e07adce673a8","html_url":"https://github.com/hendrixgotcodes/react-native-versatile-onboarding","commit_stats":null,"previous_names":["hendrixgotcodes/react-native-versatile-onboarding"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/hendrixgotcodes/react-native-versatile-onboarding","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hendrixgotcodes%2Freact-native-versatile-onboarding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hendrixgotcodes%2Freact-native-versatile-onboarding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hendrixgotcodes%2Freact-native-versatile-onboarding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hendrixgotcodes%2Freact-native-versatile-onboarding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hendrixgotcodes","download_url":"https://codeload.github.com/hendrixgotcodes/react-native-versatile-onboarding/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hendrixgotcodes%2Freact-native-versatile-onboarding/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267677239,"owners_count":24126312,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T13:52:36.916Z","updated_at":"2025-07-29T11:08:52.651Z","avatar_url":"https://github.com/hendrixgotcodes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"logo.png\" alt=\"NativeWind Logo\" width=\"150\"/\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eReact Native Versatile Onboarding\u003c/h1\u003e\n\nReact-native-versatile-onboarding is a highly customizable and easy-to-integrate React Native library designed to enhance the onboarding experience for mobile applications. This library offers a rich set of animations, flexible layouts, and an intuitive API that caters to both developers and designers looking to create compelling, informative, and interactive onboarding flows.\n\n## Installation\n\n```sh\nnpm install react-native-versatile-onboarding\n```\n\n## Usage\n\n```js\nimport * as React from 'react';\nimport VersatileOnboarding from 'react-native-versatile-onboarding';\nimport OnboardingItem from './OnboardingItem';\nimport data from './data';\n\nexport default function App() {\n  return (\n    \u003cVersatileOnboarding\u003e\n      {data.map((item) =\u003e (\n        \u003cOnboardingItem\n          Illustration={item.illustration}\n          description={item.description}\n          title={item.title}\n          key={item.id}\n        /\u003e\n      ))}\n    \u003c/VersatileOnboarding\u003e\n  );\n}\n```\n\n## Configuration\n\u003cdiv style=\"overflow: auto;\"\u003e\n    \u003ctable border=\"1\"\u003e\n        \u003cthead\u003e\n            \u003ctr\u003e\n                \u003cth\u003eProperty\u003c/th\u003e\n                \u003cth\u003eType\u003c/th\u003e\n                \u003cth\u003eDefault\u003c/th\u003e\n                \u003cth\u003eDescription\u003c/th\u003e\n            \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eactivePaginationColor (optional)\u003c/td\u003e\n                \u003ctd\u003e\n                  string\n                \u003c/td\u003e\n                \u003ctd\u003ergba(0, 0, 0, 0.159)\u003c/td\u003e\n                \u003ctd\u003e\n                   Set this to change the color of active pagination element. This should be a color code if set (Can be HEX, rgb, rgba or hsl value.\n                \u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eChildren\u003c/td\u003e\n                \u003ctd\u003e\n                    ReactElement\u0026lt;typeof View\u0026gt; | Array\u0026lt;ReactElement\u0026lt;typeof View\u0026gt;\u0026gt;\n                \u003c/td\u003e\n                \u003ctd\u003eNo default; you must specify at least one \u0026lt;View /\u0026gt; component.\u003c/td\u003e\n                \u003ctd\u003e\n                    This property should be a list of \u0026lt;View /\u0026gt; components. It may be updated in the future to support additional component types.\n                \u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eFooter (optional)\u003c/td\u003e\n                \u003ctd\u003eReactNode\u003c/td\u003e\n                \u003ctd\u003eBuilt-in footer component\u003c/td\u003e\n                \u003ctd\u003eProvides an optional footer component that can be customized or replaced.\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003efooterBtnStyle (optional)\u003c/td\u003e\n                \u003ctd\u003eStyleProp\u0026lt;ViewStyle\u0026gt;\u003c/td\u003e\n                \u003ctd\u003eBuilt-in footer styles\u003c/td\u003e\n                \u003ctd\u003eAllows customization of the default styles applied to the provided footer component.\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003einAtivePaginationColor (optional)\u003c/td\u003e\n                \u003ctd\u003e\n                  string\n                \u003c/td\u003e\n                \u003ctd\u003ergba(0, 0, 0, 1)\u003c/td\u003e\n                \u003ctd\u003e\n                   Set this to change the color of inActive pagination element. This should be a color code if set (Can be HEX, rgb, rgba or hsl value.\n                \u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eonNavigate (optional)\u003c/td\u003e\n                \u003ctd\u003e(currentPageIndex: number) =\u0026gt; any\u003c/td\u003e\n                \u003ctd\u003eundefined\u003c/td\u003e\n                \u003ctd\u003eCallback that is invoked when the onboarding component navigates to a new page.\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eonNavigateToEnd (optional)\u003c/td\u003e\n                \u003ctd\u003e( ) =\u0026gt; any\u003c/td\u003e\n                \u003ctd\u003eundefined\u003c/td\u003e\n                \u003ctd\u003eCallback that is invoked when the onboarding component finishes all navigation.\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003epaginationContainerStyle (optional)\u003c/td\u003e\n                \u003ctd\u003eStyleProp\u0026lt;ViewStyle\u0026gt;\u003c/td\u003e\n                \u003ctd\u003enull\u003c/td\u003e\n                \u003ctd\u003e\n                  Allows customization of the default styles applied to the container of pagination elements.\n                \u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003ePaginatorType (optional)\u003c/td\u003e\n                \u003ctd\u003e\"dot\" | \"dash\"\u003c/td\u003e\n                \u003ctd\u003e\"dot\"\u003c/td\u003e\n                \u003ctd\u003eSpecifies the appearance of the pagination element, either as dots or dashes.\u003c/td\u003e\n            \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n\u003c/div\u003e\n\n\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with ❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhendrixgotcodes%2Freact-native-versatile-onboarding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhendrixgotcodes%2Freact-native-versatile-onboarding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhendrixgotcodes%2Freact-native-versatile-onboarding/lists"}