> ## Documentation Index
> Fetch the complete documentation index at: https://docs.poponboarding.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WebView Integration

> Integrate onboarding flows into native iOS and Android apps

## React Native

### 1. Install the SDK

<CodeGroup>
  ```bash npm theme={null}
  npm install react-native-pop-onboarding
  ```

  ```bash yarn theme={null}
  yarn add react-native-pop-onboarding
  ```
</CodeGroup>

### 2. iOS Setup (Required)

Configure iOS to allow dynamic content loading in production builds.

<Tabs>
  <Tab title="Expo">
    Add this to your `app.json` or `app.config.js`:

    ```json theme={null}
    {
      "expo": {
        "ios": {
          "infoPlist": {
            "NSAppTransportSecurity": {
              "NSAllowsArbitraryLoads": true
            }
          }
        }
      }
    }
    ```
  </Tab>

  <Tab title="Bare React Native">
    Add this to your `ios/YourApp/Info.plist`:

    ```xml theme={null}
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    ```
  </Tab>
</Tabs>

### 3. Usage

```javascript theme={null}
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

```swift theme={null}
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!")
            }
        }
    }
}
```