{"id":13526867,"url":"https://github.com/jfilter/react-native-onboarding-swiper","last_synced_at":"2025-05-13T23:06:15.869Z","repository":{"id":37601614,"uuid":"106739546","full_name":"jfilter/react-native-onboarding-swiper","owner":"jfilter","description":"🛳 Delightful onboarding for your React-Native app","archived":false,"fork":false,"pushed_at":"2024-11-18T15:08:25.000Z","size":3764,"stargazers_count":1036,"open_issues_count":36,"forks_count":181,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-05-12T17:14:23.399Z","etag":null,"topics":["instructions","intro","introduction","onboarding","react-native","react-native-component","slider","tutorial","welcome"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-onboarding-swiper","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jfilter.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2017-10-12T20:02:23.000Z","updated_at":"2025-05-05T13:07:55.000Z","dependencies_parsed_at":"2024-01-13T22:25:33.187Z","dependency_job_id":"b77a5037-208f-4ef5-80e5-f50c6e9729e6","html_url":"https://github.com/jfilter/react-native-onboarding-swiper","commit_stats":{"total_commits":175,"total_committers":24,"mean_commits":7.291666666666667,"dds":0.3028571428571428,"last_synced_commit":"d90f44d6d64d07bf10c92fce4abdd1b72f62bcac"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfilter%2Freact-native-onboarding-swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfilter%2Freact-native-onboarding-swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfilter%2Freact-native-onboarding-swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfilter%2Freact-native-onboarding-swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jfilter","download_url":"https://codeload.github.com/jfilter/react-native-onboarding-swiper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253786414,"owners_count":21964155,"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","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":["instructions","intro","introduction","onboarding","react-native","react-native-component","slider","tutorial","welcome"],"created_at":"2024-08-01T06:01:36.400Z","updated_at":"2025-05-13T23:06:10.835Z","avatar_url":"https://github.com/jfilter.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# `\u003cOnboarding /\u003e` [![npm](https://img.shields.io/npm/v/react-native-onboarding-swiper.svg)](https://www.npmjs.com/package/react-native-onboarding-swiper) [![npm](https://img.shields.io/npm/dm/react-native-onboarding-swiper.svg)](https://www.npmjs.com/package/react-native-onboarding-swiper)\n\n| ![](demo/simple1.png) | ![](demo/simple2.png) | ![](demo/demo.gif) |\n| --------------------- | --------------------- | ------------------ |\n\n\nThere are many ways to onboard people to your mobile app. But for React-Native, there is solely _one_ component that is a) **easy to setup** and b) **highly customizable**:\n`react-native-onboarding-swiper`.\n\nYour new users shouldn't jump in at the deep end. First give them a pleasurable, delightful introduction and only then let them explore your awesome app.\n\nGetting everything running merely takes a minute. Try out the example [running in your browser](https://snack.expo.io/dlQTGD06P). Or check out this [tutorial on YouTube](https://www.youtube.com/watch?v=SMkR-iIGvwQ).\n\n## Install\n\n```bash\nnpm i react-native-onboarding-swiper\n```\n\n```bash\nyarn add react-native-onboarding-swiper\n```\n\n## Usage\n\n```js\nimport Onboarding from 'react-native-onboarding-swiper';\n\n\u003cOnboarding\n  pages={[\n    {\n      backgroundColor: '#fff',\n      image: \u003cImage source={require('./images/circle.png')} /\u003e,\n      title: 'Onboarding',\n      subtitle: 'Done with React Native Onboarding Swiper',\n    },\n    ...\n  ]}\n/\u003e\n```\n\n## Examples\n\nCheck out the three examples files: the [simple example](examples/Simple.js), the [example with a Call-to-Action button](examples/WithCTA.js) or the [example with custom button components](examples/CustomButtons.js).\n\n## Required Properties\n\n* `pages` (required): an array of pages in the following shape:\n  * `backgroundColor` (required): a background color. The color of the font and dots adapts to the background color.\n  * `image` (required): a component (e.g. `\u003cImage /\u003e`) to display at the top of the page.\n  * `title` (required): a string **OR** a React-Native component.\n  * `subtitle` (required): a string **OR** a React-Native component.\n\n## Optional Properties\n\n### Buttons\n\n* `nextLabel` (optional): a string **OR** a React-Native component for the Next label. Defaults to `Next`.\n* `showNext` (optional): a bool flag indicating whether the Next button is visible. Defaults to `true`.\n* `skipLabel` (optional): a string **OR** a React-Native component for the Skip label. Defaults to `Skip`.\n* `showSkip` (optional): a bool flag indicating whether the Skip button is visible. Defaults to `true`.\n* `onSkip` (optional): a callback that is fired if the Onboarding is skipped.\n* `skipToPage` (optional): when pressing skip, go to that page (e.g. `skipToPage={2}`). If this prop is provided, ignores `onSkip`.\n* `onDone` (optional): a callback that is fired after the Onboarding is completed.\n* `showDone` (optional): a bool flag indicating whether the Done checkmark button is visible. Defaults to `true`.\n\n### General\n\n* `bottomBarHeight` (optional): a number for the height of the bottom bar. Defaults to `60`.\n* `bottomBarColor` (optional): backgroundColor of the bottom bar. Defaults to `transparent`.\n* `bottomBarHighlight` (optional): a bool flag indicating whether the bottom bar should be highlighted. Defaults to `true`.\n* `controlStatusBar` (optional): a bool flag indicating whether the status bar should change with the background color. Defaults to `true`.\n* `showPagination` (optional): whether to show the bottom pagination bar. Defaults to `true`.\n* `flatlistProps` (optional): additional props for the [FlatList](https://facebook.github.io/react-native/docs/flatlist.html) which holds all the pages.\n* `transitionAnimationDuration` (optional): The duration in milliseconds for the animation of the background color for the page transition. Defaults to `500`.\n* `allowFontScalingText` (optional): Font scaling can cause troubles with high-resolution screens. You may want to disable it. Defaults to `true`.\n* `allowFontScalingButtons` (optional): Font scaling can cause troubles with high-resolution screens. You may want to disable it. Defaults to `true`.\n* `pageIndexCallback` (optional): a function that receives the page `index` as a parameter on page change. [Example Usage](https://github.com/jfilter/react-native-onboarding-swiper/pull/40)\n\n### Default Page Styles\n\nFor the pages in the `pages` array, you can set the default styles (and override the styles set by this component).\n\n* `containerStyles` (optional): override the default container styles.\n* `imageContainerStyles` (optional): override the default image container styles e.g. the `paddingBottom` of 60.\n* `titleStyles` (optional): override the default title styles.\n* `subTitleStyles` (optional): override the default subtitle styles.\n\n### Adjust Individual Page Styles\n\nFor each page in the `pages` array, you can override the default page styles. [An example](examples/CustomButtons.js).\n\n* `titleStyles` (optional): modify styles of a specific page's title.\n* `subTitleStyles` (optional): modify styles of a specific page's subtitle.\n\n## Custom Components Properties\n\nYou can also provide your own custom components for the buttons and the dots. All of them have access to a `isLight` prop but it's up to you what you do with it. Also checkout [this example](examples/CustomButtons.js).\n\n* `SkipButtonComponent` (optional): Skip Button, gets `skipLabel` as prop.\n* `NextButtonComponent` (optional): Next Button, gets `nextLabel` as prop.\n* `DoneButtonComponent` (optional): Done Button.\n* `DotComponent` (optional): Dot for the pagination, gets `selected` as prop to indicate the active page.\n\n## Controlling the pages imperatively \n\nYou can control the Onboarding component imperatively with [useRef](https://reactjs.org/docs/hooks-reference.html#useref).\n\n```js\nconst onboardingRef = useRef\u003cOnboarding\u003e(null);\n\n\u003cOnboarding\n    ref={onboardingRef}\n    pages={pages}\n/\u003e\n\nonboardingRef.current.goNext()\nonboardingRef.current.goToPage(2, true)\nonboardingRef.current.goToPage(2, false)\n```\n\nMethods:\n\n* `goNext()` : Go to the next page.\n* `goToPage(pageIndex, animated)` : Go to the selected page.\n\n## Contributing\n\nIf you have a **question**, found a **bug** or want to propose a new **feature**, have a look at the [issues page](https://github.com/jfilter/react-native-onboarding-swiper/issues).\n\n**Pull requests** are especially welcomed when they fix bugs or improve the code quality.\n\n## Related Work\n\n* https://github.com/jacse/react-native-app-intro-slider\n* https://github.com/gorhom/react-native-paper-onboarding\n\n## Acknowledgements\n\nBuilt upon the work by [Gosha Arinich](https://github.com/goshakkk/react-native-simple-onboarding) which was originally inspired by [AndroidOnboarder](https://github.com/chyrta/AndroidOnboarder).\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfilter%2Freact-native-onboarding-swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjfilter%2Freact-native-onboarding-swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfilter%2Freact-native-onboarding-swiper/lists"}