react-native-onboard

Delightful and fully customizable onboarding components for React Native.

See Live Demo on Expo Snack.

Features

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

Installation

Install the package with either npm or yarn:

npm install react-native-onboard

or

yarn add react-native-onboard

Quick start

Place the OnboardFlow component anywhere in your app. It will automatically take up the entire screen. 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',
        }
      ]}
    />
  );
};

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.

Updating your onboarding flow without app builds and releases

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.

Frigade Cloud offers a hosted service that allows you to update your onboarding flow without having to push a new app build to the app store while also providing a series of very useful integrations.

Get started on Frigade Cloud

Get in touch

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