JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 613
  • Score
    100M100P100Q99268F
  • License MIT

Delightful and fully customizable onboarding elements for React Native.

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

npm version npm version npm license code style: prettier

React Native Onboard cover

React Native Onboard

Build better product onboarding in your app.
High-quality components for swipers, tours, and more.

Introduction

A library of high-quality components for creating beautiful onboarding and product education in your React Native apps. It helps developers build better onboarding experiences, faster, so they can focus on what matters most: building great products.

Why

Product onboarding is one of the most important experiences in your app. It's usually the first thing your users see, and it's the first impression they have of your product. But it's difficult to get right and slow to build. We believe there needs to be a better way to build and iterate on high-quality experiences.

Features

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

Install

Install the package from your command line.

With yarn

yarn add react-native-onboard

With npm

npm install 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'}
    />
  );
};

Using local images

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

imageUri: Image.resolveAssetSource(require('image.png')).uri

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.

Docs

The official docs are available at docs.frigade.com

Supercharge your onboarding flows

While the above examples contain hard-coded strings and images for illustrative purposes, we highly recommend loading your strings and presentation layer logic from your API rather than as plain strings in your app.

We built Frigade to work seamlessly with react-native-onboard and make it easier for developers to build and scale onboarding. With Frigade, you can update onboarding flow without releasing to the app store, integrate with 3rd party analytics to power user targeting, and get an API and webhooks to make user data input easy.

Get in touch

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

Authors

License

MIT License