[fix] ScrollView support for hiding scroll indicators

Implements 'showsHorizontalScrollIndicator' and 'showVerticalScrollIndicator' by polyfilling the 'scrollbar-width' property from the draft CSS spec for scrollbars. Scrollbars can only be shown for both or neither axis.

Close #1307

Co-authored-by: Nicolas Gallagher <nicolasgallagher@gmail.com>

packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js

@@ -122,6 +122,8 @@ export default class ScrollViewBase extends Component<*> {
       ...other
     } = this.props;
 
+    const hideScrollbar =
+      showsHorizontalScrollIndicator === false || showsVerticalScrollIndicator === false;
     return (
       <View
         {...other}
@@ -129,10 +131,11 @@ export default class ScrollViewBase extends Component<*> {
         onTouchMove={this._createPreventableScrollHandler(this.props.onTouchMove)}
         onWheel={this._createPreventableScrollHandler(this.props.onWheel)}
         ref={this._setViewRef}
-        style={StyleSheet.compose(
+        style={[
           style,
-          !scrollEnabled && styles.scrollDisabled
+          !scrollEnabled && styles.scrollDisabled,
-        )}
+          hideScrollbar && style.hideScrollbar
+        ]}
       />
     );
   }
@@ -204,5 +207,8 @@ export default class ScrollViewBase extends Component<*> {
 const styles = StyleSheet.create({
   scrollDisabled: {
     touchAction: 'none'
+  },
+  hideScrollbar: {
+    scrollbarWidth: 'none'
   }
 });

packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap

@@ -58,6 +58,15 @@ Object {
     ],
     "value": "box-only",
   },
+  "r-scrollbarWidth-2eszeu": Object {
+    "identifier": "r-scrollbarWidth-2eszeu",
+    "property": "scrollbarWidth",
+    "rules": Array [
+      ".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}",
+      ".r-scrollbarWidth-2eszeu{overflow:-moz-scrollbars-none;-ms-overflow-style:none}",
+    ],
+    "value": "none",
+  },
   "r-transform-1ehiua4": Object {
     "identifier": "r-transform-1ehiua4",
     "property": "transform",

packages/react-native-web/src/exports/StyleSheet/__tests__/compile-test.js

@@ -16,6 +16,7 @@ describe('StyleSheet/compile', () => {
         fontFamily: 'System',
         marginHorizontal: 10,
         placeholderTextColor: 'gray',
+        scrollbarWidth: 'none',
         pointerEvents: 'box-only',
         transform: [
           {

packages/react-native-web/src/exports/StyleSheet/compile.js

@@ -75,7 +75,7 @@ export function atomic(style: Style): CompilerOutput {
 
 /**
  * Compile simple style object to classic CSS rules.
- * No support for 'placeholderTextColor' or 'pointerEvents'.
+ * No support for 'placeholderTextColor', 'scrollbarWidth', or 'pointerEvents'.
  */
 export function classic(style: Style, name: string): CompilerOutput {
   const identifier = createIdentifier('css', name, style);
@@ -97,7 +97,7 @@ export function classic(style: Style, name: string): CompilerOutput {
 
 /**
  * Compile simple style object to inline DOM styles.
- * No support for 'animationKeyframes', 'placeholderTextColor', or 'pointerEvents'.
+ * No support for 'animationKeyframes', 'placeholderTextColor', 'scrollbarWidth', or 'pointerEvents'.
  */
 export function inline(style: Style) {
   return prefixInlineStyles(createReactDOMStyle(style));
@@ -144,6 +144,18 @@ function createAtomicRules(identifier: string, property, value): Rules {
       break;
     }
 
+    // Polyfill for draft spec
+    // https://drafts.csswg.org/css-scrollbars-1/
+    case 'scrollbarWidth': {
+      if (value === 'none') {
+        rules.push(
+          `${selector}::-webkit-scrollbar{display:none}`,
+          `${selector}{overflow:-moz-scrollbars-none;-ms-overflow-style:none}`
+        );
+      }
+      break;
+    }
+
     // See #513
     case 'pointerEvents': {
       let finalValue = value;

packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js

@@ -231,9 +231,10 @@ export default function createStyleResolver() {
               // require more complex transforms into multiple CSS rules. Here we assume that StyleManager
               // can bind these styles to a className, and prevent them becoming invalid inline-styles.
               if (
-                styleProp === 'pointerEvents' ||
+                styleProp === 'animationKeyframes' ||
                 styleProp === 'placeholderTextColor' ||
-                styleProp === 'animationKeyframes'
+                styleProp === 'pointerEvents' ||
+                styleProp === 'scrollbarWidth'
               ) {
                 const a = atomic({ [styleProp]: value });
                 Object.values(a).forEach(({ identifier, rules }) => {

packages/react-native-web/src/exports/View/ViewStylePropTypes.js

@@ -55,6 +55,7 @@ const ViewStylePropTypes = {
   overscrollBehavior: overscrollBehaviorType,
   overscrollBehaviorX: overscrollBehaviorType,
   overscrollBehaviorY: overscrollBehaviorType,
+  scrollbarWidth: oneOf(['auto', 'none']),
   scrollSnapAlign: string,
   scrollSnapType: string,
   WebkitMaskImage: string,