Repository files navigation

There are many ways to onboard people to your mobile app. But for React-Native, there is solelyone component that is a)easy to setup and b)highly customizable:react-native-onboarding-swiper.

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. Try out the examplerunning in your browser. Or check out thistutorial on YouTube.

npm i react-native-onboarding-swiper

yarn add react-native-onboarding-swiper

importOnboardingfrom'react-native-onboarding-swiper';<Onboardingpages={[{backgroundColor:'#fff',image:<Imagesource={require('./images/circle.png')}/>,title:'Onboarding',subtitle:'Done with React Native Onboarding Swiper',},    ...]}/>

Check out the three examples files: thesimple example, theexample with a Call-to-Action button or theexample with custom button components.

• 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 stringOR a React-Native component.
  • subtitle (required): a stringOR a React-Native component.

• nextLabel (optional): a stringOR a React-Native component for the Next label. Defaults toNext.
• showNext (optional): a bool flag indicating whether the Next button is visible. Defaults totrue.
• skipLabel (optional): a stringOR a React-Native component for the Skip label. Defaults toSkip.
• showSkip (optional): a bool flag indicating whether the Skip button is visible. Defaults totrue.
• onSkip (optional): a callback that is fired if the Onboarding is skipped.
• skipToPage (optional): when pressing skip, go to that page (e.g.skipToPage={2}). If this prop is provided, ignoresonSkip.
• onDone (optional): a callback that is fired after the Onboarding is completed.
• showDone (optional): a bool flag indicating whether the Done checkmark button is visible. Defaults totrue.

• bottomBarHeight (optional): a number for the height of the bottom bar. Defaults to60.
• bottomBarColor (optional): backgroundColor of the bottom bar. Defaults totransparent.
• bottomBarHighlight (optional): a bool flag indicating whether the bottom bar should be highlighted. Defaults totrue.
• controlStatusBar (optional): a bool flag indicating whether the status bar should change with the background color. Defaults totrue.
• showPagination (optional): whether to show the bottom pagination bar. Defaults totrue.
• flatlistProps (optional): additional props for theFlatList which holds all the pages.
• transitionAnimationDuration (optional): The duration in milliseconds for the animation of the background color for the page transition. Defaults to500.
• allowFontScalingText (optional): Font scaling can cause troubles with high-resolution screens. You may want to disable it. Defaults totrue.
• allowFontScalingButtons (optional): Font scaling can cause troubles with high-resolution screens. You may want to disable it. Defaults totrue.
• pageIndexCallback (optional): a function that receives the pageindex as a parameter on page change.Example Usage

For the pages in thepages array, you can set the default styles (and override the styles set by this component).

• containerStyles (optional): override the default container styles.
• imageContainerStyles (optional): override the default image container styles e.g. thepaddingBottom of 60.
• titleStyles (optional): override the default title styles.
• subTitleStyles (optional): override the default subtitle styles.

For each page in thepages array, you can override the default page styles.An example.

• titleStyles (optional): modify styles of a specific page's title.
• subTitleStyles (optional): modify styles of a specific page's subtitle.

You can also provide your own custom components for the buttons and the dots. All of them have access to aisLight prop but it's up to you what you do with it. Also checkoutthis example.

• SkipButtonComponent (optional): Skip Button, getsskipLabel as prop.
• NextButtonComponent (optional): Next Button, getsnextLabel as prop.
• DoneButtonComponent (optional): Done Button.
• DotComponent (optional): Dot for the pagination, getsselected as prop to indicate the active page.

You can control the Onboarding component imperatively withuseRef.

constonboardingRef=useRef<Onboarding>(null);<Onboardingref={onboardingRef}pages={pages}/>onboardingRef.current.goNext()onboardingRef.current.goToPage(2,true)onboardingRef.current.goToPage(2,false)

Methods:

• goNext() : Go to the next page.
• goToPage(pageIndex, animated) : Go to the selected page.

If you have aquestion, found abug or want to propose a newfeature, have a look at theissues page.

Pull requests are especially welcomed when they fix bugs or improve the code quality.

• https://github.com/jacse/react-native-app-intro-slider
• https://github.com/gorhom/react-native-paper-onboarding

Built upon the work byGosha Arinich which was originally inspired byAndroidOnboarder.

MIT.