React Native
1. Install the SDK
npm install react-native-pop-onboarding
yarn add react-native-pop-onboarding
2. iOS Setup (Required)
Configure iOS to allow dynamic content loading in production builds.- Expo
- Bare React Native
Add this to your
app.json or app.config.js:{
"expo": {
"ios": {
"infoPlist": {
"NSAppTransportSecurity": {
"NSAllowsArbitraryLoads": true
}
}
}
}
}
Add this to your
ios/YourApp/Info.plist:<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
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!")
}
}
}
}