@byron-react-native/webview

React Native WebView - a Modern, Cross-Platform WebView for React Native

React Native WebView is a modern, well-supported, and cross-platform WebView for React Native. It is intended to be a replacement for the built-in WebView (which will be removed from core).

Core Maintainers - Sponsoring companies

This project is maintained for free by these people using both their free time and their company work time.

• Thibault Malbranche (Twitter @titozzz) from Brigad
• Jamon Holmgren (Twitter @jamonholmgren) from Infinite Red
• Alexander Sklar (Twitter @alexsklar) from React Native Windows @ Microsoft
• Chiara Mooney from React Native Windows @ Microsoft

Platforms Supported

• iOS
• Android
• macOS
• Windows

Note: Expo support for React Native WebView started with Expo SDK v33.0.0.

Getting Started

Read our Getting Started Guide. If any step seems unclear, please create a detailed issue.

Versioning

This project follows semantic versioning. We do not hesitate to release breaking changes but they will be in a major version.

Breaking History:

Current Version:

• 11.0.0 - Android setSupportMultipleWindows.
• 10.0.0 - Android Gradle plugin is only required when opening the project stand-alone
• 9.0.0 - props updates to injectedJavaScript are no longer immutable.
• 8.0.0 - onNavigationStateChange now triggers with hash url changes
• 7.0.1 - Removed UIWebView
• 6.0.2 - Update to AndroidX. Make sure to enable it in your project's android/gradle.properties. See Getting Started Guide.
• 5.0.1 - Refactored the old postMessage implementation for communication from webview to native.
• 4.0.0 - Added cache (enabled by default).
• 3.0.0 - WKWebview: Add shared process pool so cookies and localStorage are shared across webviews in iOS (enabled by default).
• 2.0.0 - First release this is a replica of the core webview component

Upcoming:

• this.webView.postMessage() removal (never documented and less flexible than injectJavascript) -> how to migrate
• Kotlin rewrite
• Maybe Swift rewrite

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';

// ...
class MyWebComponent extends Component {
  render() {
    return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
  }
}

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 run react-native link or 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 in android/app/build.gradle as discussed in this issue

Contributing

See Contributing.md

Contributors

Thanks goes to these wonderful people (emoji key):

Thibault Malbranche 💻 🤔 👀 📖 🚧 ⚠️ 🚇 💬	Jamon Holmgren 💻 🤔 👀 📖 🚧 ⚠️ 💡 💬	Andrei Pfeiffer 💻 👀 🤔	Michael Diarmid 💻 👀 🤔 🔧	Scott Mathson 💻 📖	Margaret 💻 📖	Jordan Sexton 💻 📖
Malcolm Scruggs 💻 🔧 ⚠️	Momazo7u7 📖	Marco 📖	Julien Eluard 📖	Jian Wei 💻 📖	Sergei Butko 📖	TMomemt 💻
Eric Lewis 💻 📖	Daniel Vicory 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

Translations

This readme is available in:

• Brazilian portuguese

// 从上游仓库 fetch 分支和提交点，提交给本地 master，并会被存储在一个本地分支
git fetch upstream
// 把 upstream/master 分支合并到本地 master 上，这样就完成了同步，并且不会丢掉本地修改的内容
git merge upstream/master