2018-08-16 02:23:26 +00:00
# React Native WebView - a Modern, Cross-Platform WebView for React Native
2019-04-02 14:05:56 +00:00
[![star this repo ](http://githubbadges.com/star.svg?user=react-native-community&repo=react-native-webview&style=flat )](https://github.com/react-native-community/react-native-webview) [![PRs Welcome ](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square )](http://makeapullrequest.com) [![All Contributors ](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square )](#contributors) [![Known Vulnerabilities ](https://snyk.io/test/github/react-native-community/react-native-webview/badge.svg?style=flat-square )](https://snyk.io/test/github/react-native-community/react-native-webview)
2018-08-13 04:52:47 +00:00
2018-09-08 17:42:02 +00:00
**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 ](https://github.com/react-native-community/discussions-and-proposals/pull/3 )).
2018-08-13 04:52:47 +00:00
2019-03-01 00:18:58 +00:00
## Core Maintainers - Sponsoring companies
2019-04-02 14:05:56 +00:00
2019-03-01 00:18:58 +00:00
_This project is maintained for free by these people using both their free time and their company work time._
2019-01-02 09:07:25 +00:00
2019-03-01 00:18:58 +00:00
- [Thibault Malbranche ](https://github.com/Titozzz ) ([Twitter @titozzz ](https://twitter.com/titozzz)) from [Brigad ](https://brigad.co/about )
- [Jamon Holmgren ](https://github.com/jamonholmgren ) ([Twitter @jamonholmgren ](https://twitter.com/jamonholmgren)) from [Infinite Red ](https://infinite.red/react-native )
2019-01-02 09:07:25 +00:00
2018-08-13 04:52:47 +00:00
## Platforms Supported
2018-10-12 23:03:00 +00:00
- [x] iOS (both UIWebView and WKWebView)
- [x] Android
2018-08-13 04:52:47 +00:00
2018-11-19 10:28:55 +00:00
_Note: React Native WebView is not currently supported by Expo unless you "eject"._
2019-03-01 00:18:58 +00:00
## Getting Started
2019-03-01 07:53:37 +00:00
Read our [Getting Started Guide ](docs/Getting-Started.md ). If any step seems unclear, please create a detailed issue.
2019-03-01 00:18:58 +00:00
2018-10-12 23:43:17 +00:00
## Versioning
2018-10-12 23:03:00 +00:00
2019-03-01 00:18:58 +00:00
This project follows [semantic versioning ](https://semver.org/ ). We do not hesitate to release breaking changes but they will be in a major version.
2018-10-12 23:03:00 +00:00
2019-03-01 00:18:58 +00:00
**Breaking History:**
2018-09-09 00:11:32 +00:00
2019-03-01 00:18:58 +00:00
- [2.0.0 ](https://github.com/react-native-community/react-native-webview/releases/tag/v2.0.0 ) - First release this is a replica of the core webview component
- [3.0.0 ](https://github.com/react-native-community/react-native-webview/releases/tag/v3.0.0 ) - WKWebview: Add shared process pool so cookies and localStorage are shared across webviews in iOS (enabled by default).
- [4.0.0 ](https://github.com/react-native-community/react-native-webview/releases/tag/v4.0.0 ) - Added cache (enabled by default).
- [5.0.**1** ](https://github.com/react-native-community/react-native-webview/releases/tag/v5.0.0 ) - Refactored the old postMessage implementation for communication from webview to native.
2018-08-13 04:52:47 +00:00
2019-03-01 00:18:58 +00:00
**Upcoming:**
- UIWebView removal
- this.webView.postMessage() removal (never documented and less flexible than injectJavascript)
- Kotlin rewrite
- Maybe Swift rewrite
2018-09-20 02:27:09 +00:00
2018-08-13 04:52:47 +00:00
## Usage
2018-08-16 02:23:26 +00:00
Import the `WebView` component from `react-native-webview` and use it like so:
2018-08-13 04:52:47 +00:00
```jsx
2019-04-02 14:05:56 +00:00
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
2018-08-13 04:52:47 +00:00
// ...
class MyWebComponent extends Component {
2018-10-12 23:03:00 +00:00
render() {
2018-08-13 04:52:47 +00:00
return (
2019-04-02 14:05:56 +00:00
< WebView source = {{ uri: ' https: / / facebook . github . io / react-native / ' } } / >
2018-10-12 23:03:00 +00:00
);
2018-08-13 04:52:47 +00:00
}
}
```
2018-11-19 10:32:22 +00:00
For more, read the [API Reference ](./docs/Reference.md ) and [Guide ](./docs/Guide.md ). If you're interested in contributing, check out the [Contributing Guide ](./docs/Contributing.md ).
2018-08-13 04:52:47 +00:00
2019-03-01 00:18:58 +00:00
## Common issues
2018-11-19 10:28:55 +00:00
- 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
2019-02-05 14:15:02 +00:00
## Contributing
2018-09-08 17:42:02 +00:00
2019-02-05 14:15:02 +00:00
See [Contributing.md ](https://github.com/react-native-community/react-native-webview/blob/master/docs/Contributing.md )
2018-09-08 17:42:02 +00:00
2019-01-18 16:48:06 +00:00
## Contributors
2019-01-30 08:52:44 +00:00
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key-)):
2019-01-18 16:48:06 +00:00
<!-- ALL - CONTRIBUTORS - LIST:START - Do not remove or modify this section -->
<!-- prettier - ignore -->
2019-03-21 14:31:14 +00:00
< table > < tr > < td align = "center" > < a href = "https://twitter.com/titozzz" > < img src = "https://avatars1.githubusercontent.com/u/6181446?v=4" width = "100px;" alt = "Thibault Malbranche" / > < br / > < sub > < b > Thibault Malbranche< / b > < / sub > < / a > < br / > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=titozzz" title = "Code" > 💻< / a > < a href = "#ideas-titozzz" title = "Ideas, Planning, & Feedback" > 🤔< / a > < a href = "#review-titozzz" title = "Reviewed Pull Requests" > 👀< / a > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=titozzz" title = "Documentation" > 📖< / a > < a href = "#maintenance-titozzz" title = "Maintenance" > 🚧< / a > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=titozzz" title = "Tests" > ⚠️< / a > < a href = "#infra-titozzz" title = "Infrastructure (Hosting, Build-Tools, etc)" > 🚇< / a > < a href = "#question-titozzz" title = "Answering Questions" > 💬< / a > < / td > < td align = "center" > < a href = "https://jamonholmgren.com" > < img src = "https://avatars3.githubusercontent.com/u/1479215?v=4" width = "100px;" alt = "Jamon Holmgren" / > < br / > < sub > < b > Jamon Holmgren< / b > < / sub > < / a > < br / > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=jamonholmgren" title = "Code" > 💻< / a > < a href = "#ideas-jamonholmgren" title = "Ideas, Planning, & Feedback" > 🤔< / a > < a href = "#review-jamonholmgren" title = "Reviewed Pull Requests" > 👀< / a > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=jamonholmgren" title = "Documentation" > 📖< / a > < a href = "#maintenance-jamonholmgren" title = "Maintenance" > 🚧< / a > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=jamonholmgren" title = "Tests" > ⚠️< / a > < a href = "#example-jamonholmgren" title = "Examples" > 💡< / a > < a href = "#question-jamonholmgren" title = "Answering Questions" > 💬< / a > < / td > < td align = "center" > < a href = "https://github.com/andreipfeiffer" > < img src = "https://avatars1.githubusercontent.com/u/2570562?v=4" width = "100px;" alt = "Andrei Pfeiffer" / > < br / > < sub > < b > Andrei Pfeiffer< / b > < / sub > < / a > < br / > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=andreipfeiffer" title = "Code" > 💻< / a > < a href = "#review-andreipfeiffer" title = "Reviewed Pull Requests" > 👀< / a > < a href = "#ideas-andreipfeiffer" title = "Ideas, Planning, & Feedback" > 🤔< / a > < / td > < td align = "center" > < a href = "https://twitter.com/mikediarmid" > < img src = "https://avatars0.githubusercontent.com/u/5347038?v=4" width = "100px;" alt = "Michael Diarmid" / > < br / > < sub > < b > Michael Diarmid< / b > < / sub > < / a > < br / > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=Salakar" title = "Code" > 💻< / a > < a href = "#review-Salakar" title = "Reviewed Pull Requests" > 👀< / a > < a href = "#ideas-Salakar" title = "Ideas, Planning, & Feedback" > 🤔< / a > < a href = "#tool-Salakar" title = "Tools" > 🔧< / a > < / td > < td align = "center" > < a href = "http://smathson.github.io" > < img src = "https://avatars3.githubusercontent.com/u/932981?v=4" width = "100px;" alt = "Scott Mathson" / > < br / > < sub > < b > Scott Mathson< / b > < / sub > < / a > < br / > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=smathson" title = "Code" > 💻< / a > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=smathson" title = "Documentation" > 📖< / a > < / td > < td align = "center" > < a href = "https://github.com/YangXiaomei" > < img src = "https://avatars0.githubusercontent.com/u/8221990?v=4" width = "100px;" alt = "Margaret" / > < br / > < sub > < b > Margaret< / b > < / sub > < / a > < br / > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=YangXiaomei" title = "Code" > 💻< / a > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=YangXiaomei" title = "Documentation" > 📖< / a > < / td > < td align = "center" > < a href = "https://stylisted.com" > < img src = "https://avatars2.githubusercontent.com/u/1173161?v=4" width = "100px;" alt = "Jordan Sexton" / > < br / > < sub > < b > Jordan Sexton< / b > < / sub > < / a > < br / > < a href = "https://github.com/react-native-community/react-native-webview/commits?author=jordansexton" t
2019-01-18 16:48:06 +00:00
<!-- ALL - CONTRIBUTORS - LIST:END -->
This project follows the [all-contributors ](https://github.com/all-contributors/all-contributors ) specification. Contributions of any kind welcome!
2018-08-13 04:52:47 +00:00
## License
MIT