Name: react-native-onboarding-swiper
Brand: react-native-onboarding-swiper
SKU: //jfilter/react-native-onboarding-swiper
Rating: 1.192 (480 reviews)

jfilter /react-native-onboarding-swiper

jfilter

🛳 Delightful onboarding for your React-Native app

480 Stars 112 Forks Last release: Not found Other 169 Commits 23 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Readme

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

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
```
.
```
allowFontScaling
```
(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.

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.

react-native-onboarding-swiper

by jfilter