Registry / web-framework / react-native-webview

react-native-webview

library13.16.1jsnpmunverified

React Native WebView is a community-maintained component designed to embed web content within React Native applications across iOS, Android, macOS, and Windows platforms. It serves as a direct replacement for the WebView component that was previously part of the React Native core, which has since been removed. The current stable version is 13.16.1, with frequent patch and minor releases addressing bugs and adding features, typically on a monthly to bi-monthly cadence. Key differentiators include its broad platform support, compatibility with both the old (paper) and new (fabric) React Native architectures, and official support for Expo. The project actively merges pull requests, demonstrating ongoing development, though explicit support for issues is often community-driven due to the inherent complexity and diverse use cases of WebViews. The library adheres to semantic versioning, introducing breaking changes only in major version bumps.

web-framework

npm install react-native-webview

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-WEBVI

react-native-webview

web-frameworkjavascriptv13.16.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

WebView

✓ import { WebView } from 'react-native-webview';

✗ import WebView from 'react-native-webview';

WebView is a named export, not a default export. Ensure named import for component usage.

WebViewProps

✓ import type { WebViewProps } from 'react-native-webview';

✗ import { WebViewProps } from 'react-native-webview';

When importing types in TypeScript, use 'import type' for clarity and to avoid bundling issues.

WebViewMessageEvent

✓ import type { WebViewMessageEvent } from 'react-native-webview';

✗ const { WebViewMessageEvent } = require('react-native-webview');

Use named type import for event interfaces. CommonJS `require` is generally discouraged in modern React Native/TypeScript projects which prefer ESM syntax.

This example demonstrates how to render a basic WebView displaying the React Native documentation website. It includes basic styling, a load event handler, and an error handler.

import React from 'react'; import { StyleSheet, View } from 'react-native'; import { WebView } from 'react-native-webview'; const MyWebComponent = () => { return ( <View style={styles.container}> <WebView source={{ uri: 'https://reactnative.dev/' }} style={styles.webview} onLoad={() => console.log('WebView loaded!')} onError={(syntheticEvent) => { const { nativeEvent } = syntheticEvent; console.warn('WebView error: ', nativeEvent.description); }} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, marginTop: 20, // Adjust for status bar }, webview: { flex: 1, }, }); export default MyWebComponent;

Debug

Known issues

breakingThis project follows semantic versioning and introduces breaking changes in major versions without hesitation. Always review the release notes when upgrading to a new major version.

fix

Consult the migration guide or release notes for the specific major version you are upgrading to and update your code accordingly.

affects: >=1.0

gotchaMaintaining WebView is complex due to diverse use cases and platform differences. While PRs are prioritized, direct support for issues is often community-driven, so be prepared to contribute solutions.

fix

When encountering an issue, thoroughly check existing GitHub issues and discussions. If a solution isn't available, consider debugging and submitting a pull request with a fix.

affects: >=1.0

gotchaUsers migrating to or enabling React Native's New Architecture (Fabric) may encounter regressions or unexpected behavior. Recent patches (v13.13.x) addressed specific issues related to default values and configuration.

fix

Ensure you are on the latest patch version of react-native-webview. Thoroughly test your application when enabling the New Architecture and report any new regressions.

affects: >=13.13.0

Errors

Common errors & fixes

Invariant Violation: Native component for "RNCWebView does not exist"

The native module for WebView was not correctly linked or found by React Native.

fix

Run `npx react-native link react-native-webview` (though typically autolinking handles this for newer RN versions, manual linking or clearing caches might be necessary). Ensure your build caches are clear (`yarn start --reset-cache`, clean Android/iOS builds).

A build error during the task `:app:mergeDexRelease`

This typically indicates that the Android application has too many methods, requiring multidex support.

fix

Enable multidex support in your `android/app/build.gradle` file by adding `multiDexEnabled true` to `defaultConfig` and `implementation 'androidx.multidex:multidex:2.0.1'` to `dependencies`.

Upgrade

Version history

13.16.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React Native applications

react-nativerequiredPeer dependency for React Native applications

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react-native-webview/react-native-webview ↗

packagehttps://www.npmjs.com/package/react-native-webview ↗