Skip to content

Add swipe-to-delete for expenses with undo functionality #281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Devasy wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add swipe-to-delete for expenses with undo functionality #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions mobile/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import React from 'react';
import AppNavigator from './navigation/AppNavigator';
import { PaperProvider } from 'react-native-paper';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { AuthProvider } from './context/AuthContext';

export default function App() {
return (
<AuthProvider>
<PaperProvider>
<AppNavigator />
</PaperProvider>
</AuthProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<AuthProvider>
<PaperProvider>
<AppNavigator />
</PaperProvider>
</AuthProvider>
</GestureHandlerRootView>
);
}
3 changes: 3 additions & 0 deletions mobile/api/groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ export const getOptimizedSettlements = (groupId) =>
export const createExpense = (groupId, expenseData) =>
apiClient.post(`/groups/${groupId}/expenses`, expenseData);

export const deleteExpense = (groupId, expenseId) =>
apiClient.delete(`/groups/${groupId}/expenses/${expenseId}`);

export const getGroupDetails = (groupId) => {
return Promise.all([getGroupMembers(groupId), getGroupExpenses(groupId)]);
};
Expand Down
7 changes: 7 additions & 0 deletions mobile/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
69 changes: 69 additions & 0 deletions mobile/components/SwipeableExpenseRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React, { useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
import Reanimated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated';
import { IconButton } from 'react-native-paper';

const SwipeableExpenseRow = ({ children, onSwipeableOpen }) => {
const swipeableRef = useRef(null);

const renderRightActions = (progress, drag) => {
const style = useAnimatedStyle(() => {
const scale = interpolate(
drag.value,
[-80, 0],
[1, 0],
Extrapolation.CLAMP
);
return {
transform: [{ scale }],
};
});

return (
<View style={styles.rightActionContainer}>
<Reanimated.View style={[styles.rightAction, style]}>
<IconButton
icon="delete"
iconColor="white"
size={24}
onPress={() => {
swipeableRef.current?.close();
onSwipeableOpen();
}}
/>
</Reanimated.View>
</View>
);
};
Comment on lines +10 to +38
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

useAnimatedStyle called inside a nested function violates the Rules of Hooks.

renderRightActions is a callback, not a React component or custom hook. Calling useAnimatedStyle inside it can lead to unpredictable behavior. Extract the right action into its own component.

Additionally, onSwipeableOpen can be triggered twice for the same expense: once via the onSwipeableOpen prop on ReanimatedSwipeable (Line 44) when the user swipes past the threshold, and again via the onPress handler (Line 32) if the user taps the delete button. In GroupDetailsScreen, this calls handleDelete twice for the same item, causing the first pending expense to be immediately committed and a duplicate API call.

Proposed fix: extract RightAction into its own component and remove duplicate trigger 
-const SwipeableExpenseRow = ({ children, onSwipeableOpen }) => {
+const RightAction = ({ drag, onDelete }) => {
+  const style = useAnimatedStyle(() => {
+    const scale = interpolate(
+      drag.value,
+      [-80, 0],
+      [1, 0],
+      Extrapolation.CLAMP
+    );
+    return { transform: [{ scale }] };
+  });
+
+  return (
+    <View style={styles.rightActionContainer}>
+      <Reanimated.View style={[styles.rightAction, style]}>
+        <IconButton
+          icon="delete"
+          iconColor="white"
+          size={24}
+          onPress={onDelete}
+        />
+      </Reanimated.View>
+    </View>
+  );
+};
+
+const SwipeableExpenseRow = ({ children, onSwipeableOpen }) => {
   const swipeableRef = useRef(null);

-  const renderRightActions = (progress, drag) => {
-    const style = useAnimatedStyle(() => {
-      const scale = interpolate(
-        drag.value,
-        [-80, 0],
-        [1, 0],
-        Extrapolation.CLAMP
-      );
-      return {
-        transform: [{ scale }],
-      };
-    });
-
-    return (
-      <View style={styles.rightActionContainer}>
-        <Reanimated.View style={[styles.rightAction, style]}>
-          <IconButton
-            icon="delete"
-            iconColor="white"
-            size={24}
-            onPress={() => {
-              swipeableRef.current?.close();
-              onSwipeableOpen();
-            }}
-          />
-        </Reanimated.View>
-      </View>
-    );
-  };
+  const handleDelete = () => {
+    swipeableRef.current?.close();
+    onSwipeableOpen();
+  };
+
+  const renderRightActions = (_progress, drag) => (
+    <RightAction drag={drag} onDelete={handleDelete} />
+  );

   return (
     <ReanimatedSwipeable
       ref={swipeableRef}
       renderRightActions={renderRightActions}
-      onSwipeableOpen={onSwipeableOpen}
+      onSwipeableOpen={handleDelete}
       rightThreshold={40}
     >
       {children}
     </ReanimatedSwipeable>
   );
 };

Note: Even with the extraction, both the swipe-open and button-press paths call the same handleDelete, but this eliminates the double-fire scenario where the onSwipeableOpen prop fires on gesture and the button onPress fires separately. If the library fires onSwipeableOpen when close() is called after a full open, consider adding a guard (e.g., a ref flag) to prevent duplicate calls.

🧰 Tools
🪛 Biome (2.3.14)

[error] 11-11: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)

🤖 Prompt for AI Agents 
In `@mobile/components/SwipeableExpenseRow.js` around lines 10 - 38, The
renderRightActions callback violates Hooks rules by calling useAnimatedStyle
inside a nested function and also causes duplicate delete triggers because
onSwipeableOpen is invoked both by the ReanimatedSwipeable prop and the
IconButton onPress; fix by extracting the right action into a new component
(e.g., RightAction) that uses useAnimatedStyle at top-level of that component,
render <RightAction .../> from renderRightActions, and change the IconButton
onPress to only close the swipeable (using swipeableRef.current?.close()) or
call a guarded delete helper (use a local ref flag like isDeletingRef to prevent
duplicate onSwipeableOpen calls) instead of directly calling onSwipeableOpen;
ensure ReanimatedSwipeable still receives the onSwipeableOpen prop unchanged so
the delete flow runs only once.


return (
<ReanimatedSwipeable
ref={swipeableRef}
renderRightActions={renderRightActions}
onSwipeableOpen={onSwipeableOpen}
rightThreshold={40}
>
{children}
</ReanimatedSwipeable>
);
};

const styles = StyleSheet.create({
rightActionContainer: {
width: 80,
backgroundColor: '#dd2c00',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 16, // Matches the card margin in GroupDetailsScreen
borderTopRightRadius: 12, // Approximate card radius
borderBottomRightRadius: 12,
},
rightAction: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

export default SwipeableExpenseRow;
153 changes: 153 additions & 0 deletions mobile/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions mobile/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@
"react": "19.1.0",
"react-dom": "19.1.0",
"react-native": "0.81.5",
"react-native-gesture-handler": "^2.30.0",
"react-native-paper": "^5.14.5",
"react-native-reanimated": "^4.2.1",
"react-native-safe-area-context": "^5.4.0",
"react-native-screens": "^4.11.1",
"react-native-web": "^0.21.0"
Expand Down
Loading
Loading