react-native-webview
React Native WebView component for iOS, Android, macOS, and Windows
About
React Native WebView component for iOS, Android, macOS, and Windows
Live mirror of the GitHub README. Updated whenever the repo's default branch changes.
React Native WebView
React Native WebView is a community-maintained WebView component for React Native. It is intended to be a replacement for the built-in WebView (which was removed from core).
Maintainers
Many thanks to these companies for providing us with time to work on open source.
Please note that maintainers spend a lot of free time working on this too so feel free to sponsor them, it really makes a difference.
Windows and macOS are managed by Microsoft, notably:
- Alexander Sklar (Twitter @alexsklar) from React Native for Windows
- Chiara Mooney from React Native for Windows @ Microsoft
Shout-out to Jamon Holmgren from Infinite Red for helping a lot with the repo when he had more available time.
Disclaimer
Maintaining WebView is very complex because it is often used for many different use cases (rendering SVGs, PDFs, login flows, and much more). We also support many platforms and both architectures of react-native.
Since WebView was extracted from the React Native core, nearly 500 pull requests have been merged.
Considering that we have limited time, issues will mostly serve as a discussion place for the community, while we will prioritize reviewing and merging pull requests.
Platform compatibility
This project is compatible with iOS, Android, Windows and macOS.
This project supports both the old (paper) and the new architecture (fabric).
This project is compatible with expo.
Getting Started
Read our Getting Started Guide. If any step seems unclear, please create a pull request.
Versioning
This project follows semantic versioning. We do not hesitate to release breaking changes but they will be in a major version.
Usage
Import the WebView component from react-native-webview and use it like so:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
// ...
const MyWebComponent = () => {
return (
<WebView
source={{ uri: 'https://reactnative.dev/' }}
style={{ flex: 1 }}
/>
);
};
For more, read the API Reference and Guide. If you're interested in contributing, check out the Contributing Guide.
Common issues
- If you're getting
Invariant Violation: Native component for "RNCWebView does not exist"it likely means you forgot to runreact-native linkor there was some error with the linking process - If you encounter a build error during the task
:app:mergeDexRelease, you need to enable multidex support inandroid/app/build.gradleas discussed in this issue
Contributing
Contributions are welcome, see Contributing.md
License
MIT
Translations
This readme is available in:
Quick facts
npm install react-native-webviewCommon pairings
Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.
How Sourcemap Explorer detects react-native-webview
We catch react-native-webview from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/react-native-webview/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.
- 1
Confirm the site exposes sourcemaps
In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment.
- 2
Find the package in the bundle
Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/react-native-webview/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/react-native-webview/package.json` gives you the exact installed version.
- 3
Read the version directly from package.json
Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/react-native-webview/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.
Recent versions
FAQ
What is react-native-webview used for?
React Native WebView component for iOS, Android, macOS, and Windows
How can I tell if a website is using react-native-webview?
Open the page in Chrome with the Sourcemap Explorer extension installed and read the Stack tab. We catch `react-native-webview` from two complementary signals: `node_modules/react-native-webview/` paths inside the JavaScript sourcemap, and the embedded `package.json` we read for exact-version detection. Without the extension you can do the same lookup manually in DevTools — the steps are listed in the "How Sourcemap Explorer detects" section above.
What is the latest version of react-native-webview?
13.16.1, as published on the npm registry. The "Recent versions" table on this page lists the most recent 8 releases with their release dates. Sourcemap Explorer reports the version actually bundled into a site, which can lag the latest release by months on real-world deployments.
Where can I read more?
Project homepage: https://github.com/react-native-webview/react-native-webview#readme. Source code: https://github.com/react-native-webview/react-native-webview. Published on npm: https://www.npmjs.com/package/react-native-webview. Licensed as MIT.
Detected by Sourcemap Explorer
When a bundle ships sourcemaps, we read the embedded package.json for react-native-webview and report the precise version. Without sourcemaps, an import / require in the page's scripts is enough to flag it.