Need help with react-native-onboarding-swiper?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jfilter
674 Stars 146 Forks Other 171 Commits 34 Opened issues

Description

🛳 Delightful onboarding for your React-Native app

Services available

!
?

Need anything else?

Contributors list

# 55,300
Sass
HTML
React N...
Sublime...
116 commits
# 26,459
Ruby
javascr...
Ember
cyclejs
10 commits
# 74,127
React N...
TypeScr...
image-v...
PHP
5 commits
# 165,278
Shell
CSS
HTML
React N...
4 commits
# 122,159
HTML
Shell
TypeScr...
bracket...
2 commits
# 440,900
JavaScr...
React N...
introdu...
react-n...
1 commit
# 98,230
algolia...
Algolia
GraphQL
express...
1 commit
# 6,414
React N...
Python
webrtc
webrtc-...
1 commit
# 241,702
HTML
Shell
solidit...
React N...
1 commit
# 71,812
HTML
Objecti...
React N...
google-...
1 commit
# 11,766
React N...
framer-...
framerj...
serverl...
1 commit
# 364,071
TypeScr...
GraphQL
nexus
React N...
1 commit
# 448,884
Python
JavaScr...
React N...
introdu...
1 commit
# 29,836
TypeScr...
CSS
sw-prec...
service...
1 commit
# 452,554
JavaScr...
React N...
introdu...
react-n...
1 commit
# 303,746
Shell
HTML
React N...
introdu...
1 commit
# 26,223
TypeScr...
gyrosco...
Webpack
Ember
1 commit

 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.

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

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.