Swipe Actions

A list row that slides left to reveal action buttons. It follows your finger, resists past either end, springs open or shut on release (a quick flick is enough), and every action is also exposed to screen readers as a custom action, so nothing depends on the gesture. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add swipe-actions

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/swipe-actions.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { Text } from "react-native";
import { SwipeActions } from "@/components/ui/swipe-actions";

export default function Example() {
  return (
    <SwipeActions
      actions={[
        { label: "Archive", onPress: () => console.log("archive") },
        { label: "Delete", color: "#dc2626", onPress: () => console.log("delete") },
      ]}
    >
      <Text style={{ padding: 16 }}>Swipe me left</Text>
    </SwipeActions>
  );
}

Props