Onboarding UI slider for React Native
Paper Onboarding
Paper Onboarding UI is a material design UI slider for React Native inspired by Ramotion Paper Onboarding.
Installation
NPM
npm install @gorhom/paper-onboarding
YARN
yarn add @gorhom/paper-onboarding
Require some other library for this example
you need to install react-native-reanimated, react-native-gesture-handler & react-native-svg
Example
onboarding.jsx
import PaperOnboarding, {PaperOnboardingItemType} from "@gorhom/paper-onboarding";
const data = [
{
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}
/>
)
}
Other Links
Share this page on:
Subscribe Email Updates
to get latest update