Prevent swipe rows from opening items

app/(app)/entities/index.tsx

@@ -2,7 +2,6 @@ import { router } from "expo-router";
 import { useState } from "react";
 import {
   Alert,
-  Pressable,
   RefreshControl,
   ScrollView,
   StyleSheet,
@@ -155,8 +154,8 @@ export default function EntitiesScreen() {
                       onPress: () => confirmDelete(client.id, client.name),
                     },
                   ]}
+                  onPress={() => router.push(`/(app)/entities/clients/${client.id}`)}
                 >
-                  <Pressable onPress={() => router.push(`/(app)/entities/clients/${client.id}`)}>
                   <GlassSurface style={styles.card}>
                     <View style={styles.cardInner}>
                       <Text style={styles.name}>{client.name}</Text>
@@ -171,7 +170,6 @@ export default function EntitiesScreen() {
                       ) : null}
                     </View>
                   </GlassSurface>
-                  </Pressable>
                 </SwipeableRow>
               ))
             )
@@ -205,8 +203,8 @@ export default function EntitiesScreen() {
                     onPress: () => confirmDelete(business.id, business.name),
                   },
                 ]}
+                onPress={() => router.push(`/(app)/entities/businesses/${business.id}`)}
               >
-                <Pressable onPress={() => router.push(`/(app)/entities/businesses/${business.id}`)}>
                 <GlassSurface style={styles.card}>
                   <View style={styles.cardInner}>
                     <View style={styles.nameRow}>
@@ -221,7 +219,6 @@ export default function EntitiesScreen() {
                     {business.email ? <Text style={styles.meta}>{business.email}</Text> : null}
                   </View>
                 </GlassSurface>
-                </Pressable>
               </SwipeableRow>
             ))
           )}

app/(app)/invoices/index.tsx

@@ -2,7 +2,6 @@ import { router } from "expo-router";
 import { useState } from "react";
 import {
   Alert,
-  Pressable,
   RefreshControl,
   ScrollView,
   StyleSheet,
@@ -205,8 +204,10 @@ export default function InvoicesScreen() {
               ];
 
               return (
-                <SwipeableRow key={invoice.id} actions={actions} backgroundColor={colors.cardGlass}>
+                <SwipeableRow
-                  <Pressable
+                  key={invoice.id}
+                  actions={actions}
+                  backgroundColor={colors.cardGlass}
                   onPress={() => router.push(`/(app)/invoices/${invoice.id}`)}
                   onLongPress={() => promptStatusChange(invoice.id, status)}
                 >
@@ -229,7 +230,6 @@ export default function InvoicesScreen() {
                       </View>
                     </View>
                   </GlassSurface>
-                  </Pressable>
                 </SwipeableRow>
               );
             })

app/(app)/more/expenses/index.tsx

