Skip to main content

​
React Native

​
1. Install the SDK

npm install react-native-pop-onboarding

​
2. iOS Setup (Required)

Configure iOS to allow dynamic content loading in production builds.
Add this to your app.json or app.config.js:
{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true
        }
      }
    }
  }
}

​
3. Usage

import { useOnboarding, PopOnboarding } from 'react-native-pop-onboarding';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  const [showOnboarding, setShowOnboarding] = useState(false);

  // Best Practice: Only show to first-time users
  useEffect(() => {
    const checkOnboarding = async () => {
      const hasSeenOnboarding = await AsyncStorage.getItem('onboarding_complete');
      if (!hasSeenOnboarding) {
        setShowOnboarding(true);
      }
    };
    checkOnboarding();
  }, []);

  const { projectExists, loading, error } = useOnboarding('PROJECT_ID', {
    apiKey: 'YOUR_API_KEY',
  });

  const handleComplete = async () => {
    await AsyncStorage.setItem('onboarding_complete', 'true');
    setShowOnboarding(false);
  };

  if (!showOnboarding) return <MainApp />;
  
  return (
    <PopOnboarding 
      projectId="PROJECT_ID"
      apiKey="YOUR_API_KEY"
      onComplete={handleComplete}
      onSkip={handleComplete}
    />
  );
};

​
iOS (Swift)

​
1. Add Package Dependency

Add the Swift Package in Xcode: File → Add Package Dependencies 
https://github.com/jamesagib/pop-onboarding-swift

​
2. Usage

import PopOnboarding
import UIKit

// 1. Configure in AppDelegate
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    PopOnboarding.shared.configure(apiKey: "YOUR_API_KEY")
    return true
}

// 2. Start Flow
func showOnboarding() {
    PopOnboarding.shared.startFlow(
        projectId: "PROJECT_ID",
        from: self
    ) { result in
        if case .success(let data) = result {
            if data.completed {
                print("Onboarding completed!")
            }
        }
    }
}