# React Native WebView — Embed Web Content in Mobile Apps

> A cross-platform WebView component for React Native that renders web pages, local HTML, and JavaScript bridges inside iOS and Android apps with full navigation control and message passing between native and web layers.

## Install

Save in your project root:

# React Native WebView — Embed Web Content in Mobile Apps

## Quick Use
```bash
npm install react-native-webview
npx pod-install
```
```jsx
import { WebView } from 'react-native-webview';
<WebView source={{ uri: 'https://example.com' }} style={{ flex: 1 }} />
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-79a5f79e
Author: AI Open Source