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

About the developer

gorhom
554 Stars 34 Forks MIT License 61 Commits 5 Opened issues

Description

Paper Onboarding is a material design UI slider for `React Native`.

Services available

!
?

Need anything else?

Contributors list

# 115,309
TypeScr...
React N...
HTML
Shell
57 commits
# 56,766
React N...
react-n...
Shell
reactjs
1 commit
# 180,306
React N...
C
Shell
Rust
1 commit
# 99,728
Shell
C
TypeScr...
React N...
1 commit

Paper Onboarding

npm npm npm

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, and follow their installation instructions.

Usage

import PaperOnboarding, {PaperOnboardingItemType} from "@gorhom/paper-onboarding";

const data: PaperOnboardingItemType[] = [ { title: 'Hotels', description: 'All hotels and hostels are sorted by hospitality rating', backgroundColor: '#698FB8', image: /* IMAGE COMPONENT /, icon: / ICON COMPONENT /, content: / CUSTOM COMPONENT /, }, { title: 'Banks', description: 'We carefully verify all banks before add them into the app', backgroundColor: '#6CB2B8', image: / IMAGE COMPONENT /, icon: / ICON COMPONENT /, content: / CUSTOM COMPONENT /, }, { title: 'Stores', description: 'All local stores are categorized for your convenience', backgroundColor: '#9D8FBF', image: / IMAGE COMPONENT /, icon: / ICON COMPONENT /, content: / CUSTOM COMPONENT */, }, ];

const Screen = () => { const handleOnClosePress = () => console.log('navigate to other screen') return ( ) }

Props

| name | description | required | type | default | | ------------------------ | -------------------------------------------------------------------- | -------- | ---------------------------------------------------------- | ------------------------------------------ | | data | Array of pages/slides to present. | YES | Array<PaperOnboardingItemType> | | | safeInsets | Safe area insets usually come from

react-native-safe-area-context
. | NO | Insets | {top: 50, bottom: 50, left: 50, right: 50} | | direction | Pan gesture direction. | NO | 'horizontal' | 'vertical' | horizontal | | indicatorSize | Indicator size (width and height). | NO | number | 40 | | indicatorBackgroundColor | Indicator background color. | NO | string | white | | indicatorBorderColor | Indicator border color. | NO | string | white | | titleStyle | Text style to override
all
page/slide title style. | NO | StyleProp | | | descriptionStyle | Text style to override
all
page/slide description style. | NO | StyleProp | | | closeButton | Custom component to be used instead of the default close button. | NO | (() => React.ReactNode) | React.ReactNode | | | closeButtonText | Close button text. | NO | string | close | | closeButtonTextStyle | Close button text style. | NO | StyleProp | | | onCloseButtonPress | Callback on close button pressed. | NO | () => void | | | onIndexChange | Callback when index change. | NO | () => void | |

PaperOnboardingItemType

| name | description | required | type | | ---------------- | --------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------- | | content | Slide/page content, this will replace default content. | NO | ((props: PageContentProps) => React.ReactNode) | React.ReactNode | | image | Image cover. | NO | (() => React.ReactNode) | React.ReactNode | | icon | Indicator icon. | NO | (() => React.ReactNode) | React.ReactNode | | backgroundColor | Background color. | YES | string | | title | Title text. | NO | string | | description | Description text. | NO | string | | titleStyle | Text style to override page/slide title default style. | NO | StyleProp | | descriptionStyle | Text style to override page/slide description default style. | NO | StyleProp | | showCloseButton | Show close button when page/slide is active, note: last page will always show close button. | NO | boolean |

Methods

| name | description | type | | -------- | -------------------------- | ---------- | | next | Navigate to next page. | () => void | | previous | Navigate to previous page. | () => void |

Author

Sponsor & Support

To keep this library maintained and up-to-date please consider sponsoring it on GitHub. Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter @gorhom.

License

MIT

Built With ❤️


Mo Gorhom

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.