ashayas/react-native-simple-onboarding

A simple onboarding component for React Native

<Onboarding />

Onboarding experience made a breeze.

Originally inspired by AndroidOnboarder.

Quick demo

Adapts to bright backgrounds	and dark, too	shows the Done button

<Onboarding
  pages={[
    { backgroundColor: '#fff', image: <Square />, title: 'Simple Messenger UI', subtitle: 'Implemented in React Native' },
    { backgroundColor: "#fe6e58", image: <Circle />, title: 'Welcome', subtitle: 'To Earth' },
    { backgroundColor: "#999", image: <Square />, title: 'Also', subtitle: 'Mars is nice' },
  ]}
  onEnd={}
/>

Install

npm install --save react-native-simple-onboarding

import Onboarding from 'react-native-simple-onboarding';

Usage

<Onboarding /> component

Props:

• pages (required): an array of onboarding pages. A page is an object of shape:
  • backgroundColor (required): a background color for the page
  • image (required): a component instance displayed at the top of the page
  • title (required): a string title
  • subtitle (required): a string subtitle
• onEnd (optional): a callback that is fired after the onboarding is complete
• bottomOverlay (optional): a bool flag indicating whether the bottom bar overlay should be shown. Defaults to true.
• showSkip (optional): a bool flag indicating whether the Skip button should be show. Defaults to true.
• showNext (optional): a bool flag indicating whether the Next arrow button should be show. Defaults to true.
• showDone (optional): a bool flag indicating whether the Done checkmark button should be show. Defaults to true.
• lottie (optional, overrides images): a Lottie animation that animates when navigating pages. The object has fields:
  • anim (required): the rendered animation json,
  • keyframes (required): array of target keyframes that each page of the Onboarding should end on,
  • totalFrames (required): total amount of frames in the animation.

To Do

• accessibility

License

MIT.