In-app browsers
Two props on the WebView, one declared name, and the page's requests and logs join your app's.
A <WebView /> runs its own separate JavaScript, in a separate engine, invisible to everything that
patches fetch and console in your app. So it needs two props wired up:
import { WebView } from 'react-native-webview';
import { devtools } from './devtools';
<WebView
source={{ uri: 'https://example.com' }}
injectedJavaScriptBeforeContentLoaded={devtools.getWebViewInjectedJavaScriptBeforeContentLoaded(
'my-webview'
)}
onMessage={(event) => devtools.handleWebViewMessage(event)}
/>;Declare the name up front, so a typo cannot silently swallow everything:
export const devtools = createDevtoolsClient({
webviewSources: ['my-webview'],
});That covers both the page's requests and its console output. Rows show up tagged
WebView::[my-webview] in either tab, and the Source chips can filter them apart from your app's own.
webviewSources uses a TypeScript const type parameter, so the literal names flow into the helpers'
parameter types: passing an undeclared name is a compile error, and at runtime a message from an
undeclared source is dropped.
Use injectedJavaScriptBeforeContentLoaded, not injectedJavaScript
The latter runs after the page's own scripts have already fired, so their requests escape.
Optional: reaching the page with throttling
Three more props, only needed if you want the connection settings to apply to the page too:
| Prop | Value | What it buys |
|---|---|---|
ref | devtools.getWebViewRef('my-webview') | A speed change reaches an already-open page |
userAgent | devtools.getWebViewUserAgent() | The browser override applies for real |
onShouldStartLoadWithRequest | devtools.shouldAllowWebViewRequest | Navigation is blocked while Offline is on |
A page can never be fully throttled: images, stylesheets and scripts the browser loads by itself still go out at full speed.