diff --git a/js/WKWebView.ios.js b/js/WKWebView.ios.js index d51ccc0..772fe37 100644 --- a/js/WKWebView.ios.js +++ b/js/WKWebView.ios.js @@ -15,9 +15,9 @@ import { requireNativeComponent } from 'react-native'; import type {DataDetectorTypes} from './WebViewTypes'; -const RCTWKWebView = requireNativeComponent('RCTWKWebView'); +const RNCWKWebView = requireNativeComponent('RNCWKWebView'); -type RCTWKWebViewProps = $ReadOnly<{| +type RNCWKWebViewProps = $ReadOnly<{| allowsInlineMediaPlayback?: ?boolean, mediaPlaybackRequiresUserAction?: ?boolean, dataDetectorTypes?: @@ -25,21 +25,21 @@ type RCTWKWebViewProps = $ReadOnly<{| | $ReadOnlyArray, |}>; -class WKWebView extends React.Component { - componentWillReceiveProps(nextProps: RCTWKWebViewProps) { +class WKWebView extends React.Component { + componentWillReceiveProps(nextProps: RNCWKWebViewProps) { this.showRedboxOnPropChanges(nextProps, 'allowsInlineMediaPlayback'); this.showRedboxOnPropChanges(nextProps, 'mediaPlaybackRequiresUserAction'); this.showRedboxOnPropChanges(nextProps, 'dataDetectorTypes'); } - showRedboxOnPropChanges(nextProps: RCTWKWebViewProps, propName: string) { + showRedboxOnPropChanges(nextProps: RNCWKWebViewProps, propName: string) { if (this.props[propName] !== nextProps[propName]) { console.error(`Changes to property ${propName} do nothing after the initial render.`); } } render() { - return ; + return ; } } diff --git a/js/WebView.ios.js b/js/WebView.ios.js index 1b1c23a..daaa06c 100644 --- a/js/WebView.ios.js +++ b/js/WebView.ios.js @@ -51,11 +51,10 @@ function processDecelerationRate(decelerationRate) { return decelerationRate; } -const RCTUIWebViewManager = NativeModules.UIWebViewManager; -const RCTWKWebViewManager = NativeModules.WKWebViewManager; +const RNCUIWebViewManager = NativeModules.RNCUIWebViewManager; +const RNCWKWebViewManager = NativeModules.RNCWKWebViewManager; const BGWASH = 'rgba(255,255,255,0.8)'; -const RCT_WEBVIEW_REF = 'webview'; const WebViewState = keyMirror({ IDLE: null, @@ -143,6 +142,8 @@ class WebView extends React.Component { startInLoadingState: true, }; + webViewRef = React.createRef(); + UNSAFE_componentWillMount() { if (this.props.startInLoadingState) { this.setState({ viewState: WebViewState.LOADING }); @@ -181,7 +182,7 @@ class WebView extends React.Component { ); } else if (this.state.viewState !== WebViewState.IDLE) { console.error( - 'RCTWebView invalid state encountered: ' + this.state.viewState, + 'RNCWebView invalid state encountered: ' + this.state.viewState, ); } @@ -199,9 +200,9 @@ class WebView extends React.Component { let viewManager = nativeConfig.viewManager; if (this.props.useWebKit) { - viewManager = viewManager || RCTWKWebViewManager; + viewManager = viewManager || RNCWKWebViewManager; } else { - viewManager = viewManager || RCTUIWebViewManager; + viewManager = viewManager || RNCUIWebViewManager; } const compiledWhitelist = [ @@ -247,14 +248,14 @@ class WebView extends React.Component { let NativeWebView = nativeConfig.component; if (this.props.useWebKit) { - NativeWebView = NativeWebView || RCTWKWebView; + NativeWebView = NativeWebView || RNCWKWebView; } else { - NativeWebView = NativeWebView || RCTWebView; + NativeWebView = NativeWebView || RNCUIWebView; } const webView = ( { _getCommands() { if (!this.props.useWebKit) { - return UIManager.RCTWebView.Commands; + return UIManager.RNCUIWebView.Commands; } - return UIManager.RCTWKWebView.Commands; + return UIManager.RNCWKWebView.Commands; } /** @@ -389,7 +390,7 @@ class WebView extends React.Component { * Returns the native `WebView` node. */ getWebViewHandle = () => { - return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]); + return ReactNative.findNodeHandle(webViewRef.current); }; _onLoadingStart = (event: WebViewNavigationEvent) => { @@ -451,8 +452,8 @@ class WebView extends React.Component { } } -const RCTWebView = requireNativeComponent('RCTWebView'); -const RCTWKWebView = requireNativeComponent('RCTWKWebView'); +const RNCUIWebView = requireNativeComponent('RNCUIWebView'); +const RNCWKWebView = requireNativeComponent('RNCWKWebView'); const styles = StyleSheet.create({ container: {