Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including wooterz-onboarding-swiper with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-native/package.json"); // react-native is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var wooterzOnboardingSwiper = require("wooterz-onboarding-swiper")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

wooterz-onboarding-swiper v0.1.7

wooterz app fork of Onboarding 0.0.5 for your React-Native App

<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. Don't believe me? Try it out!

Install

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

Usage

<Onboarding
  pages={[
    {
      backgroundColor: '#fff',
      image: <Image source={require('./images/circle.png')} />,
      title: 'Onboarding',
      subtitle: 'Done with React Native Onboarding Swiper',
    },
    ...
  ]}
/>

Examples

Try out the the example running in your browser.

Also 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

  • 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 true.
  • showNext (optional): a bool flag indicating whether the Next button is visible. Defaults to true.
  • showDone (optional): a bool flag indicating whether the Done checkmark button is visible. Defaults to true.
  • skipLabel (optional): a string OR a React-Native component for the Skip label. Defaults to Skip.
  • nextLabel (optional): a string OR a React-Native component for the Skip label. Defaults to Next.
  • bottomBarHeight (optional): a number for the height of the bottom bar. Defaults to 60.
  • bottomBarHighlight (optional): a bool flag indicating whether the bottm bar should be highlighted. Defaults to true.
  • imageContainerStyles (optional): for a page in the pages array, you can override the default styles e.g. the paddingBottom of 60.

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.

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.

Acknowledgements

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

License

MIT.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free