React Native
React NativePosts

Onboarding UI slider for React Native


Onboarding UI slider for React Native - webisworld - Best New - 101

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:

Was this page helpful ?

Let us know how we did!

Subscribe Email Updates

to get latest update