<Onboarding />

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: 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 example running in your browser. Or check out this tutorial on YouTube.

Install

1npm i react-native-onboarding-swiper

1yarn add react-native-onboarding-swiper

Usage

1import Onboarding from 'react-native-onboarding-swiper';
2
3<Onboarding
4  pages={[
5    {
6      backgroundColor: '#fff',
7      image: <Image source={require('./images/circle.png')} />,
8      title: 'Onboarding',
9      subtitle: 'Done with React Native Onboarding Swiper',
10    },
11    ...
12  ]}
13/>

Examples

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

Required Properties

• 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.

Optional Properties

Buttons

• nextLabel (optional): a string OR a React-Native component for the Next label. Defaults to Next.
• showNext (optional): a bool flag indicating whether the Next button is visible. Defaults to true.
• skipLabel (optional): a string OR a React-Native component for the Skip label. Defaults to Skip.
• showSkip (optional): a bool flag indicating whether the Skip button is visible. Defaults to true.
• 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, ignores onSkip.
• 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 to true.

General

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

Default Page Styles

For the pages in the pages 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. the paddingBottom of 60.
• titleStyles (optional): override the default title styles.
• subTitleStyles (optional): override the default subtitle styles.

Adjust Individual Page Styles

For each page in the pages 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.

Custom Components 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 skipLabel as prop.
• NextButtonComponent (optional): Next Button, gets nextLabel as prop.
• DoneButtonComponent (optional): Done Button.
• DotComponent (optional): Dot for the pagination, gets selected as prop to indicate the active page.

Controlling the pages imperatively

You can control the Onboarding component imperatively with useRef.

1const onboardingRef = useRef<Onboarding>(null);
2
3<Onboarding
4    ref={onboardingRef}
5    pages={pages}
6/>
7
8onboardingRef.current.goNext()
9onboardingRef.current.goToPage(2, true)
10onboardingRef.current.goToPage(2, false)

Methods:

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

Contributing

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.

Related Work

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

Acknowledgements

Built upon the work by Gosha Arinich which was originally inspired by AndroidOnboarder.

License

MIT.