add flag to enable momentum scrolling on iOS

Summary:
Expose a `decelerationNormalEnabled` flag on WebView, which, when enabled, will WebView's ScrollView's `decelerationRate` to `UIScrollViewDecelerationRateNormal`. This gives the WebView the same "momentum" style scrolling as other iOS views.

This was discussed with ide in #5447. Please let me know if there's anything I'm missing, or anything else you'd like to see in this pull request.
Closes https://github.com/facebook/react-native/pull/5527

Reviewed By: svcscm

Differential Revision: D2870312

Pulled By: nicklockwood

fb-gh-sync-id: 7dbfd06a349e3365a5df40c3bacf25a4fdb306cf

Examples/UIExplorer/ImageEditingExample.js

@@ -30,8 +30,6 @@ var {
   View,
 } = React;
 
-var RCTScrollViewConsts = UIManager.RCTScrollView.Constants;
-
 var PAGE_SIZE = 20;
 
 type ImageOffset = {
@@ -249,17 +247,12 @@ class ImageCropper extends React.Component {
   }
 
   render() {
-    var decelerationRate =
-      RCTScrollViewConsts && RCTScrollViewConsts.DecelerationRate ?
-        RCTScrollViewConsts.DecelerationRate.Fast :
-        0;
-
     return (
       <ScrollView
         alwaysBounceVertical={true}
         automaticallyAdjustContentInsets={false}
         contentOffset={this._contentOffset}
-        decelerationRate={decelerationRate}
+        decelerationRate="fast"
         horizontal={true}
         maximumZoomScale={3.0}
         onMomentumScrollEnd={this._onScroll.bind(this)}

Examples/UIExplorer/WebViewExample.js

@@ -96,6 +96,7 @@ var WebViewExample = React.createClass({
           url={this.state.url}
           javaScriptEnabled={true}
           domStorageEnabled={true}
+          decelerationRate="normal"
           onNavigationStateChange={this.onNavigationStateChange}
           onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
           startInLoadingState={true}

Libraries/Components/ScrollView/ScrollView.js

@@ -32,7 +32,7 @@ var invariant = require('invariant');
 var pointsDiffer = require('pointsDiffer');
 var requireNativeComponent = require('requireNativeComponent');
 var processColor = require('processColor');
-
+var processDecelerationRate = require('processDecelerationRate');
 var PropTypes = React.PropTypes;
 
 var SCROLLVIEW = 'ScrollView';
@@ -130,12 +130,18 @@ var ScrollView = React.createClass({
     contentContainerStyle: StyleSheetPropType(ViewStylePropTypes),
     /**
      * A floating-point number that determines how quickly the scroll view
-     * decelerates after the user lifts their finger. Reasonable choices include
+     * decelerates after the user lifts their finger. You may also use string
+     * shortcuts `"normal"` and `"fast"` which match the underlying iOS settings
+     * for `UIScrollViewDecelerationRateNormal` and
+     * `UIScrollViewDecelerationRateFast` respectively.
      *   - Normal: 0.998 (the default)
      *   - Fast: 0.9
      * @platform ios
      */
-    decelerationRate: PropTypes.number,
+    decelerationRate: PropTypes.oneOfType([
+      PropTypes.oneOf(['fast', 'normal']),
+      PropTypes.number,
+    ]),
     /**
      * When true, the scroll view's children are arranged horizontally in a row
      * instead of vertically in a column. The default value is false.
@@ -465,6 +471,11 @@ var ScrollView = React.createClass({
         function() { onRefreshStart && onRefreshStart(this.endRefreshing); }.bind(this);
     }
 
+    var { decelerationRate } = this.props;
+    if (decelerationRate) {
+      props.decelerationRate = processDecelerationRate(decelerationRate);
+    }
+
     var ScrollViewClass;
     if (Platform.OS === 'ios') {
       ScrollViewClass = RCTScrollView;

Libraries/Components/ScrollView/processDecelerationRate.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule processDecelerationRate
+ */
+'use strict';
+
+var ScrollViewConsts = require('UIManager').RCTScrollView.Constants;
+
+function processDecelerationRate(decelerationRate) {
+  var ScrollViewDecelerationRateNormal = ScrollViewConsts && ScrollViewConsts.DecelerationRate.normal;
+  var ScrollViewDecelerationRateFast = ScrollViewConsts && ScrollViewConsts.DecelerationRate.fast;
+
+  if (typeof decelerationRate === 'string') {
+    if (decelerationRate === 'fast') {
+      return ScrollViewDecelerationRateFast;
+    } else if (decelerationRate === 'normal') {
+      return ScrollViewDecelerationRateNormal;
+    }
+  }
+  return decelerationRate;
+}
+
+module.exports = processDecelerationRate;

Libraries/Components/WebView/WebView.ios.js

@@ -18,7 +18,9 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var UIManager = require('UIManager');
 var View = require('View');
+var ScrollView = require('ScrollView')
 
+var processDecelerationRate = require('processDecelerationRate');
 var invariant = require('invariant');
 var keyMirror = require('keyMirror');
 var requireNativeComponent = require('requireNativeComponent');
@@ -117,6 +119,17 @@ var WebView = React.createClass({
      * @platform ios
      */
     bounces: PropTypes.bool,
+    /**
+     * A floating-point number that determines how quickly the scroll view
+     * decelerates after the user lifts their finger. You may also use string
+     * shortcuts `"normal"` and `"fast"` which match the underlying iOS settings
+     * for `UIScrollViewDecelerationRateNormal` and
+     * `UIScrollViewDecelerationRateFast` respectively.
+     *   - Normal: 0.998
+     *   - Fast: 0.9 (the default for iOS WebView)
+     * @platform ios
+     */
+    decelerationRate: ScrollView.propTypes.decelerationRate,
     /**
      * @platform ios
      */
@@ -228,6 +241,8 @@ var WebView = React.createClass({
       domStorageEnabled = this.props.domStorageEnabledAndroid;
     }
 
+    var decelerationRate = processDecelerationRate(this.props.decelerationRate);
+
     var webView =
       <RCTWebView
         ref={RCT_WEBVIEW_REF}
@@ -238,6 +253,7 @@ var WebView = React.createClass({
         injectedJavaScript={this.props.injectedJavaScript}
         bounces={this.props.bounces}
         scrollEnabled={this.props.scrollEnabled}
+        decelerationRate={decelerationRate}
         contentInset={this.props.contentInset}
         automaticallyAdjustContentInsets={this.props.automaticallyAdjustContentInsets}
         onLoadingStart={this.onLoadingStart}

React/Views/RCTWebViewManager.m

@@ -38,6 +38,7 @@ RCT_REMAP_VIEW_PROPERTY(html, HTML, NSString)
 RCT_REMAP_VIEW_PROPERTY(bounces, _webView.scrollView.bounces, BOOL)
 RCT_REMAP_VIEW_PROPERTY(scrollEnabled, _webView.scrollView.scrollEnabled, BOOL)
 RCT_REMAP_VIEW_PROPERTY(scalesPageToFit, _webView.scalesPageToFit, BOOL)
+RCT_REMAP_VIEW_PROPERTY(decelerationRate, _webView.scrollView.decelerationRate, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString)
 RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
 RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)