native-webview

Capacitor plugin for opening and controlling native iOS webviews with custom alerts and loading overlays.

Install

npm install native-webview
npx cap sync

API

• open(...)
• close()
• showCustomAlert(...)
• showAlert(...)
• showSuccess(...)
• showError(...)
• showWarning(...)
• showLoading(...)
• hideLoading()
• addListener('urlChanged', ...)
• addListener('closed', ...)
• addListener('reload', ...)
• addListener('next', ...)
• removeAllListeners()
• Interfaces

open(...)

open(options: OpenWebviewOptions) => Promise<{ url?: string; }>

Open a URL in a native webview (iOS only)

| Param | Type | Description | | ------------- | ----------------------------------------------------------------- | ------------------------------- | | options | OpenWebviewOptions | - Configuration for the webview |

Returns: Promise<{ url?: string; }>

close()

close() => Promise<void>

Close the currently open webview

showCustomAlert(...)

showCustomAlert(options: { message: string; type?: 'info' | 'success' | 'error' | 'warning'; buttonText?: string; }) => Promise<void>

Show a custom styled alert dialog (matches your app design)

| Param | Type | | ------------- | ---------------------------------------------------------------------------------------------------------- | | options | { message: string; type?: 'error' | 'info' | 'success' | 'warning'; buttonText?: string; } |

showAlert(...)

showAlert(options: { title?: string; message: string; }) => Promise<void>

Show a standard system alert

| Param | Type | | ------------- | ------------------------------------------------- | | options | { title?: string; message: string; } |

showSuccess(...)

showSuccess(options: { message: string; buttonText?: string; }) => Promise<void>

Show a success alert (uses custom styling)

| Param | Type | | ------------- | ------------------------------------------------------ | | options | { message: string; buttonText?: string; } |

showError(...)

showError(options: { message: string; buttonText?: string; }) => Promise<void>

Show an error alert (uses custom styling)

| Param | Type | | ------------- | ------------------------------------------------------ | | options | { message: string; buttonText?: string; } |

showWarning(...)

showWarning(options: { message: string; buttonText?: string; }) => Promise<void>

Show a warning alert (uses custom styling)

| Param | Type | | ------------- | ------------------------------------------------------ | | options | { message: string; buttonText?: string; } |

showLoading(...)

showLoading(options?: { message?: string | undefined; } | undefined) => Promise<void>

Show a loading overlay

| Param | Type | | ------------- | ---------------------------------- | | options | { message?: string; } |

hideLoading()

hideLoading() => Promise<void>

Hide the loading overlay

addListener('urlChanged', ...)

addListener(eventName: 'urlChanged', listenerFunc: (info: { url: string; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | ------------------ | ------------------------------------------------ | | eventName | 'urlChanged' | | listenerFunc | (info: { url: string; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('closed', ...)

addListener(eventName: 'closed', listenerFunc: () => void) => Promise<PluginListenerHandle>

| Param | Type | | ------------------ | -------------------------- | | eventName | 'closed' | | listenerFunc | () => void |

Returns: Promise<PluginListenerHandle>

addListener('reload', ...)

addListener(eventName: 'reload', listenerFunc: () => void) => Promise<PluginListenerHandle>

| Param | Type | | ------------------ | -------------------------- | | eventName | 'reload' | | listenerFunc | () => void |

Returns: Promise<PluginListenerHandle>

addListener('next', ...)

addListener(eventName: 'next', listenerFunc: () => void) => Promise<PluginListenerHandle>

| Param | Type | | ------------------ | -------------------------- | | eventName | 'next' | | listenerFunc | () => void |

Returns: Promise<PluginListenerHandle>

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all listeners for this plugin

Interfaces

OpenWebviewOptions

| Prop | Type | Description | | ------------------ | -------------------- | ------------------------------------------------------ | | url | string | The URL to load in the webview | | title | string | Title for the navigation bar (iOS only) | | nextBtnText | string | Next button text | | clearCookies | boolean | Allow clearing cookies before loading (default: false) |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |