Swipe to Delete Row

About this animation

React Native swipe to delete interactions should make intent visible before a destructive action commits. This list row follows a horizontal pan on the UI thread, reveals archive and delete actions, grows the delete icon with distance, and commits removal after the drag passes 60 percent. Use it for inboxes, task lists, saved items, notifications, or other collections where contextual actions need to stay close to the content. Reanimated closes and fades the row before the delete callback runs, while Gesture Handler keeps the drag responsive. Wrap any row content, customize action width and colors, handle archive and delete separately, or use the ref to reveal, close, remove, archive, delete, and reset the row programmatically.

When to use it

• Delete tasks, messages, or saved items from a list.
• Reveal archive and delete actions beside row content.
• Require a deliberate drag before removal commits.
• Open or close contextual actions programmatically.

npx expo install react-native-gesture-handler react-native-reanimated

const rowRef = useRef<SwipeToDeleteRowRef>(null);

<SwipeToDeleteRow ref={rowRef} onDelete={remove} onArchive={archive}>
  <Task />
</SwipeToDeleteRow>;

rowRef.current?.reveal();
rowRef.current?.close();
rowRef.current?.remove();