ahmdshrif · Sep 19, 2026 · Sep 19, 2026 · Sep 19, 2026
diff --git a/README.md b/README.md
@@ -10,23 +10,35 @@ Fast data grid for React Native: pinned columns, sticky header, virtualized rows
 - **Selection**: single or multiple, with a pinned checkbox column and select-all
 - **Custom cells** through `renderCell`, or plain text through `format`
 - **Light and dark themes**, with every color overridable
-- Pure JS on top of FlashList and Reanimated: works with Expo, no native code of its own
+- Pure JS on top of FlashList, Reanimated and Gesture Handler: works with Expo, no native code of its own
 
 > Status: early development (v0.1). The API may still change.
 
 ## Installation
 
 ```sh
-npm install react-native-datagrid @shopify/flash-list react-native-reanimated react-native-worklets
+npm install react-native-datagrid @shopify/flash-list react-native-reanimated react-native-worklets react-native-gesture-handler
 ```
 
 With Expo:
 
 ```sh
-npx expo install react-native-datagrid @shopify/flash-list react-native-reanimated react-native-worklets
+npx expo install react-native-datagrid @shopify/flash-list react-native-reanimated react-native-worklets react-native-gesture-handler
 ```
 
-Requires the New Architecture, FlashList 2 and Reanimated 4. If you don't use Expo, follow the [Reanimated setup guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started) to add the worklets Babel plugin.
+Requires the New Architecture, FlashList 2, Reanimated 4 and Gesture Handler 2. If you don't use Expo, follow the [Reanimated setup guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started) to add the worklets Babel plugin.
+
+Wrap your app in `GestureHandlerRootView` once, near the root:
+
+```tsx
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+export default function App() {
+  return <GestureHandlerRootView style={{ flex: 1 }}>{/* ... */}</GestureHandlerRootView>;
+}
+```
+
+Sideways scrolling uses a pan gesture rather than a `ScrollView`, so the header and pinned columns move in the same frame as the rows. A `ScrollView` reports its offset a frame late on Android, which makes pinned columns flicker.
 
 ## Usage
 

diff --git a/example/package.json b/example/package.json
@@ -10,6 +10,7 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-native": "0.83.10",
+    "react-native-gesture-handler": "~2.30.0",
     "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "~5.6.2",
     "react-native-web": "^0.21.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { StyleSheet, Text, View, useColorScheme } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { darkTheme, lightTheme } from 'react-native-datagrid';
 import type { DataGridTheme } from 'react-native-datagrid';
@@ -20,55 +21,59 @@ export default function App() {
   const [showPerf, setShowPerf] = useState(false);
 
   return (
-    <SafeAreaProvider>
-      <SafeAreaView
-        style={[styles.flex, { backgroundColor: theme.headerBackground }]}
-        edges={['top', 'bottom']}
-      >
-        <StatusBar style={dark ? 'light' : 'dark'} />
-        <View style={styles.toolbar}>
-          <Text style={[styles.title, { color: theme.text }]}>Work orders</Text>
-          <View style={styles.controls}>
-            <Segmented
-              theme={theme}
-              label="Data"
-              options={[
-                { key: 'local', label: 'Local' },
-                { key: 'server', label: 'Server' },
-              ]}
-              value={mode}
-              onChange={(key) => setMode(key as Mode)}
-            />
-            <Segmented
-              theme={theme}
-              label="Theme"
-              options={[
-                { key: 'light', label: 'Light' },
-                { key: 'dark', label: 'Dark' },
-              ]}
-              value={dark ? 'dark' : 'light'}
-              onChange={(key) => setDarkOverride(key === 'dark')}
-            />
-            <Segmented
-              theme={theme}
-              label="Perf"
-              options={[
-                { key: 'on', label: 'FPS' },
-                { key: 'off', label: 'Off' },
-              ]}
-              value={showPerf ? 'on' : 'off'}
-              onChange={(key) => setShowPerf(key === 'on')}
-            />
+    <GestureHandlerRootView style={styles.flex}>
+      <SafeAreaProvider>
+        <SafeAreaView
+          style={[styles.flex, { backgroundColor: theme.headerBackground }]}
+          edges={['top', 'bottom']}
+        >
+          <StatusBar style={dark ? 'light' : 'dark'} />
+          <View style={styles.toolbar}>
+            <Text style={[styles.title, { color: theme.text }]}>
+              Work orders
+            </Text>
+            <View style={styles.controls}>
+              <Segmented
+                theme={theme}
+                label="Data"
+                options={[
+                  { key: 'local', label: 'Local' },
+                  { key: 'server', label: 'Server' },
+                ]}
+                value={mode}
+                onChange={(key) => setMode(key as Mode)}
+              />
+              <Segmented
+                theme={theme}
+                label="Theme"
+                options={[
+                  { key: 'light', label: 'Light' },
+                  { key: 'dark', label: 'Dark' },
+                ]}
+                value={dark ? 'dark' : 'light'}
+                onChange={(key) => setDarkOverride(key === 'dark')}
+              />
+              <Segmented
+                theme={theme}
+                label="Perf"
+                options={[
+                  { key: 'on', label: 'FPS' },
+                  { key: 'off', label: 'Off' },
+                ]}
+                value={showPerf ? 'on' : 'off'}
+                onChange={(key) => setShowPerf(key === 'on')}
+              />
+            </View>
           </View>
-        </View>
-        {showPerf && <PerfMonitor />}
-        {mode === 'local' ? (
-          <LocalDemo theme={theme} dark={dark} />
-        ) : (
-          <ServerDemo theme={theme} dark={dark} />
-        )}
-      </SafeAreaView>
-    </SafeAreaProvider>
+          {showPerf && <PerfMonitor />}
+          {mode === 'local' ? (
+            <LocalDemo theme={theme} dark={dark} />
+          ) : (
+            <ServerDemo theme={theme} dark={dark} />
+          )}
+        </SafeAreaView>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
   );
 }
 

