react-native-parallax-onboarding
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

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

MIT 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
/>

Example

In root directory

  • Install dependencies
yarn install
  • Run the example
yarn run example

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Made with create-react-native-library

Package Sidebar

Install

npm i react-native-parallax-onboarding

Weekly Downloads

2

Version

1.2.0

License

MIT

Unpacked Size

77.1 kB

Total Files

52

Last publish

Collaborators

  • vn.chemgio