React-native-parallax-onboarding NPM

react-native-parallax-onboarding

React Native Onboarding with Parallax Effect with React Native Reanimated

Demo

https://www.youtube.com/shorts/aJlDO4Kn9ik

(This example is using free assets from https://storyset.com)

License

Installation

Step 1:

npm install react-native-reanimated react-native-parallax-onboarding

Step 2: Update babel config for react-native-reanimated

Usage

import { ParallaxOnboarding, PageInterface } from 'react-native-parallax-onboarding';

// ...
const data: PageInterface[] = [
  {
    title: 'Samurai',
    description:
      'A durable deck featured with a menacing face of a samurai at the center of the underside accompanied with a large red sun motif.',
    source: require('./assets/onboarding-01.png'),
  },
  {
    title: 'Reject',
    description:
      "You don't have time to consider wheter the graphic on your CSS board would be considered modernist.",
    source: require('./assets/onboarding-02.png'),
  },
];

return <ParallaxOnboarding
  data = {data}
  backgroundColor={}
  headerTextStyle={}
  hideDot={false}
  onEnd={()=>{}} //function call after done onboarding
/>