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
2019-08-30 10:04:32 +00:00
[](https://github.com/react-native-community/react-native-webview)
[](http://makeapullrequest.com)
[](#contributors)
2019-06-21 22:24:19 +00:00
[](https://snyk.io/test/github/react-native-community/react-native-webview)
2020-01-07 01:34:15 +00:00
[](https://www.npmjs.com/package/react-native-webview)
[][lean-core-issue]
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
2019-08-30 10:04:32 +00:00
- [x] iOS
2018-10-12 23:03:00 +00:00
- [x] Android
2020-02-12 23:39:11 +00:00
- [x] macOS
2020-03-17 02:30:25 +00:00
- [x] Windows
2018-08-13 04:52:47 +00:00
2019-06-21 22:04:17 +00:00
_Note: Expo support for React Native WebView started with [Expo SDK v33.0.0 ](https://blog.expo.io/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c )._
2018-11-19 10:28:55 +00:00
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-04-15 07:53:50 +00:00
Current Version: 
2020-09-25 16:27:30 +00:00
- [10.0.0 ](https://github.com/react-native-community/react-native-webview/releases/tag/v10.0.0 ) - Android Gradle plugin is only required when opening the project stand-alone
- [9.0.0 ](https://github.com/react-native-community/react-native-webview/releases/tag/v9.0.0 ) - props updates to injectedJavaScript are no longer immutable.
2019-12-27 10:40:37 +00:00
- [8.0.0 ](https://github.com/react-native-community/react-native-webview/releases/tag/v8.0.0 ) - onNavigationStateChange now triggers with hash url changes
2019-08-30 10:18:44 +00:00
- [7.0.1 ](https://github.com/react-native-community/react-native-webview/releases/tag/v7.0.1 ) - Removed UIWebView
2019-05-19 22:36:51 +00:00
- [6.0.**2** ](https://github.com/react-native-community/react-native-webview/releases/tag/v6.0.2 ) - Update to AndroidX. Make sure to enable it in your project's `android/gradle.properties` . See [Getting Started Guide ](docs/Getting-Started.md ).
2019-03-01 00:18:58 +00:00
- [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.
2019-04-15 07:53:50 +00:00
- [4.0.0 ](https://github.com/react-native-community/react-native-webview/releases/tag/v4.0.0 ) - Added cache (enabled by default).
- [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).
- [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
2018-08-13 04:52:47 +00:00
2019-03-01 00:18:58 +00:00
**Upcoming:**
2019-09-02 21:30:46 +00:00
- this.webView.postMessage() removal (never documented and less flexible than injectJavascript) -> [how to migrate ](https://github.com/react-native-community/react-native-webview/issues/809 )
2019-03-01 00:18:58 +00:00
- 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() {
2020-02-26 06:54:06 +00:00
return < WebView source = {{ uri: ' https: / / reactnative . dev / ' } } / > ;
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
2019-08-30 10:04:32 +00:00
- 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
2018-11-19 10:28:55 +00:00
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-05-17 07:28:05 +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-03-21 14:31:14 +00:00
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
2019-11-12 08:48:24 +00:00
2020-05-28 23:55:00 +00:00
## Translations
2019-11-12 08:48:24 +00:00
This readme is available in:
- [Brazilian portuguese ](docs/README.portuguese.md )
2020-01-07 01:34:15 +00:00
[lean-core-issue]: https://github.com/facebook/react-native/issues/23313
