React Native Pop Onboarding

Integrate beautiful, dynamic onboarding flows into your React Native app with just a few lines of code.

Installation

npm install react-native-pop-onboarding
# or
yarn add react-native-pop-onboarding

iOS Setup (Required for Production Builds)

Important: If you're building for TestFlight or App Store, you need to configure iOS App Transport Security.

👉 See iOS Setup Guide for detailed instructions.

Quick Fix: Add this to your ios/YourAppName/Info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Then rebuild your app. This is required because the SDK loads content dynamically via WebView.

Usage

1. Import the SDK

import { useOnboarding, PopOnboarding } from 'react-native-pop-onboarding';

2. Fetch and Render

Use the useOnboarding hook to check if your project exists, and then pass your credentials to the PopOnboarding component.

import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { useOnboarding, PopOnboarding } from 'react-native-pop-onboarding';

const App = () => {
  // Replace with your actual Project ID from the Pop Onboarding Dashboard
  const PROJECT_ID = 'your-project-id-here';
  const API_KEY = 'your-api-key-here';
  
  const { projectExists, loading, error } = useOnboarding(PROJECT_ID, {
    apiKey: API_KEY
  });

  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  if (error || !projectExists) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Error loading onboarding: {error}</Text>
      </View>
    );
  }

  return (
    <PopOnboarding 
      projectId={PROJECT_ID}
      apiKey={API_KEY}
      onComplete={() => {
        console.log('Onboarding completed!');
        // Navigate to your main app screen here
      }}
      onSkip={() => {
        console.log('Onboarding skipped');
        // Navigate to your main app screen here
      }}
    />
  );
};

export default App;

API Reference

useOnboarding(projectId: string, options: { apiKey?: string })

A hook that checks if the project exists and is accessible.

• Arguments:
  • projectId (string): The unique identifier for your project.
  • options (object): Optional configuration.
    • apiKey (string): Your project's API Key (required for secure access).
• Returns:
  • projectExists (boolean): True if the project was found and authorized.
  • loading (boolean): True while checking.
  • error (string | null): Error message if check fails.

<PopOnboarding />

The component responsible for rendering the onboarding screens using a high-performance WebView.

• Props:
  • projectId (string): The unique identifier for your project.
  • apiKey (string): Your project's API Key.
  • onComplete (function): Callback fired when the user finishes the last screen or clicks a "Dismiss" button.
  • onSkip (function): Callback fired when the user clicks a "Skip" button.

Legacy Renderer

If you prefer the native renderer (older version), you can still import OnboardingRenderer and use it with the data returned from useOnboarding (note: useOnboarding signature has changed, so you might need to adjust if using the legacy renderer). However, PopOnboarding is the recommended component for best performance and visual fidelity.