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

# WebView Guide

> How to display backfill ads in WebView for React Native

## Overview

Display backfill ads in WebView within your React Native app. The Adrop SDK provides a `useAdropWebView` hook for easy integration, as well as a manual `registerWebView` API.

***

## Prerequisites

Install the `react-native-webview` package in your project.

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

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

<Warning>
  WebView backfill ads require `adrop-ads-backfill` to be configured on both Android and iOS. See [Getting Started](/sdk/react-native/overview) for setup instructions.
</Warning>

***

## Platform Configuration

Configure the native platforms to enable backfill ads in WebView.

<Tabs>
  <Tab title="Android">
    Add the following to `android/app/src/main/AndroidManifest.xml`:

    ```xml AndroidManifest.xml theme={null}
    <manifest>
        <application>
            <!-- WebView Backfill Ad Integration -->
            <meta-data
                android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
                android:value="webview"/>
        </application>
    </manifest>
    ```
  </Tab>

  <Tab title="iOS">
    Add the following key to `ios/{YourApp}/Info.plist`:

    ```xml Info.plist theme={null}
    <key>GADIntegrationManager</key>
    <string>webview</string>
    ```
  </Tab>
</Tabs>

<Warning>
  This configuration is required for backfill ads to work properly in WebView. Without it, backfill ads may not display.
</Warning>

***

## Using useAdropWebView Hook

The recommended approach. The `useAdropWebView` hook handles WebView registration automatically.

```tsx theme={null}
import React from 'react'
import { View } from 'react-native'
import { WebView } from 'react-native-webview'
import { useAdropWebView } from 'adrop-ads-react-native'

const WebViewScreen: React.FC = () => {
    const { containerRef, isReady, onLayout } = useAdropWebView()

    return (
        <View ref={containerRef} style={{ flex: 1 }} onLayout={onLayout}>
            <WebView
                source={isReady ? { uri: 'https://your-website.com' } : { html: '' }}
                style={{ flex: 1 }}
                javaScriptEnabled={true}
                thirdPartyCookiesEnabled={true}
                mediaPlaybackRequiresUserAction={false}
                allowsInlineMediaPlayback={true}
            />
        </View>
    )
}
```

**Return values:**

| Property       | Type                    | Description                                          |
| -------------- | ----------------------- | ---------------------------------------------------- |
| `containerRef` | `React.RefObject<View>` | Ref to attach to the `View` wrapping the WebView     |
| `isReady`      | `boolean`               | Whether the WebView has been successfully registered |
| `onLayout`     | `() => void`            | Callback to trigger registration on layout           |

<Note>
  Load web content only after `isReady` is `true`. Before registration is complete, passing a URL to the WebView may result in ads not displaying.
</Note>

***

## Manual Registration

You can also register the WebView manually using `Adrop.registerWebView`.

```tsx theme={null}
import React, { useEffect, useRef, useState } from 'react'
import { findNodeHandle, View } from 'react-native'
import { WebView } from 'react-native-webview'
import { Adrop } from 'adrop-ads-react-native'

const WebViewScreen: React.FC = () => {
    const containerRef = useRef<View>(null)
    const [isReady, setIsReady] = useState(false)

    useEffect(() => {
        const register = async () => {
            if (containerRef.current) {
                const tag = findNodeHandle(containerRef.current)
                if (tag != null) {
                    await Adrop.registerWebView(tag)
                    setIsReady(true)
                }
            }
        }
        register()
    }, [])

    return (
        <View ref={containerRef} style={{ flex: 1 }}>
            <WebView
                source={isReady ? { uri: 'https://your-website.com' } : { html: '' }}
                style={{ flex: 1 }}
                javaScriptEnabled={true}
                thirdPartyCookiesEnabled={true}
                mediaPlaybackRequiresUserAction={false}
                allowsInlineMediaPlayback={true}
            />
        </View>
    )
}
```

<Warning>
  `react-native-webview`'s ref is an imperative handle, so `findNodeHandle` does not work directly on it. You must wrap the WebView in a `View` and use that `View`'s ref instead.
</Warning>

***

## WebView Configuration

The following WebView props are required for backfill ads to work properly:

| Prop                              | Value   | Description                          |
| --------------------------------- | ------- | ------------------------------------ |
| `javaScriptEnabled`               | `true`  | Enable JavaScript execution          |
| `thirdPartyCookiesEnabled`        | `true`  | Enable third-party cookies (Android) |
| `mediaPlaybackRequiresUserAction` | `false` | Allow media autoplay                 |
| `allowsInlineMediaPlayback`       | `true`  | Allow inline media playback (iOS)    |

***

## Handling External URLs

If your app opens non-own-domain URLs in an external browser, you must ensure that ad resource requests (e.g., `googleads.g.doubleclick.net`) are not blocked.

Ad resources such as iframes and scripts are loaded automatically by the ad SDK — they are not user-initiated navigations. Only redirect **user-initiated navigations** to an external browser.

```tsx theme={null}
import { Linking } from 'react-native'

const allowedHost = 'my-domain.com'

<WebView
    source={{ uri: 'https://my-domain.com' }}
    style={{ flex: 1 }}
    javaScriptEnabled={true}
    thirdPartyCookiesEnabled={true}
    mediaPlaybackRequiresUserAction={false}
    allowsInlineMediaPlayback={true}
    onShouldStartLoadWithRequest={(request) => {
        const url = request.url
        const host = new URL(url).host

        // Only redirect user-initiated navigations to external browser
        // Ad resources (e.g., googleads.g.doubleclick.net) load via iframes/scripts,
        // not user clicks — do not block them
        if (!host.includes(allowedHost) && request.navigationType === 'click') {
            Linking.openURL(url)
            return false
        }

        return true
    }}
/>
```

<Warning>
  Do not block or redirect all non-own-domain requests. Ad resources like `googleads.g.doubleclick.net` are loaded automatically during the backfill ad process and must be allowed to load within the WebView.
</Warning>

***

## Related Documentation

<CardGroup cols={2}>
  <Card title="Banner Ads" icon="rectangle-ad" href="/sdk/react-native/banner">
    Learn how to integrate banner ads
  </Card>

  <Card title="Reference" icon="book" href="/sdk/react-native/reference">
    API reference
  </Card>

  <Card title="Examples" icon="code" href="/sdk/react-native/examples">
    Example repository
  </Card>
</CardGroup>