@@ -2,7 +2,6 @@ import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { useMemo, useState } from "react";
 import {
-  Pressable,
   RefreshControl,
   ScrollView,
   StyleSheet,
@@ -225,6 +224,12 @@ function ExpenseRow({ expense, onDelete }: { expense: Expense; onDelete: () => v
   return (
     <SwipeableRow
       backgroundColor={colors.cardGlass}
+      contentStyle={({ pressed }) => [
+        styles.row,
+        { borderColor: colors.border },
+        pressed && styles.rowPressed,
+      ]}
+      onPress={() => router.push(`/(app)/more/expenses/${expense.id}` as never)}
       actions={[
         {
           key: "open",
@@ -243,15 +248,6 @@ function ExpenseRow({ expense, onDelete }: { expense: Expense; onDelete: () => v
           onPress: onDelete,
         },
       ]}
-    >
-      <Pressable
-        accessibilityRole="button"
-        onPress={() => router.push(`/(app)/more/expenses/${expense.id}` as never)}
-        style={({ pressed }) => [
-          styles.row,
-          { borderColor: colors.border },
-          pressed && styles.rowPressed,
-        ]}
     >
       <View style={[styles.categoryIcon, { backgroundColor: colors.muted }]}>
         <Ionicons name={expenseIcon(expense.category)} size={18} color={colors.primary} />
@@ -304,7 +300,6 @@ function ExpenseRow({ expense, onDelete }: { expense: Expense; onDelete: () => v
         </Text>
         <Ionicons name="chevron-forward" size={16} color={colors.mutedForeground} />
       </View>
-      </Pressable>
     </SwipeableRow>
   );
 }

components/SwipeableRow.tsx

@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import { ReactNode, useRef } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Pressable, type PressableProps, StyleSheet, Text, View } from "react-native";
 import Swipeable, {
   type SwipeableMethods,
 } from "react-native-gesture-handler/ReanimatedSwipeable";
@@ -24,6 +24,9 @@ type SwipeableRowProps = {
   actions: SwipeAction[];
   enabled?: boolean;
   backgroundColor?: string;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  contentStyle?: PressableProps["style"];
 };
 
 export function SwipeableRow({
@@ -31,11 +34,63 @@ export function SwipeableRow({
   actions,
   enabled = true,
   backgroundColor,
+  onPress,
+  onLongPress,
+  contentStyle,
 }: SwipeableRowProps) {
   const { colors } = useAppTheme();
   const styles = useThemedStyles(createSwipeableRowStyles);
   const rowBackground = backgroundColor ?? colors.background;
   const swipeRef = useRef<SwipeableMethods>(null);
+  const rowOpenRef = useRef(false);
+  const suppressPressUntilRef = useRef(0);
+
+  function suppressContentPress() {
+    suppressPressUntilRef.current = Date.now() + 350;
+  }
+
+  function handleContentPress() {
+    if (!onPress) return;
+
+    if (rowOpenRef.current || Date.now() < suppressPressUntilRef.current) {
+      swipeRef.current?.close();
+      rowOpenRef.current = false;
+      return;
+    }
+
+    onPress();
+  }
+
+  function renderContent() {
+    if (!onPress && !onLongPress) {
+      return (
+        <View
+          style={[
+            styles.row,
+            { backgroundColor: rowBackground },
+            typeof contentStyle === "function" ? undefined : contentStyle,
+          ]}
+        >
+          {children}
+        </View>
+      );
+    }
+
+    return (
+      <Pressable
+        accessibilityRole="button"
+        onPress={handleContentPress}
+        onLongPress={onLongPress}
+        style={(state) => [
+          styles.row,
+          { backgroundColor: rowBackground },
+          typeof contentStyle === "function" ? contentStyle(state) : contentStyle,
+        ]}
+      >
+        {children}
+      </Pressable>
+    );
+  }
 
   function renderRightActions() {
     return (
@@ -45,7 +100,9 @@ export function SwipeableRow({
             key={action.key}
             style={[styles.actionButton, { backgroundColor: action.backgroundColor }]}
             onPress={() => {
+              suppressContentPress();
               swipeRef.current?.close();
+              rowOpenRef.current = false;
               action.onPress();
             }}
           >
@@ -58,12 +115,26 @@ export function SwipeableRow({
   }
 
   if (!enabled || actions.length === 0) {
-    return <View style={[styles.row, { backgroundColor: rowBackground }]}>{children}</View>;
+    return renderContent();
   }
 
   return (
-    <Swipeable ref={swipeRef} renderRightActions={renderRightActions} overshootRight={false}>
+    <Swipeable
-      <View style={[styles.row, { backgroundColor: rowBackground }]}>{children}</View>
+      ref={swipeRef}
+      renderRightActions={renderRightActions}
+      overshootRight={false}
+      onSwipeableOpenStartDrag={suppressContentPress}
+      onSwipeableCloseStartDrag={suppressContentPress}
+      onSwipeableWillOpen={() => {
+        suppressContentPress();
+        rowOpenRef.current = true;
+      }}
+      onSwipeableWillClose={suppressContentPress}
+      onSwipeableClose={() => {
+        rowOpenRef.current = false;
+      }}
+    >
+      {renderContent()}
     </Swipeable>
   );
 }