Package Exports

react-native-onboard
react-native-onboard/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-onboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-onboard

Delightful and fully customizable onboarding swiper for React Native.

onboard gif

See Live Demo on Expo Snack

Features

🎨 Fully customizable components and config
🔧 Load images and content from your backend
🚀 Works with Expo
📦 Very lightweight (~35 kB)
✨ Beautiful default UI

Installation

Install the package with either npm or yarn:

npm install react-native-onboard

yarn add react-native-onboard

Quick start

Place the OnboardFlow component anywhere in your app. It will automatically take up the entire screen.

Set fullscreenModal to false if you want to use it as a component.

import { OnboardFlow } from 'react-native-onboard';

<OnboardFlow fullscreenModal={true} pages={[
  {
    title: 'Welcome to my app',
    subtitle: 'Cool description of my app',
    imageUri: 'https://illlustrations.co/static/f8a168f23ea5623d0c8987b551729183/day78-wallet.png',
  },
  {
    title: 'Page 2 header',
    subtitle: 'Welcome to page 2',
    imageComponent: <MyCustomComponent/>
  }]} />

Customization

react-native-onboard is designed to be headless and customizable. You can use the default UI or create your own by implementing a series of provided interfaces.

Get in touch

Questions? Comments? Suggestions? Feel free to open an issue, submit a PR, or contact us.