|
@@ -3,9 +3,11 @@
|
3
|
3
|
|
4
|
4
|
**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)).
|
5
|
5
|
|
6
|
|
-> We just swapped out the React Native WebView in our app with the version from React Native Community. The swap took less than a day, required almost no code modifications, and is faster and CSS works better. Props to everyone in the community (including those at Infinite Red) that helped get that component split out.
|
|
6
|
+## Core Maintainers - Sponsoring companies
|
|
7
|
+_This project is maintained for free by these people using both their free time and their company work time._
|
7
|
8
|
|
8
|
|
-_Garrett McCullough, mobile engineer at Virta Health_
|
|
9
|
+- [Thibault Malbranche](https://github.com/Titozzz) ([Twitter @titozzz](https://twitter.com/titozzz)) from [Brigad](https://brigad.co/about)
|
|
10
|
+- [Jamon Holmgren](https://github.com/jamonholmgren) ([Twitter @jamonholmgren](https://twitter.com/jamonholmgren)) from [Infinite Red](https://infinite.red/react-native)
|
9
|
11
|
|
10
|
12
|
## Platforms Supported
|
11
|
13
|
|
|
@@ -14,18 +16,28 @@ _Garrett McCullough, mobile engineer at Virta Health_
|
14
|
16
|
|
15
|
17
|
_Note: React Native WebView is not currently supported by Expo unless you "eject"._
|
16
|
18
|
|
|
19
|
+## Getting Started
|
|
20
|
+
|
|
21
|
+Read our [Getting Started Guide]. If any step seems unclear, please create a detailed issue.
|
|
22
|
+
|
17
|
23
|
## Versioning
|
18
|
24
|
|
19
|
|
-If you need the exact same WebView as the one from react-native, please use version **2.0.0**. Future versions will follow [semantic versioning](https://semver.org/).
|
|
25
|
+This project follows [semantic versioning](https://semver.org/). We do not hesitate to release breaking changes but they will be in a major version.
|
20
|
26
|
|
21
|
|
-## Getting Started
|
|
27
|
+**Breaking History:**
|
22
|
28
|
|
23
|
|
-```
|
24
|
|
-$ yarn add react-native-webview
|
25
|
|
-$ react-native link react-native-webview
|
26
|
|
-```
|
|
29
|
+- [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
|
|
30
|
+- [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).
|
|
31
|
+- [4.0.0](https://github.com/react-native-community/react-native-webview/releases/tag/v4.0.0) - Added cache (enabled by default).
|
|
32
|
+- [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.
|
27
|
33
|
|
28
|
|
-Read our [Getting Started Guide](./docs/Getting-Started.md) for more.
|
|
34
|
+**Upcoming:**
|
|
35
|
+
|
|
36
|
+- UIWebView removal
|
|
37
|
+- this.webView.postMessage() removal (never documented and less flexible than injectJavascript)
|
|
38
|
+- Typescript rewrite
|
|
39
|
+- Kotlin rewrite
|
|
40
|
+- Maybe Swift rewrite
|
29
|
41
|
|
30
|
42
|
## Usage
|
31
|
43
|
|
|
@@ -41,8 +53,7 @@ class MyWebComponent extends Component {
|
41
|
53
|
render() {
|
42
|
54
|
return (
|
43
|
55
|
<WebView
|
44
|
|
- source={{ uri: "https://infinite.red/react-native" }}
|
45
|
|
- style={{ marginTop: 20 }}
|
|
56
|
+ source={{ uri: "https://facebook.github.io/react-native/" }}
|
46
|
57
|
/>
|
47
|
58
|
);
|
48
|
59
|
}
|
|
@@ -51,11 +62,7 @@ class MyWebComponent extends Component {
|
51
|
62
|
|
52
|
63
|
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).
|
53
|
64
|
|
54
|
|
-## Migrate from React Native core WebView to React Native WebView
|
55
|
|
-
|
56
|
|
-Simply install React Native WebView and then use it in place of the core WebView. Their APIs are currently identical, except that this package defaults `useWebKit={true}` unlike the built-in WebView.
|
57
|
|
-
|
58
|
|
-## Troubleshooting
|
|
65
|
+## Common issues
|
59
|
66
|
|
60
|
67
|
- 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
|
61
|
68
|
- There's a [problem](https://stackoverflow.com/questions/52872045/rendering-webview-on-android-device-overlaps-previous-siblings-from-same-parent) 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`.
|
|
@@ -64,12 +71,6 @@ Simply install React Native WebView and then use it in place of the core WebView
|
64
|
71
|
|
65
|
72
|
See [Contributing.md](https://github.com/react-native-community/react-native-webview/blob/master/docs/Contributing.md)
|
66
|
73
|
|
67
|
|
-## Maintainers
|
68
|
|
-
|
69
|
|
-- [Jamon Holmgren](https://github.com/jamonholmgren) ([Twitter @jamonholmgren](https://twitter.com/jamonholmgren)) from [Infinite Red](https://infinite.red/react-native)
|
70
|
|
-- [Thibault Malbranche](https://github.com/Titozzz) ([Twitter @titozzz](https://twitter.com/titozzz)) from [Brigad](https://brigad.co/about)
|
71
|
|
-- [Empyrical](https://github.com/empyrical) ([Twitter @empyrical](https://twitter.com/empyrical))
|
72
|
|
-
|
73
|
74
|
## Contributors
|
74
|
75
|
|
75
|
76
|
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key-)):
|