diff --git a/README.md b/README.md index 6641698..318f273 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,6 @@ _Garrett McCullough, mobile engineer at Virta Health_ - [x] iOS (both UIWebView and WKWebView) - [x] Android -- [ ] Windows 10 (coming soon) _Note: React Native WebView is not currently supported by Expo unless you "eject"._ @@ -44,7 +43,6 @@ class MyWebComponent extends Component { console.log(e.nativeEvent.progress)} /> ); } @@ -61,16 +59,9 @@ Simply install React Native WebView and then use it in place of the core WebView - 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 -### Contributor Notes +## Contributing -- I've removed all PropTypes for now. Instead, we'll be using Flow types. TypeScript types will be added at a later date. -- UIWebView is not tested fully and you will encounter some yellow warning boxes. Since it is deprecated, we don't intend to put a lot of time into supporting it, but feel free to submit PRs if you have a special use case. Note that you will need to specify `useWebKit={false}` to use UIWebView -- After pulling this repo and installing all dependencies, you can run flow on iOS and Android-specific files using the commands: - - `yarn test:ios:flow` for iOS - - `yarn test:android:flow` for Android -- If you want to add another React Native platform to this repository, you will need to create another `.flowconfig` for it. If your platform is `example`, copy the main flowconfig and rename it to `.flowconfig.example`. Then edit the config to ignore other platforms, and add `.*/*[.]example.js` to the ignore lists of the other platforms. Then add an entry to `package.json` like this: - - `"test:example:flow": "flow check --flowconfig-name .flowconfig.example"` -- Currently you need to install React Native 0.57 to be able to test these types - `flow check` will not pass against 0.56. +See [Contributing.md](https://github.com/react-native-community/react-native-webview/blob/master/docs/Contributing.md) ## Maintainers diff --git a/js/WebView.android.js b/js/WebView.android.js index defef94..ec959ee 100644 --- a/js/WebView.android.js +++ b/js/WebView.android.js @@ -194,10 +194,19 @@ class WebView extends React.Component { ); } + getViewManagerConfig = (viewManagerName: string) => { + if (!UIManager.getViewManagerConfig) { + return UIManager[viewManagerName]; + } + return UIManager.getViewManagerConfig(viewManagerName); + }; + + getCommands = () => this.getViewManagerConfig('RNCWebView').Commands; + goForward = () => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), - UIManager.RNCWebView.Commands.goForward, + this.getCommands().goForward, null, ); }; @@ -205,7 +214,7 @@ class WebView extends React.Component { goBack = () => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), - UIManager.RNCWebView.Commands.goBack, + this.getCommands().goBack, null, ); }; @@ -216,7 +225,7 @@ class WebView extends React.Component { }); UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), - UIManager.RNCWebView.Commands.reload, + this.getCommands().reload, null, ); }; @@ -224,7 +233,7 @@ class WebView extends React.Component { stopLoading = () => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), - UIManager.RNCWebView.Commands.stopLoading, + this.getCommands().stopLoading, null, ); }; @@ -232,7 +241,7 @@ class WebView extends React.Component { postMessage = (data: string) => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), - UIManager.RNCWebView.Commands.postMessage, + this.getCommands().postMessage, [String(data)], ); }; @@ -246,7 +255,7 @@ class WebView extends React.Component { injectJavaScript = (data: string) => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), - UIManager.RNCWebView.Commands.injectJavaScript, + this.getCommands().injectJavaScript, [data], ); }; @@ -311,7 +320,7 @@ class WebView extends React.Component { if (shouldStart) { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), - UIManager.RNCWebView.Commands.loadUrl, + this.getCommands().loadUrl, [String(url)], ); } diff --git a/js/WebView.ios.js b/js/WebView.ios.js index 88adb79..b724b5a 100644 --- a/js/WebView.ios.js +++ b/js/WebView.ios.js @@ -41,7 +41,7 @@ import type { } from './WebViewTypes'; const resolveAssetSource = Image.resolveAssetSource; - +let didWarnAboutUIWebViewUsage = false; // Imported from https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/processDecelerationRate.js function processDecelerationRate(decelerationRate) { if (decelerationRate === 'normal') { @@ -153,6 +153,13 @@ class WebView extends React.Component { webViewRef = React.createRef(); UNSAFE_componentWillMount() { + if (!this.props.useWebKit && !didWarnAboutUIWebViewUsage) { + didWarnAboutUIWebViewUsage = true; + console.warn( + 'UIWebView is deprecated and will be removed soon, please use WKWebView (do not override useWebkit={true} prop),' + + ' more infos here: https://github.com/react-native-community/react-native-webview/issues/312', + ); + } if ( this.props.useWebKit === true && this.props.scalesPageToFit !== undefined @@ -289,13 +296,17 @@ class WebView extends React.Component { ); } - _getCommands() { - if (!this.props.useWebKit) { - return UIManager.RNCUIWebView.Commands; + _getViewManagerConfig = (viewManagerName: string) => { + if (!UIManager.getViewManagerConfig) { + return UIManager[viewManagerName]; } + return UIManager.getViewManagerConfig(viewManagerName); + }; - return UIManager.RNCWKWebView.Commands; - } + _getCommands = () => + !this.props.useWebKit + ? this._getViewManagerConfig('RNCUIWebView').Commands + : this._getViewManagerConfig('RNCWKWebView').Commands; /** * Go forward one page in the web view's history. diff --git a/package.json b/package.json index 1abea80..c8504b2 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "Thibault Malbranche " ], "license": "MIT", - "version": "5.0.2", + "version": "5.0.5", "homepage": "https://github.com/react-native-community/react-native-webview#readme", "scripts": { "test:js": "jest", @@ -37,7 +37,7 @@ "flow-bin": "^0.80.0", "jest": "^24.0.0", "metro-react-native-babel-preset": "^0.51.1", - "react-native": "^0.57", + "react-native": ">=0.57 <0.59", "semantic-release": "15.10.3" }, "repository": {