From 27974e8c3fd422fd29de330d354496459173bc78 Mon Sep 17 00:00:00 2001 From: Vincent Hoen Date: Fri, 18 Aug 2017 10:05:09 +0100 Subject: [PATCH 1/5] use proptypes components --- webview-bridge/index.android.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webview-bridge/index.android.js b/webview-bridge/index.android.js index bdfe8180..576cd380 100644 --- a/webview-bridge/index.android.js +++ b/webview-bridge/index.android.js @@ -33,7 +33,7 @@ var { WebViewBridgeManager } } = ReactNative; -var { PropTypes } = React; +import PropTypes from 'prop-types'; var RCT_WEBVIEWBRIDGE_REF = 'webviewbridge'; @@ -230,4 +230,4 @@ var styles = StyleSheet.create({ }, }); -module.exports = WebViewBridge; \ No newline at end of file +module.exports = WebViewBridge; From 97913ae0d761c2576a226f83bbaf8a5b9f914e09 Mon Sep 17 00:00:00 2001 From: Vincent Hoen Date: Fri, 18 Aug 2017 10:44:48 +0100 Subject: [PATCH 2/5] removing createClass & React.PropTypes --- webview-bridge/index.android.js | 70 +++++++++++++-------------- webview-bridge/index.ios.js | 83 +++++++++++++++++---------------- 2 files changed, 77 insertions(+), 76 deletions(-) diff --git a/webview-bridge/index.android.js b/webview-bridge/index.android.js index 576cd380..82605483 100644 --- a/webview-bridge/index.android.js +++ b/webview-bridge/index.android.js @@ -19,6 +19,7 @@ var invariant = require('invariant'); var keyMirror = require('keymirror'); var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource'); +var { Component } = React; var { ReactNativeViewAttributes, UIManager, @@ -48,27 +49,18 @@ var RCTWebViewBridge = requireNativeComponent('RCTWebViewBridge', WebViewBridge) /** * Renders a native WebView. */ -var WebViewBridge = React.createClass({ +class WebViewBridge extends Component{ - propTypes: { - ...RCTWebViewBridge.propTypes, - - /** - * Will be called once the message is being sent from webview - */ - onBridgeMessage: PropTypes.func, - }, - - getInitialState: function() { + getInitialState() { return { viewState: WebViewBridgeState.IDLE, lastErrorEvent: null, startInLoadingState: true, }; - }, + } - componentWillMount: function() { + componentWillMount() { DeviceEventEmitter.addListener("webViewBridgeMessage", (body) => { const { onBridgeMessage } = this.props; const message = body.message; @@ -80,9 +72,9 @@ var WebViewBridge = React.createClass({ if (this.props.startInLoadingState) { this.setState({viewState: WebViewBridgeState.LOADING}); } - }, + } - render: function() { + render() { var otherView = null; if (this.state.viewState === WebViewBridgeState.LOADING) { @@ -136,67 +128,67 @@ var WebViewBridge = React.createClass({ {otherView} ); - }, + } onMessage(event) { if (this.props.onBridgeMessage != null && event.nativeEvent != null) { this.props.onBridgeMessage(event.nativeEvent.message) } - }, + } - goForward: function() { + goForward() { UIManager.dispatchViewManagerCommand( this.getWebViewBridgeHandle(), UIManager.RCTWebViewBridge.Commands.goForward, null ); - }, + } - goBack: function() { + goBack() { UIManager.dispatchViewManagerCommand( this.getWebViewBridgeHandle(), UIManager.RCTWebViewBridge.Commands.goBack, null ); - }, + } - reload: function() { + reload() { UIManager.dispatchViewManagerCommand( this.getWebViewBridgeHandle(), UIManager.RCTWebViewBridge.Commands.reload, null ); - }, + } - sendToBridge: function (message: string) { + sendToBridge (message: string) { UIManager.dispatchViewManagerCommand( this.getWebViewBridgeHandle(), UIManager.RCTWebViewBridge.Commands.sendToBridge, [message] ); - }, + } /** * We return an event with a bunch of fields including: * url, title, loading, canGoBack, canGoForward */ - updateNavigationState: function(event) { + updateNavigationState(event) { if (this.props.onNavigationStateChange) { this.props.onNavigationStateChange(event.nativeEvent); } - }, + } - getWebViewBridgeHandle: function() { + getWebViewBridgeHandle() { return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEWBRIDGE_REF]); - }, + } - onLoadingStart: function(event) { + onLoadingStart(event) { var onLoadStart = this.props.onLoadStart; onLoadStart && onLoadStart(event); this.updateNavigationState(event); - }, + } - onLoadingError: function(event) { + onLoadingError(event) { event.persist(); // persist this event because we need to store it var {onError, onLoadEnd} = this.props; onError && onError(event); @@ -206,7 +198,7 @@ var WebViewBridge = React.createClass({ lastErrorEvent: event.nativeEvent, viewState: WebViewBridgeState.ERROR }); - }, + } onLoadingFinish: function(event) { var {onLoad, onLoadEnd} = this.props; @@ -216,9 +208,17 @@ var WebViewBridge = React.createClass({ viewState: WebViewBridgeState.IDLE, }); this.updateNavigationState(event); - }, -}); + } +}; + +WebViewBridge.propTypes = { + ...RCTWebViewBridge.propTypes, + /** + * Will be called once the message is being sent from webview + */ + onBridgeMessage: PropTypes.func, +}; var styles = StyleSheet.create({ container: { diff --git a/webview-bridge/index.ios.js b/webview-bridge/index.ios.js index b47dc338..c779a987 100644 --- a/webview-bridge/index.ios.js +++ b/webview-bridge/index.ios.js @@ -20,6 +20,7 @@ var invariant = require('invariant'); var keyMirror = require('keymirror'); var resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource'); +var { Component } = React; var { ActivityIndicator, EdgeInsetsPropType, @@ -33,7 +34,7 @@ var { WebViewBridgeManager } } = ReactNative; -var { PropTypes } = React; +import PropTypes from 'prop-types'; var BGWASH = 'rgba(255,255,255,0.8)'; var RCT_WEBVIEWBRIDGE_REF = 'webviewbridge'; @@ -90,40 +91,27 @@ var defaultRenderError = (errorDomain, errorCode, errorDesc) => ( /** * Renders a native WebView. */ -var WebViewBridge = React.createClass({ +class WebViewBridge extends Component { statics: { JSNavigationScheme: JSNavigationScheme, NavigationType: NavigationType, - }, - - propTypes: { - ...WebView.propTypes, - - /** - * Will be called once the message is being sent from webview - */ - onBridgeMessage: PropTypes.func, - - hideKeyboardAccessoryView: PropTypes.bool, - - keyboardDisplayRequiresUserAction: PropTypes.bool, - }, + } - getInitialState: function() { + getInitialState() { return { viewState: WebViewBridgeState.IDLE, lastErrorEvent: (null: ?ErrorEvent), startInLoadingState: true, }; - }, + } - componentWillMount: function() { + componentWillMount() { if (this.props.startInLoadingState) { this.setState({viewState: WebViewBridgeState.LOADING}); } - }, + } - render: function() { + render() { var otherView = null; if (this.state.viewState === WebViewBridgeState.LOADING) { @@ -202,57 +190,57 @@ var WebViewBridge = React.createClass({ {otherView} ); - }, + } - goForward: function() { + goForward() { UIManager.dispatchViewManagerCommand( this.getWebViewBridgeHandle(), UIManager.RCTWebViewBridge.Commands.goForward, null ); - }, + } - goBack: function() { + goBack() { UIManager.dispatchViewManagerCommand( this.getWebViewBridgeHandle(), UIManager.RCTWebViewBridge.Commands.goBack, null ); - }, + } - reload: function() { + reload() { UIManager.dispatchViewManagerCommand( this.getWebViewBridgeHandle(), UIManager.RCTWebViewBridge.Commands.reload, null ); - }, + } - sendToBridge: function (message: string) { + sendToBridge (message: string) { WebViewBridgeManager.sendToBridge(this.getWebViewBridgeHandle(), message); - }, + } /** * We return an event with a bunch of fields including: * url, title, loading, canGoBack, canGoForward */ - updateNavigationState: function(event: Event) { + updateNavigationState(event: Event) { if (this.props.onNavigationStateChange) { this.props.onNavigationStateChange(event.nativeEvent); } - }, + } - getWebViewBridgeHandle: function(): any { + getWebViewBridgeHandle(): any { return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEWBRIDGE_REF]); - }, + } - onLoadingStart: function(event: Event) { + onLoadingStart(event: Event) { var onLoadStart = this.props.onLoadStart; onLoadStart && onLoadStart(event); this.updateNavigationState(event); - }, + } - onLoadingError: function(event: Event) { + onLoadingError(event: Event) { event.persist(); // persist this event because we need to store it var {onError, onLoadEnd} = this.props; onError && onError(event); @@ -263,9 +251,9 @@ var WebViewBridge = React.createClass({ lastErrorEvent: event.nativeEvent, viewState: WebViewBridgeState.ERROR }); - }, + } - onLoadingFinish: function(event: Event) { + onLoadingFinish(event: Event) { var {onLoad, onLoadEnd} = this.props; onLoad && onLoad(event); onLoadEnd && onLoadEnd(event); @@ -273,8 +261,21 @@ var WebViewBridge = React.createClass({ viewState: WebViewBridgeState.IDLE, }); this.updateNavigationState(event); - }, -}); + } +}; + +WebViewBridge.propTypes = { + ...WebView.propTypes, + + /** + * Will be called once the message is being sent from webview + */ + onBridgeMessage: PropTypes.func, + + hideKeyboardAccessoryView: PropTypes.bool, + + keyboardDisplayRequiresUserAction: PropTypes.bool, +}; var RCTWebViewBridge = requireNativeComponent('RCTWebViewBridge', WebViewBridge, { nativeOnly: { From a5bbbc93ed5b97ef22452e1d09dd9d7e51f487d2 Mon Sep 17 00:00:00 2001 From: Vincent Hoen Date: Fri, 18 Aug 2017 10:52:10 +0100 Subject: [PATCH 3/5] removing createClass & React.PropTypes --- webview-bridge/index.android.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webview-bridge/index.android.js b/webview-bridge/index.android.js index 82605483..3cff989f 100644 --- a/webview-bridge/index.android.js +++ b/webview-bridge/index.android.js @@ -200,7 +200,7 @@ class WebViewBridge extends Component{ }); } - onLoadingFinish: function(event) { + onLoadingFinish(event) { var {onLoad, onLoadEnd} = this.props; onLoad && onLoad(event); onLoadEnd && onLoadEnd(event); From adaf8c87cc569ab31bb7187580328f6e632228ca Mon Sep 17 00:00:00 2001 From: Vincent Hoen Date: Mon, 21 Aug 2017 09:37:27 +0100 Subject: [PATCH 4/5] using prop-types components instead of deprecated React.PropType --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index b15b8d58..3ab238af 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "homepage": "https://github.com/alinz/react-native-webview-bridge", "dependencies": { "invariant": "2.2.0", - "keymirror": "0.1.1" + "keymirror": "0.1.1", + "prop-types": "^15.5.10" } } From 33d9083c373efe9d5abfa728a89a50e7f717d791 Mon Sep 17 00:00:00 2001 From: vhoen Date: Fri, 20 Oct 2017 14:12:12 +0100 Subject: [PATCH 5/5] fixing missing constructor & wrong scope --- webview-bridge/index.android.js | 11 +++++++++-- webview-bridge/index.ios.js | 11 +++++++++-- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/webview-bridge/index.android.js b/webview-bridge/index.android.js index 3cff989f..dcea492d 100644 --- a/webview-bridge/index.android.js +++ b/webview-bridge/index.android.js @@ -50,9 +50,16 @@ var RCTWebViewBridge = requireNativeComponent('RCTWebViewBridge', WebViewBridge) * Renders a native WebView. */ class WebViewBridge extends Component{ + + constructor(props) { + super(props); + + this.onLoadingStart = this.onLoadingStart.bind(this); + this.onLoadingError = this.onLoadingError.bind(this); + this.onLoadingFinish = this.onLoadingFinish.bind(this); + this.onMessage = this.onMessage.bind(this); - getInitialState() { - return { + this.state = { viewState: WebViewBridgeState.IDLE, lastErrorEvent: null, startInLoadingState: true, diff --git a/webview-bridge/index.ios.js b/webview-bridge/index.ios.js index c779a987..9630be1b 100644 --- a/webview-bridge/index.ios.js +++ b/webview-bridge/index.ios.js @@ -97,8 +97,15 @@ class WebViewBridge extends Component { NavigationType: NavigationType, } - getInitialState() { - return { + constructor() { + super(props); + + this.onLoadingStart = this.onLoadingStart.bind(this); + this.onLoadingError = this.onLoadingError.bind(this); + this.onLoadingFinish = this.onLoadingFinish.bind(this); + this.onMessage = this.onMessage.bind(this); + + this.state = { viewState: WebViewBridgeState.IDLE, lastErrorEvent: (null: ?ErrorEvent), startInLoadingState: true,