Skip to main content

​
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.
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>
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:
PropertyTypeDescription
containerRefReact.RefObject<View>Ref to attach to the View wrapping the WebView
isReadybooleanWhether the WebView has been successfully registered
onLayout() => voidCallback 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:
PropValueDescription
javaScriptEnabledtrueEnable JavaScript execution
thirdPartyCookiesEnabledtrueEnable third-party cookies (Android)
mediaPlaybackRequiresUserActionfalseAllow media autoplay
allowsInlineMediaPlaybacktrueAllow 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