96f0f28e1d | ||
---|---|---|
.circleci | ||
android | ||
bin | ||
docs | ||
ios | ||
js | ||
typings | ||
.all-contributorsrc | ||
.flowconfig | ||
.flowconfig.android | ||
.gitignore | ||
.releaserc | ||
LICENSE | ||
README.md | ||
babel.config.js | ||
index.js | ||
jest.config.js | ||
package.json | ||
react-native-webview.podspec | ||
yarn.lock |
README.md
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)
- Typescript rewrite
- 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://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 runreact-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):
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT