fix(sticky-headers): stop full-width container blocking touches in gutter

src/__tests__/StickyHeaders.test.tsx

@@ -671,5 +671,36 @@ describe("StickyHeaders - Compute Function", () => {
         }),
       });
     });
+
+    it("should not intercept touches on the full-width container (multi-column gutter)", () => {
+      const layouts = createStandardLayouts();
+
+      const manager = createMockRecyclerViewManager({
+        scrollOffset: 100,
+        layouts,
+      });
+
+      const result = render(
+        <StickyHeaders
+          stickyHeaderIndices={[0, 10, 20]}
+          stickyHeaderOffset={0}
+          data={testData}
+          scrollY={new Animated.Value(0)}
+          renderItem={renderItem}
+          stickyHeaderRef={createRef()}
+          recyclerViewManager={manager}
+          extraData={undefined}
+          onChangeStickyIndex={jest.fn()}
+        />
+      );
+
+      // The full-width absolute container must use box-none so the empty gutter
+      // region in multi-column layouts lets touches pass through to the content
+      // below while the header content itself stays interactive (issue #2249).
+      const animatedView = result.find(Animated.View);
+      expect(animatedView).toHaveReactProps({
+        pointerEvents: "box-none",
+      });
+    });
   });
 });

src/recyclerview/components/StickyHeaders.tsx

@@ -199,6 +199,11 @@ export const StickyHeaders = <TItem,>({
   const headerContent = useMemo(() => {
     return (
       <CompatAnimatedView
+        // The container spans the full row width, so in multi-column layouts its
+        // empty gutter region would otherwise intercept touches meant for the
+        // content below. "box-none" makes the container transparent to touches
+        // while keeping its children (the header content) interactive.
+        pointerEvents="box-none"
         style={{
           position: "absolute",
           top: stickyHeaderOffset,