RN 0.47 breaking change correction

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"
   }
 }

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,
@@ -33,7 +34,7 @@ var {
     WebViewBridgeManager
   }
 } = ReactNative;
-var { PropTypes } = React;
+import PropTypes from 'prop-types';
 
 var RCT_WEBVIEWBRIDGE_REF = 'webviewbridge';
 
@@ -48,27 +49,25 @@ var RCTWebViewBridge = requireNativeComponent('RCTWebViewBridge', WebViewBridge)
 /**
  * Renders a native WebView.
  */
-var WebViewBridge = React.createClass({
-
-  propTypes: {
-    ...RCTWebViewBridge.propTypes,
+class WebViewBridge extends Component{
+  
+  constructor(props) {
+    super(props);
 
-    /**
-     * Will be called once the message is being sent from webview
-     */
-    onBridgeMessage: PropTypes.func,
-  },
+    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: function() {
-    return {
+    this.state = {
       viewState: WebViewBridgeState.IDLE,
       lastErrorEvent: null,
       startInLoadingState: true,
     };
-  },
+  }
 
 
-  componentWillMount: function() {
+  componentWillMount() {
     DeviceEventEmitter.addListener("webViewBridgeMessage", (body) => {
       const { onBridgeMessage } = this.props;
       const message = body.message;
@@ -80,9 +79,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 +135,67 @@ var WebViewBridge = React.createClass({
         {otherView}
       </View>
     );
-  },
+  }
 
   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,19 +205,27 @@ var WebViewBridge = React.createClass({
       lastErrorEvent: event.nativeEvent,
       viewState: WebViewBridgeState.ERROR
     });
-  },
+  }
 
-  onLoadingFinish: function(event) {
+  onLoadingFinish(event) {
     var {onLoad, onLoadEnd} = this.props;
     onLoad && onLoad(event);
     onLoadEnd && onLoadEnd(event);
     this.setState({
       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: {
@@ -230,4 +237,4 @@ var styles = StyleSheet.create({
   },
 });
 
-module.exports = WebViewBridge;
+module.exports = WebViewBridge;

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,34 @@ 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,
+  constructor() {
+    super(props);
 
-    keyboardDisplayRequiresUserAction: PropTypes.bool,
-  },
+    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: function() {
-    return {
+    this.state =  {
       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 +197,57 @@ var WebViewBridge = React.createClass({
         {otherView}
       </View>
     );
-  },
+  }
 
-  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,18 +258,31 @@ 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);
     this.setState({
       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: {