React Native WebView

Common errors

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

  cause 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`

  cause 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`.

Warnings

• breaking This 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.
• gotcha Maintaining 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.
• gotcha Users 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.

Install

• npm install react-native-webview npm
• yarn add react-native-webview yarn
• pnpm add react-native-webview pnpm

Imports

• WebView
  wrong:

  import WebView from 'react-native-webview';

  correct:

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

  WebView is a named export, not a default export. Ensure named import for component usage.
• WebViewProps
  wrong:

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

  correct:

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

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

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

  correct:

  import type { WebViewMessageEvent } from '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.

Quickstart

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;