@gorhom/paper-onboarding

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.
direction	NO	horizontal	Pan gusture direction. horizontal or vertical
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

• Mo Gorhom

License

MIT

Changelog

v0.3.1

4 April 2020

• fix: updated types file path 3dca3cc