diff --git a/package.json b/package.json
@@ -90,6 +90,7 @@
     "react": "19.2.0",
     "react-native": "0.83.10",
     "react-native-builder-bob": "^0.43.1",
+    "react-native-gesture-handler": "~2.30.0",
     "react-native-reanimated": "4.2.1",
     "react-native-worklets": "0.7.4",
     "release-it": "^21.0.1",
@@ -100,6 +101,7 @@
     "@shopify/flash-list": ">=2.0.0",
     "react": "*",
     "react-native": "*",
+    "react-native-gesture-handler": ">=2.20.0",
     "react-native-reanimated": ">=4.0.0",
     "react-native-worklets": ">=0.5.0"
   },

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -10,10 +10,11 @@ import {
 import type { LayoutChangeEvent } from 'react-native';
 import { FlashList } from '@shopify/flash-list';
 import type { ListRenderItemInfo } from '@shopify/flash-list';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
-  useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
+  withDecay,
 } from 'react-native-reanimated';
 import { GridHeader } from './GridHeader';
 import { GridRow } from './GridRow';
@@ -223,11 +224,11 @@ export function DataGrid<T>({
   const rowsPressable = selectionMode !== 'none' || onRowPress !== undefined;
 
   // Horizontal scroll offset drives the header and pinned columns on the UI thread.
+  // Horizontal scrolling is driven by a pan gesture instead of a ScrollView: the content,
+  // header and pinned columns all read this one value in the same frame. A native ScrollView
+  // reports its offset a frame late on Android, which made the pinned columns flicker.
   const scrollX = useSharedValue(0);
-  const onScroll = useAnimatedScrollHandler((event) => {
-    'worklet';
-    scrollX.value = event.contentOffset.x;
-  });
+  const maxScrollX = useSharedValue(0);
   const pinnedStyle = useAnimatedStyle(() => {
     'worklet';
     return { transform: [{ translateX: scrollX.value }] };
@@ -237,6 +238,30 @@ export function DataGrid<T>({
     return { transform: [{ translateX: -scrollX.value }] };
   });
 
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .activeOffsetX([-8, 8])
+        .failOffsetY([-12, 12])
+        .onChange((event) => {
+          'worklet';
+          const next = scrollX.value - event.changeX;
+          scrollX.value = Math.min(Math.max(next, 0), maxScrollX.value);
+        })
+        .onEnd((event) => {
+          'worklet';
+          scrollX.value = withDecay({
+            velocity: -event.velocityX,
+            clamp: [0, maxScrollX.value],
+          });
+        }),
+    [scrollX, maxScrollX]
+  );
+  const contentStyle = useAnimatedStyle(() => {
+    'worklet';
+    return { transform: [{ translateX: -scrollX.value }] };
+  });
+
   const [bodySize, setBodySize] = useState({ width: 0, height: 0 });
   const onBodyLayout = useCallback((event: LayoutChangeEvent) => {
     const { width, height } = event.nativeEvent.layout;
@@ -246,6 +271,13 @@ export function DataGrid<T>({
   }, []);
   const bodyHeight = bodySize.height;
 
+  // Keep the offset inside the content when the columns or the viewport change.
+  useEffect(() => {
+    const max = Math.max(0, layout.totalWidth - bodySize.width);
+    maxScrollX.value = max;
+    if (scrollX.value > max) scrollX.value = max;
+  }, [layout.totalWidth, bodySize.width, maxScrollX, scrollX]);
+
   const retryButton = onRetry ? (
     <Pressable
       onPress={onRetry}
@@ -362,14 +394,14 @@ export function DataGrid<T>({
           </View>
         ) : (
           bodyHeight > 0 && (
-            <Animated.ScrollView
-              horizontal
-              bounces={false}
-              onScroll={onScroll}
-              scrollEventThrottle={16}
-              testID={testID ? `${testID}-horizontal` : undefined}
-            >
-              <View style={{ width: layout.totalWidth, height: bodyHeight }}>
+            <GestureDetector gesture={panGesture}>
+              <Animated.View
+                style={[
+                  { width: layout.totalWidth, height: bodyHeight },
+                  contentStyle,
+                ]}
+                testID={testID ? `${testID}-horizontal` : undefined}
+              >
                 <FlashList
                   data={rows}
                   renderItem={renderItem}
@@ -383,8 +415,8 @@ export function DataGrid<T>({
                   onRefresh={onRefresh}
                   testID={testID ? `${testID}-list` : undefined}
                 />
-              </View>
-            </Animated.ScrollView>
+              </Animated.View>
+            </GestureDetector>
           )
         )}
       </View>
@@ -394,7 +426,7 @@ export function DataGrid<T>({
 
 const styles = StyleSheet.create({
   root: { flex: 1, overflow: 'hidden' },
-  body: { flex: 1 },
+  body: { flex: 1, overflow: 'hidden' },
   empty: {
     flex: 1,
     alignItems: 'center',

diff --git a/src/GridHeader.tsx b/src/GridHeader.tsx
@@ -90,6 +90,20 @@ function GridHeaderImpl<T>({
         },
       ]}
     >
+      {layout.pinnedWidth > 0 && <View style={{ width: layout.pinnedWidth }} />}
+      <View style={styles.clip}>
+        <Animated.View
+          style={[
+            styles.row,
+            styles.track,
+            { width: layout.totalWidth - layout.pinnedWidth },
+            scrollStyle,
+          ]}
+        >
+          {renderCells(layout.scrolling)}
+        </Animated.View>
+      </View>
+      {/* Drawn last so it covers the scrolling header without zIndex (see GridRow). */}
       {layout.pinnedWidth > 0 && (
         <View
           style={[
@@ -130,18 +144,6 @@ function GridHeaderImpl<T>({
           />
         </View>
       )}
-      <View style={styles.clip}>
-        <Animated.View
-          style={[
-            styles.row,
-            styles.track,
-            { width: layout.totalWidth - layout.pinnedWidth },
-            scrollStyle,
-          ]}
-        >
-          {renderCells(layout.scrolling)}
-        </Animated.View>
-      </View>
     </View>
   );
 }
@@ -151,7 +153,7 @@ export const GridHeader = memo(GridHeaderImpl) as typeof GridHeaderImpl;
 const styles = StyleSheet.create({
   header: { flexDirection: 'row', borderBottomWidth: 1 },
   row: { flexDirection: 'row' },
-  pinned: { zIndex: 1, height: '100%' },
+  pinned: { position: 'absolute', left: 0, top: 0, bottom: 0 },
   pinnedEdge: {
     position: 'absolute',
     top: 0,

diff --git a/src/GridRow.tsx b/src/GridRow.tsx
@@ -101,8 +101,13 @@ function GridRowImpl<T>({
       </View>
     ));
 
+  // The pinned group is drawn last and positioned absolutely, so it covers the scrolling
+  // cells without zIndex. Android reorders views for zIndex, which flickers while a
+  // transform animates.
   const content = (
     <>
+      {layout.pinnedWidth > 0 && <View style={{ width: layout.pinnedWidth }} />}
+      <View style={styles.row}>{renderCells(layout.scrolling)}</View>
       {layout.pinnedWidth > 0 && (
         <Animated.View
           style={[
@@ -132,7 +137,6 @@ function GridRowImpl<T>({
           />
         </Animated.View>
       )}
-      <View style={styles.row}>{renderCells(layout.scrolling)}</View>
     </>
   );
 
@@ -194,7 +198,7 @@ export const GridRow = memo(GridRowImpl) as typeof GridRowImpl;
 const styles = StyleSheet.create({
   row: { flexDirection: 'row' },
   rowBorder: { borderBottomWidth: StyleSheet.hairlineWidth },
-  pinned: { zIndex: 1, height: '100%' },
+  pinned: { position: 'absolute', left: 0, top: 0, bottom: 0 },
   pinnedEdge: {
     position: 'absolute',
     top: 0,