There 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:
Your 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.
Getting everything running merely takes a minute. Don't believe me? Try it out!
npm i react-native-onboarding-swiper
<Onboardingpages=backgroundColor: '#fff'image: <Image source= />title: 'Onboarding'subtitle: 'Done with React Native Onboarding Swiper'.../>
Try out the the example running in your browser.
pages(required): an array of pages in the following shape:
backgroundColor(required): a background color. The color of the font and dots adapts to the background color.
image(required): a component (e.g.
<Image />) to display at the top of the page.
title(required): a string OR a React-Native component.
subtitle(required): a string OR a React-Native component.
onSkip(optional): a callback that is fired if the Onboarding is skipped.
onDone(optional): a callback that is fired after the Onboarding is completed.
showSkip(optional): a bool flag indicating whether the Skip button is visible. Defaults to
showNext(optional): a bool flag indicating whether the Next button is visible. Defaults to
showDone(optional): a bool flag indicating whether the Done checkmark button is visible. Defaults to
skipLabel(optional): a string for the Skip label. Defaults to
nextLabel(optional): a string for the Skip label. Defaults to
bottomBarHeight(optional): a number for the height of the bottom bar. Defaults to
bottomBarHighlight(optional): a bool flag indicating whether the bottm bar should be highlighted. Defaults to
Custom Compononts Properties
You 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.
SkipButtonComponent(optional): Skip Button, gets
NextButtonComponent(optional): Next Button, gets
DoneButtonComponent(optional): Done Button.
DotComponent(optional): Dot for the pagination, gets
selectedas prop to indicate the active page.
If you have a question, found a bug or want to propose a new feature, have a look at the issues page.
Pull requests are especially welcomed when they fix bugs or improve the code quality.