Package Exports
- @gorhom/paper-onboarding
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gorhom/paper-onboarding) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Paper Onboarding 
Paper Onboarding is a material design UI slider for React Native
inspired by Ramotion Paper Onboarding.
Installation
yarn add @gorhom/paper-onboarding
# or
npm install @gorhom/paper-onboarding
Also, you need to install react-native-reanimated, react-native-gesture-handler & react-native-svg
Usage
import PaperOnboarding, {PaperOnboardingItemType} from "@gorhom/paper-onboarding";
const data: PaperOnboardingItemType[] = [
{
title: 'Hotels',
description: 'All hotels and hostels are sorted by hospitality rating',
color: '#698FB8',
image: /* IMAGE COMPONENT */,
icon: /* ICON COMPONENT */,
},
{
title: 'Banks',
description: 'We carefully verify all banks before add them into the app',
color: '#6CB2B8',
image: /* IMAGE COMPONENT */,
icon: /* ICON COMPONENT */,
},
{
title: 'Stores',
description: 'All local stores are categorized for your convenience',
color: '#9D8FBF',
image: /* IMAGE COMPONENT */,
icon: /* ICON COMPONENT */,
},
];
const Screen = () => {
const handleOnClosePress = () => console.log('navigate to other screen')
return (
<PaperOnboarding
data={data}
onCloseButtonPress={handleOnClosePress}
/>
)
}
Props
name | required | default | description |
---|---|---|---|
data | YES | Array of pages/slides PaperOnboardingItemType to present. |
|
safeInsets | No | {top: 50, bottom: 50, left: 50, right: 50} | Safe area insets usually come from react-native-safe-area-context . |
indicatorSize | No | 40 | Indicator width and height. |
indicatorColor | No | white | Indicator border and fill color. |
titleStyle | No | Text style to override all page/slide title default style. |
|
descriptionStyle | No | Text style to override all page/slide description default style. |
|
clostButtonTextStyle | No | Text style to override close button text default style. | |
closeButtonText | No | close | Text to be set in close button. |
onCloseButtonPress | YES | Callback when user press on close button. |
PaperOnboardingItemType
name | required | default | description |
---|---|---|---|
image | No | Image/component to be add the slide/page. | |
icon | No | Image/component to be add the slide/page indicator. | |
color | Yes | Background color for the slide/page. | |
title | Yes | Title for the slide/page. | |
description | Yes | Description for the slide/page. | |
titleStyle | No | Text style to override page/slide title default style. | |
descriptionStyle | No | Text style to override page/slide description default style. |
Built With ❤️
- react-native-gesture-handler
- react-native-reanimated
- react-native-redash
- react-native-svg
- @react-native-community/bob
Author
License
MIT