Home

Awesome

<div align="center"> <h1>Paper Onboarding</h1>

npm npm npm

<img src="./preview.gif">

Paper Onboarding is a material design UI slider for React Native inspired by Ramotion Paper Onboarding.

</div>

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 (
    <PaperOnboarding
      data={data}
      onCloseButtonPress={handleOnClosePress}
    />
  )
}

Props

namedescriptionrequiredtypedefault
dataArray of pages/slides to present.YESArray<PaperOnboardingItemType>
safeInsetsSafe area insets usually come from react-native-safe-area-context.NOInsets{top: 50, bottom: 50, left: 50, right: 50}
directionPan gesture direction.NO'horizontal' | 'vertical'horizontal
indicatorSizeIndicator size (width and height).NOnumber40
indicatorBackgroundColorIndicator background color.NOstringwhite
indicatorBorderColorIndicator border color.NOstringwhite
titleStyleText style to override all page/slide title style.NOStyleProp<TextStyle>
descriptionStyleText style to override all page/slide description style.NOStyleProp<TextStyle>
closeButtonCustom component to be used instead of the default close button.NO(() => React.ReactNode) | React.ReactNode
closeButtonTextClose button text.NOstringclose
closeButtonTextStyleClose button text style.NOStyleProp<TextStyle>
onCloseButtonPressCallback on close button pressed.NO() => void
onIndexChangeCallback when index change.NO() => void

PaperOnboardingItemType

namedescriptionrequiredtype
contentSlide/page content, this will replace default content.NO((props: PageContentProps) => React.ReactNode) | React.ReactNode
imageImage cover.NO(() => React.ReactNode) | React.ReactNode
iconIndicator icon.NO(() => React.ReactNode) | React.ReactNode
backgroundColorBackground color.YESstring
titleTitle text.NOstring
descriptionDescription text.NOstring
titleStyleText style to override page/slide title default style.NOStyleProp<TextStyle>
descriptionStyleText style to override page/slide description default style.NOStyleProp<TextStyle>
showCloseButtonShow close button when page/slide is active, note: last page will always show close button.NOboolean

Methods

namedescriptiontype
nextNavigate to next page.() => void
previousNavigate 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 ❤️


<p align="center"> <a href="https://gorhom.dev" target="_blank"><img height="18" alt="Mo Gorhom" src="./logo.png"></a> </p>