Home

Awesome

<Onboarding /> npm npm

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

npm i react-native-onboarding-swiper
yarn add react-native-onboarding-swiper

Usage

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

<Onboarding
  pages={[
    {
      backgroundColor: '#fff',
      image: <Image source={require('./images/circle.png')} />,
      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

Optional Properties

Buttons

General

Default Page Styles

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

Adjust Individual Page Styles

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

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.

Controlling the pages imperatively

You can control the Onboarding component imperatively with useRef.

const onboardingRef = useRef<Onboarding>(null);

<Onboarding
    ref={onboardingRef}
    pages={pages}
/>

onboardingRef.current.goNext()
onboardingRef.current.goToPage(2, true)
onboardingRef.current.goToPage(2, false)

Methods:

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

Acknowledgements

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

License

MIT.