Ported source prop over to iOS WebView

Summary:
public
https://github.com/facebook/react-native/pull/5494 added a new `source` property to WebView on Android that provides a better API, as well as allowing for request headers to be set.

This diff ports that functionality over to iOS, so we can have a consistent API cross-platform.

I've also extended the API to include `method` (GET or POST) and `body` when setting the WebView content with a URI, and `baseUrl` when setting static HTML.

Reviewed By: javache

Differential Revision: D2884643

fb-gh-sync-id: 83f24494bdbb4e1408aa8f3b7428fee33888ae3a

Libraries/Components/WebView/WebView.android.js

@@ -62,11 +62,43 @@ var WebView = React.createClass({
     ),
 
     /**
-     * Used on Android only, provides html or url with optional headers to the WebView.
-     * `{ html: string, uri: string, headers: map<string, string> }`
-     * @platform android
+     * Loads static html or a uri (with optional headers) in the WebView.
      */
-    source: PropTypes.object,
+    source: PropTypes.oneOfType([
+      PropTypes.shape({
+        /*
+         * The URI to load in the WebView. Can be a local or remote file.
+         */
+        uri: PropTypes.string,
+        /*
+         * The HTTP Method to use. Defaults to GET if not specified.
+         * NOTE: On Android, only GET and POST are supported.
+         */
+        method: PropTypes.oneOf(['GET', 'POST']),
+        /*
+         * Additional HTTP headers to send with the request.
+         * NOTE: On Android, this can only be used with GET requests.
+         */
+        headers: PropTypes.object,
+        /*
+         * The HTTP body to send with the request. This must be a valid
+         * UTF-8 string, and will be sent exactly as specified, with no
+         * additional encoding (e.g. URL-escaping or base64) applied.
+         * NOTE: On Android, this can only be used with POST requests.
+         */
+        body: PropTypes.string,
+      }),
+      PropTypes.shape({
+        /*
+         * A static HTML page to display in the WebView.
+         */
+        html: PropTypes.string,
+        /*
+         * The base URL to be used for any relative links in the HTML.
+         */
+        baseUrl: PropTypes.string,
+      }),
+    ]),
 
     /**
      * Used on Android only, JS is enabled by default for WebView on iOS
@@ -149,6 +181,12 @@ var WebView = React.createClass({
     } else if (this.props.url) {
       source.uri = this.props.url;
     }
+    
+    if (source.method === 'POST' && source.headers) {
+      console.warn('WebView: `source.headers` is not supported when using POST.');
+    } else if (source.method === 'GET' && source.body) {
+      console.warn('WebView: `source.body` is not supported when using GET.');
+    }
 
     var webView =
       <RCTWebView

Libraries/Components/WebView/WebView.ios.js

@@ -7,7 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule WebView
- * @flow
+ * @noflow
  */
 'use strict';
 
@@ -20,9 +20,10 @@ var UIManager = require('UIManager');
 var View = require('View');
 var ScrollView = require('ScrollView')
 
-var processDecelerationRate = require('processDecelerationRate');
+var deprecatedPropType = require('deprecatedPropType');
 var invariant = require('invariant');
 var keyMirror = require('keyMirror');
+var processDecelerationRate = require('processDecelerationRate');
 var requireNativeComponent = require('requireNativeComponent');
 
 var PropTypes = React.PropTypes;
@@ -89,8 +90,56 @@ var WebView = React.createClass({
 
   propTypes: {
     ...View.propTypes,
-    url: PropTypes.string,
-    html: PropTypes.string,
+
+    html: deprecatedPropType(
+      PropTypes.string,
+      'Use the `source` prop instead.'
+    ),
+
+    url: deprecatedPropType(
+      PropTypes.string,
+      'Use the `source` prop instead.'
+    ),
+
+    /**
+     * Loads static html or a uri (with optional headers) in the WebView.
+     */
+    source: PropTypes.oneOfType([
+      PropTypes.shape({
+        /*
+         * The URI to load in the WebView. Can be a local or remote file.
+         */
+        uri: PropTypes.string,
+        /*
+         * The HTTP Method to use. Defaults to GET if not specified.
+         * NOTE: On Android, only GET and POST are supported.
+         */
+        method: PropTypes.string,
+        /*
+         * Additional HTTP headers to send with the request.
+         * NOTE: On Android, this can only be used with GET requests.
+         */
+        headers: PropTypes.object,
+        /*
+         * The HTTP body to send with the request. This must be a valid
+         * UTF-8 string, and will be sent exactly as specified, with no
+         * additional encoding (e.g. URL-escaping or base64) applied.
+         * NOTE: On Android, this can only be used with POST requests.
+         */
+        body: PropTypes.string,
+      }),
+      PropTypes.shape({
+        /*
+         * A static HTML page to display in the WebView.
+         */
+        html: PropTypes.string,
+        /*
+         * The base URL to be used for any relative links in the HTML.
+         */
+        baseUrl: PropTypes.string,
+      }),
+    ]),
+
     /**
      * Function that returns a view to show if there's an error.
      */
@@ -243,13 +292,19 @@ var WebView = React.createClass({
 
     var decelerationRate = processDecelerationRate(this.props.decelerationRate);
 
+    var source = this.props.source || {};
+    if (this.props.html) {
+      source.html = this.props.html;
+    } else if (this.props.url) {
+      source.uri = this.props.url;
+    }
+
     var webView =
       <RCTWebView
         ref={RCT_WEBVIEW_REF}
         key="webViewKey"
         style={webViewStyles}
-        url={this.props.url}
-        html={this.props.html}
+        source={source}
         injectedJavaScript={this.props.injectedJavaScript}
         bounces={this.props.bounces}
         scrollEnabled={this.props.scrollEnabled}