From 19cf0711bc163b9ad56bd77f76f2c6a538ae301b Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Thu, 11 Jan 2018 12:41:34 -0800
Subject: [PATCH] [add] StyleSheet support for 'overscrollBehavior'

An experimental CSS property to control the behavior when the scroll
position of a scroll container reaches the edge of the scrollport. This
allows web apps to get closer to native scrolling behaviour and
performance.

https://wicg.github.io/overscroll-behavior/
https://developers.google.com/web/updates/2017/11/overscroll-behavior

Fix #765
---
 .../createReactDOMStyle-test.js.snap              |  4 ++++
 .../__tests__/createReactDOMStyle-test.js         |  4 +++-
 .../src/exports/StyleSheet/createReactDOMStyle.js |  1 +
 .../src/exports/View/ViewStylePropTypes.js        |  5 +++++
 website/storybook/1-components/View/ViewScreen.js | 15 +++++++++++++++
 5 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
index a820b14d..be7a9bd4 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap
@@ -34,5 +34,9 @@ Object {
   "marginLeft": "10px",
   "marginRight": "10px",
   "marginTop": "50px",
+  "overflowX": "hidden",
+  "overflowY": "hidden",
+  "overscrollBehaviorX": "contain",
+  "overscrollBehaviorY": "contain",
 }
 `;
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
index 76921fdc..26d6f82d 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createReactDOMStyle-test.js
@@ -143,7 +143,9 @@ describe('apis/StyleSheet/createReactDOMStyle', () => {
       borderWidth: 0,
       marginTop: 50,
       marginVertical: 25,
-      margin: 10
+      margin: 10,
+      overflow: 'hidden',
+      overscrollBehavior: 'contain'
     };
 
     expect(createReactDOMStyle(style)).toMatchSnapshot();
diff --git a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
index dcba9b81..30635611 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js
@@ -35,6 +35,7 @@ const styleShortFormProperties = {
   marginHorizontal: ['marginRight', 'marginLeft'],
   marginVertical: ['marginTop', 'marginBottom'],
   overflow: ['overflowX', 'overflowY'],
+  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],
   padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
   paddingHorizontal: ['paddingRight', 'paddingLeft'],
   paddingVertical: ['paddingTop', 'paddingBottom'],
diff --git a/packages/react-native-web/src/exports/View/ViewStylePropTypes.js b/packages/react-native-web/src/exports/View/ViewStylePropTypes.js
index cc4aa371..59d2ca8e 100644
--- a/packages/react-native-web/src/exports/View/ViewStylePropTypes.js
+++ b/packages/react-native-web/src/exports/View/ViewStylePropTypes.js
@@ -17,6 +17,8 @@ import ShadowPropTypes from '../../modules/ShadowPropTypes';
 import TransformPropTypes from '../../modules/TransformPropTypes';
 import { number, oneOf, oneOfType, string } from 'prop-types';
 
+const overscrollBehaviorType = oneOf(['auto', 'contain', 'none']);
+
 const ViewStylePropTypes = {
   ...AnimationPropTypes,
   ...BorderPropTypes,
@@ -46,6 +48,9 @@ const ViewStylePropTypes = {
   filter: string,
   outline: string,
   outlineColor: ColorPropType,
+  overscrollBehavior: overscrollBehaviorType,
+  overscrollBehaviorX: overscrollBehaviorType,
+  overscrollBehaviorY: overscrollBehaviorType,
   perspective: oneOfType([number, string]),
   perspectiveOrigin: string,
   touchAction: string,
diff --git a/website/storybook/1-components/View/ViewScreen.js b/website/storybook/1-components/View/ViewScreen.js
index 5b384300..6cdcafae 100644
--- a/website/storybook/1-components/View/ViewScreen.js
+++ b/website/storybook/1-components/View/ViewScreen.js
@@ -688,6 +688,21 @@ const stylePropTypes = [
     name: 'overflowY',
     typeInfo: 'string'
   },
+  {
+    label: 'web',
+    name: 'overscrollBehavior',
+    typeInfo: '"auto" | "contain" | "none"'
+  },
+  {
+    label: 'web',
+    name: 'overscrollBehaviorX',
+    typeInfo: '"auto" | "contain" | "none"'
+  },
+  {
+    label: 'web',
+    name: 'overscrollBehaviorY',
+    typeInfo: '"auto" | "contain" | "none"'
+  },
   {
     name: 'padding',
     typeInfo: 'number | string'