Fix: [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event

packages/react-native-web/src/modules/canUsePassive/index.js

@@ -0,0 +1,22 @@
+/**
+ * Allows us to identify whether the browser supports passive event listener.
+ * Because older browsers will interpret any object in the 3rd argument of an event listener as capture=true.
+ *
+ * @returns {Boolean}
+ */
+
+export default function canUsePassive() {
+  let supportsPassive = false;
+  try {
+    const opts = Object.defineProperty({}, 'passive', {
+      // eslint-disable-next-line getter-return
+      get() {
+        supportsPassive = true;
+      }
+    });
+    window.addEventListener('testPassive', null, opts);
+    window.removeEventListener('testPassive', null, opts);
+    // eslint-disable-next-line no-empty
+  } catch (e) {}
+  return supportsPassive;
+}

packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js

@@ -41,6 +41,7 @@ import {
   type ChildListState,
   type ListDebugInfo,
 } from './VirtualizedListContext.js';
+import canUsePassive from '../../../modules/canUsePassive';
 
 type Item = any;
 
@@ -413,6 +414,8 @@ function getItemKey(props: Props, index: number): ?string {
   return extractKey(props, item, 0);
 }
 
+const supportsPassive = canUsePassive();
+
 /**
  * Base implementation for the more convenient [`<FlatList>`](https://reactnative.dev/docs/flatlist)
  * and [`<SectionList>`](https://reactnative.dev/docs/sectionlist) components, which are also better
@@ -829,7 +832,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           ev.target.scrollTop += targetDelta;
           node.scrollTop -= leftoverDelta;
         }
-        ev.preventDefault();
       }
     };
 
@@ -880,7 +882,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   setupWebWheelHandler() {
     if (this._scrollRef && this._scrollRef.getScrollableNode) {
       this._scrollRef.getScrollableNode().addEventListener('wheel',
-          this.invertedWheelEventHandler
+          this.invertedWheelEventHandler,
+          supportsPassive ? { passive: true } : false
       );
     } else {
       setTimeout(() => this.setupWebWheelHandler(), 50);