From 756c4f50115d09980bc8b639047a4becc411fc9e Mon Sep 17 00:00:00 2001
From: Shevilll <ahmadfaraz00710@gmail.com>
Date: Sat, 20 Jun 2026 15:29:15 +0530
Subject: [PATCH] fix(sticky-headers): stop full-width container blocking
 touches in gutter

The sticky header's full-width absolute CompatAnimatedView container
(position: absolute, left: 0, right: 0) spans the entire row width. In
multi-column layouts (numColumns > 1) the empty gutter region of that
container intercepts touch events meant for the content directly below
it, so the first item rendered next to a sticky header cannot be pressed.

Add pointerEvents="box-none" to the container so it no longer captures
touches itself while its children (the header content) stay interactive.
Single-column behavior is unchanged.

Fixes #2249
---
 src/__tests__/StickyHeaders.test.tsx          | 31 +++++++++++++++++++
 src/recyclerview/components/StickyHeaders.tsx |  5 +++
 2 files changed, 36 insertions(+)

diff --git a/src/__tests__/StickyHeaders.test.tsx b/src/__tests__/StickyHeaders.test.tsx
index 3d5a3e5ab..57f07e6df 100644
--- a/src/__tests__/StickyHeaders.test.tsx
+++ b/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",
+      });
+    });
   });
 });
diff --git a/src/recyclerview/components/StickyHeaders.tsx b/src/recyclerview/components/StickyHeaders.tsx
index 75e3341b5..73f867f2a 100644
--- a/src/recyclerview/components/StickyHeaders.tsx
+++ b/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,