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 components for React Native.

See Live Demo on Expo Snack.

Features

📱 Easily add welcome screens, product tours, and feature highlights
🎨 Fully customizable components and config
🔧 Lightweight and zero dependencies
🚀 Works with Expo
✨ 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. Three default behaviors are offered (fullscreen, bottom-sheet, and inline) and can be changed by changing the type property. To change the default behavior, see the docs on supported props.

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

const App = () => {

  return (
    <OnboardFlow
      pages={[
        {
          title: 'Welcome to my app',
          subtitle: 'This is page 1',
          imageUri: 'https://frigade.com/img/example1.png',
        },
        {
          title: 'Page 2 header',
          subtitle: 'This is page 2',
          imageUri: 'https://frigade.com/img/example2.png',
        }
      ]}
      type={'fullscreen'}
    />
  );
};

If you wish to load your image assets from your local project rather than server side, you can use the require function.

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

const App = () => {

  return (
    <OnboardFlow
      pages={[
        {
          title: 'Welcome to my app',
          subtitle: 'This is page 1',
          imageUri: Image.resolveAssetSource(require('image.png')).uri
        }
      ]}
    />
  );
};

Docs

The official docs are available at docs.frigade.com.

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. See the Official Docs to learn more.

Get in touch

Questions? Comments? Suggestions? Join the Frigade Discord or visit the Frigade website.