Prevent swipe rows from opening items

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",
@@ -244,67 +249,57 @@ function ExpenseRow({ expense, onDelete }: { expense: Expense; onDelete: () => v
         },
       ]}
     >
-      <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} />
+      <View style={[styles.categoryIcon, { backgroundColor: colors.muted }]}>
+        <Ionicons name={expenseIcon(expense.category)} size={18} color={colors.primary} />
+      </View>
+      <View style={styles.meta}>
+        <View style={styles.titleRow}>
+          <Text style={[styles.title, { color: colors.foreground }]} numberOfLines={1}>
+            {expense.description}
+          </Text>
+          {expense.receiptCount ? (
+            <View
+              style={[
+                styles.receiptPill,
+                { borderColor: colors.border, backgroundColor: colors.background },
+              ]}
+            >
+              <Ionicons name="document-attach-outline" size={13} color={colors.primary} />
+              <Text style={[styles.receiptPillText, { color: colors.primary }]}>
+                {expense.receiptCount}
+              </Text>
+            </View>
+          ) : null}
         </View>
-        <View style={styles.meta}>
-          <View style={styles.titleRow}>
-            <Text style={[styles.title, { color: colors.foreground }]} numberOfLines={1}>
-              {expense.description}
+        <Text style={[styles.sub, { color: colors.mutedForeground }]} numberOfLines={1}>
+          {formatDate(expense.date)}
+          {expense.category ? ` · ${expense.category}` : ""}
+          {expense.client?.name ? ` · ${expense.client.name}` : ""}
+        </Text>
+        <View style={styles.tagRow}>
+          {expense.billable ? (
+            <Text style={[styles.tag, { color: colors.primary, borderColor: colors.border }]}>
+              Billable
             </Text>
-            {expense.receiptCount ? (
-              <View
-                style={[
-                  styles.receiptPill,
-                  { borderColor: colors.border, backgroundColor: colors.background },
-                ]}
-              >
-                <Ionicons name="document-attach-outline" size={13} color={colors.primary} />
-                <Text style={[styles.receiptPillText, { color: colors.primary }]}>
-                  {expense.receiptCount}
-                </Text>
-              </View>
-            ) : null}
-          </View>
-          <Text style={[styles.sub, { color: colors.mutedForeground }]} numberOfLines={1}>
-            {formatDate(expense.date)}
-            {expense.category ? ` · ${expense.category}` : ""}
-            {expense.client?.name ? ` · ${expense.client.name}` : ""}
-          </Text>
-          <View style={styles.tagRow}>
-            {expense.billable ? (
-              <Text style={[styles.tag, { color: colors.primary, borderColor: colors.border }]}>
-                Billable
-              </Text>
-            ) : null}
-            {expense.reimbursable ? (
-              <Text style={[styles.tag, { color: colors.foreground, borderColor: colors.border }]}>
-                Reimbursable
-              </Text>
-            ) : null}
-            {expense.taxDeductible ? (
-              <Text style={[styles.tag, { color: colors.success, borderColor: colors.border }]}>
-                Tax
-              </Text>
-            ) : null}
-          </View>
+          ) : null}
+          {expense.reimbursable ? (
+            <Text style={[styles.tag, { color: colors.foreground, borderColor: colors.border }]}>
+              Reimbursable
+            </Text>
+          ) : null}
+          {expense.taxDeductible ? (
+            <Text style={[styles.tag, { color: colors.success, borderColor: colors.border }]}>
+              Tax
+            </Text>
+          ) : null}
         </View>
-        <View style={styles.amountStack}>
-          <Text style={[styles.amount, { color: colors.foreground }]}>
-            {formatCurrency(expense.amount, expense.currency)}
-          </Text>
-          <Ionicons name="chevron-forward" size={16} color={colors.mutedForeground} />
-        </View>
-      </Pressable>
+      </View>
+      <View style={styles.amountStack}>
+        <Text style={[styles.amount, { color: colors.foreground }]}>
+          {formatCurrency(expense.amount, expense.currency)}
+        </Text>
+        <Ionicons name="chevron-forward" size={16} color={colors.mutedForeground} />
+      </View>
     </SwipeableRow>
   );
 }