Paper Onboarding
[](https://www.npmjs.com/package/@gorhom/paper-onboarding) [](https://www.npmjs.com/package/@gorhom/paper-onboarding) [](https://www.npmjs.com/package/@gorhom/paper-onboarding)
Paper Onboarding is a material design UI slider for `React Native` inspired by [Ramotion Paper Onboarding](https://github.com/Ramotion/paper-onboarding).
---
## Installation
```sh
yarn add @gorhom/paper-onboarding
# or
npm install @gorhom/paper-onboarding
```
> Also, you need to install [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated), [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) & [react-native-svg](https://github.com/react-native-community/react-native-svg), and follow their installation instructions.
## Usage
```tsx
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 (
