WebView Guide

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.

npm install react-native-webview

yarn add react-native-webview

WebView backfill ads require adrop-ads-backfill to be configured on both Android and iOS. See Getting Started for setup instructions.

Platform Configuration

Configure the native platforms to enable backfill ads in WebView.

Android
iOS

Add the following to android/app/src/main/AndroidManifest.xml:

AndroidManifest.xml

<manifest>
    <application>
        <!-- WebView Backfill Ad Integration -->
        <meta-data
            android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
            android:value="webview"/>
    </application>
</manifest>

Add the following key to ios/{YourApp}/Info.plist:

Info.plist

<key>GADIntegrationManager</key>
<string>webview</string>

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

Using useAdropWebView Hook

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

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

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

Manual Registration

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

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>
    )
}

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.

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.

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
    }}
/>

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.

Banner Ads

Learn how to integrate banner ads

Reference

API reference

Examples

Example repository

SDK Guide

AI

Android

iOS

React Native

Flutter

Web

REST API

Overview

Prerequisites

Platform Configuration

Using useAdropWebView Hook

Manual Registration

WebView Configuration

Handling External URLs

Banner Ads

Reference

Examples

​Overview

​Prerequisites

​Platform Configuration

​Using useAdropWebView Hook

​Manual Registration

​WebView Configuration

​Handling External URLs

​Related Documentation

Banner Ads

Reference

Examples

Overview

Prerequisites

Platform Configuration

Using useAdropWebView Hook

Manual Registration

WebView Configuration

Handling External URLs

Related Documentation