| | | | | --------------------- | --------------------- | ------------------ |

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.

Install

npm i react-native-onboarding-swiper

import Onboarding from 'react-native-onboarding-swiper';

Usage

,
      title: 'Onboarding',
      subtitle: 'Done with React Native Onboarding Swiper',
    },
    ...
  ]}
/>

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

• 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

• 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

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

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

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

Acknowledgements

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

License

MIT.