> ## 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.

# Notification Permissions

> How to handle native notification permission requests

<Warning>
  **Beta Feature**: This feature is currently in testing. Use at your own risk. Behavior may change in future updates.
</Warning>

Pop Onboarding allows you to add a **"Request Notification Permission"** action to any button or icon in your flow.

Since WebViews cannot request native permissions directly due to OS security sandboxing, this action sends a message to your native app, which must then trigger the actual OS permission dialog.

## How it works

1. You select "Request Notifications" as the action for a button in the Pop Editor.
2. User taps the button.
3. The WebView sends a `postMessage` with `{ type: 'request_notification' }`.
4. Your native code intercepts this message and calls the native permission API.

## Implementation Guide

### React Native

You can use the `react-native-permissions` or specific push notification libraries.

```javascript theme={null}
import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';

// Inside your WebView onMessage handler:
if (data.type === 'request_notification') {
  request(PERMISSIONS.IOS.NOTIFICATIONS).then((result) => {
    console.log('Permission result:', result);
    // Optionally trigger next screen in WebView
    // webViewRef.current.injectJavaScript('window.nextScreen();');
  });
}
```

### Expo

If you are using Expo, use `expo-notifications`:

```bash theme={null}
npx expo install expo-notifications
```

```javascript theme={null}
import * as Notifications from 'expo-notifications';

// Inside your WebView onMessage handler:
if (data.type === 'request_notification') {
  const { status } = await Notifications.requestPermissionsAsync();
  console.log('Permission status:', status);
}
```

### iOS (Swift)

```swift theme={null}
import UserNotifications

// Inside your message handler:
if messageType == "request_notification" {
    UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .sound, .badge]) { granted, error in
        print("Permission granted: \(granted)")
    }
}
```

### Android (Kotlin)

```kotlin theme={null}
// Inside your JavascriptInterface or implementation:
if (type == "request_notification") {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
        requestPermissions(arrayOf(Manifest.permission.POST_NOTIFICATIONS), 101)
    }
}
```