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

Platforms Supported

• iOS (both UIWebView and WKWebView)
• Android

Note: React Native WebView is not currently supported by Expo unless you "eject".

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:

• 2.0.0 - First release this is a replica of the core webview component
• 3.0.0 - WKWebview: Add shared process pool so cookies and localStorage are shared across webviews in iOS (enabled by default).
• 4.0.0 - Added cache (enabled by default).
• 5.0.1 - Refactored the old postMessage implementation for communication from webview to native.

Upcoming:

• UIWebView removal
• this.webView.postMessage() removal (never documented and less flexible than injectJavascript)
• Kotlin rewrite
• Maybe Swift rewrite

Usage

Import the WebView component from react-native-webview and use it like so:

importReact,{Component}from"react";import{StyleSheet,Text,View}from"react-native";import{WebView}from"react-native-webview";// ...classMyWebComponentextendsComponent{render(){return(<WebViewsource={{uri: "https://facebook.github.io/react-native/"}}/>);}}

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 "RNCWKWebView does not exist" it likely means you forgot to run react-native link or there was some error with the linking process
• There's a problem on some Android devices where the webview could overlap previous siblings from same parent. To fix this, wrap the WebView in a View with style overflow: hidden.

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 📖

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

License

MIT