React Native WebView — Embed Web Content in Mobile Apps

Introduction

react-native-webview is the community-maintained replacement for the built-in WebView that was removed from React Native core. It wraps WKWebView on iOS and the Chromium-based WebView on Android, providing a consistent API for embedding web content with native-to-web communication.

What React Native WebView Does

• Renders remote URLs, local HTML strings, and bundled HTML files inside a native view
• Provides bidirectional message passing between React Native and embedded JavaScript
• Supports custom headers, cookies, user agents, and authentication challenges
• Handles file uploads, downloads, and camera/microphone permission prompts
• Exposes navigation events (load start, load end, error, redirect) via callbacks

Architecture Overview

The component creates a platform-native web view (WKWebView on iOS, android.webkit.WebView on Android) and manages its lifecycle through the React Native bridge. The injectedJavaScript prop executes scripts after page load, and window.ReactNativeWebView.postMessage() sends data from web to native. On the native side, onMessage receives these payloads as React events.

Self-Hosting & Configuration

• Set javaScriptEnabled (default true) and domStorageEnabled for web app compatibility
• Use injectedJavaScriptBeforeContentLoaded for early script injection before DOM renders
• Configure originWhitelist to control which URLs the WebView is allowed to navigate to
• Set mixedContentMode on Android to handle HTTP content inside HTTPS pages
• Enable allowFileAccess and allowFileAccessFromFileURLs for local file loading

Key Features

• Native-to-web bridge via postMessage and onMessage for seamless data exchange
• Custom error and loading views via renderError and renderLoading render props
• Download handling with onFileDownload callback for iOS and automatic handling on Android
• Pull-to-refresh support via pullToRefreshEnabled prop
• Basic authentication support via onHttpError and custom header injection

Comparison with Similar Tools

• expo-web-browser — opens URLs in an external browser; WebView embeds content inline
• InAppBrowser — in-app browser overlay; WebView is a fully embeddable React component
• iframe (web) — web-only; react-native-webview provides native container with bridge APIs
• Custom Tabs (Android) — Chrome-powered browser tab; WebView offers tighter integration

FAQ

Q: How do I communicate between React Native and web content? A: Inject JavaScript with injectedJavaScript, and use window.ReactNativeWebView.postMessage() to send data back. Handle it with the onMessage prop.

Q: Can I intercept navigation requests? A: Yes. Use onShouldStartLoadWithRequest to inspect and allow or block URL navigations.

Q: Does it support cookies? A: Yes. The sharedCookiesEnabled prop shares cookies with native HTTP clients. Use CookieManager for manual cookie management.

Q: Can I render local HTML files? A: Yes. Use source={{ html: '<h1>Hello</h1>' }} for inline HTML or source={{ uri: 'file:///...' }} for bundled files.

Sources

• https://github.com/react-native-webview/react-native-webview
• https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md