react-native-paper-onboarding

by gorhom

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

237 Stars 23 Forks Last release: 5 months ago (v1.0.0) MIT License 52 Commits 9 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:

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 |

Built With ❤️

Author

License

MIT

Liked the library? 😇

Buy Me A Coffee


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.