From faec2b4a833351eef27b45c88075d647ebe86cee Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Thu, 13 Jul 2017 17:10:38 -0700
Subject: [PATCH] [fix] ScrollView to use 'touch-action' to disable scroll

The recommendation from the Chrome team is to use 'touch-action' to
disable scrolling (via touch modality) when passive event listeners are
in use.

Close #563
---
 .../ScrollView/examples/ScrollTo.js           | 10 ++-
 .../storybook/1-components/View/ViewScreen.js |  5 ++
 src/components/ScrollView/ScrollViewBase.js   | 62 ++++++++-----------
 src/components/View/ViewStylePropTypes.js     |  1 +
 4 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/docs/storybook/1-components/ScrollView/examples/ScrollTo.js b/docs/storybook/1-components/ScrollView/examples/ScrollTo.js
index 0aba8d99..6b1c49d6 100644
--- a/docs/storybook/1-components/ScrollView/examples/ScrollTo.js
+++ b/docs/storybook/1-components/ScrollView/examples/ScrollTo.js
@@ -5,7 +5,7 @@
  */
 
 import React, { PureComponent } from 'react';
-import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Button, ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
 
 export default class ScrollToExample extends PureComponent {
   render() {
@@ -20,11 +20,15 @@ export default class ScrollToExample extends PureComponent {
           style={styles.scrollViewStyle}
         >
           {Array.from({ length: 50 }).map((item, i) =>
-            <View key={i} style={[styles.box, styles.horizontalBox]}>
+            <TouchableHighlight
+              key={i}
+              onPress={() => {}}
+              style={[styles.box, styles.horizontalBox]}
+            >
               <Text>
                 {i}
               </Text>
-            </View>
+            </TouchableHighlight>
           )}
         </ScrollView>
         <Button
diff --git a/docs/storybook/1-components/View/ViewScreen.js b/docs/storybook/1-components/View/ViewScreen.js
index 36e72b73..5d9d8bf9 100644
--- a/docs/storybook/1-components/View/ViewScreen.js
+++ b/docs/storybook/1-components/View/ViewScreen.js
@@ -671,6 +671,11 @@ const stylePropTypes = [
     name: 'shadowRadius',
     typeInfo: 'number | string'
   },
+  {
+    label: 'web',
+    name: 'touchAction',
+    typeInfo: 'string'
+  },
   {
     name: 'top',
     typeInfo: 'number | string'
diff --git a/src/components/ScrollView/ScrollViewBase.js b/src/components/ScrollView/ScrollViewBase.js
index 2f708054..c381d166 100644
--- a/src/components/ScrollView/ScrollViewBase.js
+++ b/src/components/ScrollView/ScrollViewBase.js
@@ -9,7 +9,7 @@
  */
 
 import debounce from 'debounce';
-import findNodeHandle from '../../modules/findNodeHandle';
+import StyleSheet from '../../apis/StyleSheet';
 import View from '../View';
 import ViewPropTypes from '../View/ViewPropTypes';
 import React, { Component } from 'react';
@@ -72,41 +72,22 @@ export default class ScrollViewBase extends Component {
 
   _debouncedOnScrollEnd = debounce(this._handleScrollEnd, 100);
   _state = { isScrolling: false, scrollLastTick: 0 };
-  _node = null;
-
-  componentDidMount() {
-    this._node && this._node.addEventListener('scroll', this._handleScroll);
-    this._node && this._node.addEventListener('touchmove', this._handlePreventableTouchMove);
-    this._node && this._node.addEventListener('wheel', this._handlePreventableWheel);
-  }
-
-  componentWillUnmount() {
-    this._node && this._node.removeEventListener('scroll', this._handleScroll);
-    this._node && this._node.removeEventListener('touchmove', this._handlePreventableTouchMove);
-    this._node && this._node.removeEventListener('wheel', this._handlePreventableWheel);
-  }
 
   _createPreventableScrollHandler = (handler: Function) => {
     return (e: Object) => {
-      if (!this.props.scrollEnabled) {
-        e.preventDefault();
-      } else {
+      if (this.props.scrollEnabled) {
         if (handler) {
           handler(e);
         }
+      } else {
+        // To disable scrolling in all browsers except Chrome
+        e.preventDefault();
       }
     };
   };
 
-  _handlePreventableTouchMove = (e: Object) => {
-    this._createPreventableScrollHandler(this.props.onTouchMove)(e);
-  };
-
-  _handlePreventableWheel = (e: Object) => {
-    this._createPreventableScrollHandler(this.props.onWheel)(e);
-  };
-
-  _handleScroll = (e: Object) => {
+  _handleScroll = (e: SyntheticEvent) => {
+    e.persist();
     e.stopPropagation();
     const { scrollEventThrottle } = this.props;
     // A scroll happened, so the scroll bumps the debounce.
@@ -143,10 +124,6 @@ export default class ScrollViewBase extends Component {
     }
   }
 
-  _setNodeRef = (element: View) => {
-    this._node = findNodeHandle(element);
-  };
-
   _shouldEmitScrollEvent(lastTick: number, eventThrottle: number) {
     const timeSinceLastTick = Date.now() - lastTick;
     return eventThrottle > 0 && timeSinceLastTick >= eventThrottle;
@@ -154,16 +131,14 @@ export default class ScrollViewBase extends Component {
 
   render() {
     const {
+      scrollEnabled,
+      style,
       /* eslint-disable */
       onMomentumScrollBegin,
       onMomentumScrollEnd,
-      onScroll,
       onScrollBeginDrag,
       onScrollEndDrag,
-      onTouchMove,
-      onWheel,
       removeClippedSubviews,
-      scrollEnabled,
       scrollEventThrottle,
       showsHorizontalScrollIndicator,
       showsVerticalScrollIndicator,
@@ -171,6 +146,23 @@ export default class ScrollViewBase extends Component {
       ...other
     } = this.props;
 
-    return <View {...other} ref={this._setNodeRef} />;
+    return (
+      <View
+        {...other}
+        onScroll={this._handleScroll}
+        onTouchMove={this._createPreventableScrollHandler(this.props.onTouchMove)}
+        onWheel={this._createPreventableScrollHandler(this.props.onWheel)}
+        style={[style, !scrollEnabled && styles.scrollDisabled]}
+      />
+    );
   }
 }
+
+// Chrome doesn't support e.preventDefault in this case; touch-action must be
+// used to disable scrolling.
+// https://developers.google.com/web/updates/2017/01/scrolling-intervention
+const styles = StyleSheet.create({
+  scrollDisabled: {
+    touchAction: 'none'
+  }
+});
diff --git a/src/components/View/ViewStylePropTypes.js b/src/components/View/ViewStylePropTypes.js
index c0803f13..438632f5 100644
--- a/src/components/View/ViewStylePropTypes.js
+++ b/src/components/View/ViewStylePropTypes.js
@@ -48,6 +48,7 @@ const ViewStylePropTypes = {
   outlineColor: ColorPropType,
   perspective: oneOfType([number, string]),
   perspectiveOrigin: string,
+  touchAction: string,
   transitionDelay: string,
   transitionDuration: string,
   transitionProperty: string,