@taylord.tech/react-native-onboarding
Version:
Onboarding for your React-Native App
81 lines (59 loc) • 4.1 kB
Markdown
# `<Onboarding />`
|  |  |  |
| --------------------- | --------------------- | --------------------- |
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**: `@taylord.tech/react-native-onboarding`.
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
```
yarn add @taylord.tech/react-native-onboarding
```
```js
import Onboarding from '@taylord.tech/react-native-onboarding';
```
## Usage
```js
<Onboarding
pages={[
{
backgroundColor: '#fff',
image: <Image source={require('./images/circle.png')} />,
title: 'Onboarding',
subtitle: 'Done with React Native Onboarding',
},
...
]}
/>
```
## 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.
* `skipToPage` (optional): when pressing skip, go the 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.
* `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`.
* `hasGradient` (optional): a bool flag indicating whether the background color has a gradient. Defaults to `false`.
* `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.
* `controlStatusBar` (optional): a bool flag indicating whether the status bar should change with the background color. Defaults to `true`.
* `flatlistProps` (optional): additional props for the [FlatList](https://facebook.github.io/react-native/docs/flatlist.html) 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`.
## 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](examples/CustomButtons.js).
* `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.
## Acknowledgements
Built upon the work by [Johannes Filter](https://github.com/jfilter/react-native-onboarding-swiper) and [Gosha Arinich](https://github.com/goshakkk/react-native-simple-onboarding) which was originally inspired by [AndroidOnboarder](https://github.com/chyrta/AndroidOnboarder).
## License
MIT.