Docs
BlogChangelogStar us on GitHub
HomeGuidesEASReferenceLearn

Reference version

ArchiveExpo SnackDiscord and forumsNewsletter

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

SwipeActions

A SwiftUI SwipeActions component for adding leading and trailing swipe actions to row content.

iOS
Included in Expo Go

GitHub

npm

Changelog

Recommended version:
~58.0.0

Expo UI SwipeActions matches the official SwiftUI swipeActions modifier and lets you attach leading or trailing actions to row content.

Installation

Terminal
- npx expo install @expo/ui
- yarn expo install @expo/ui
- pnpm expo install @expo/ui
- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

SwipeActionsExample.tsx
import {
  Button,
  Host,
  List,
  Section,
  SwipeActions,
  Text,
} from '@expo/ui/swift-ui';

export default function SwipeActionsExample() {
  return (
    <Host style={{ flex: 1 }}>
      <List>
        <Section>
          <SwipeActions>
            <Text>Message from Expo</Text>

            <SwipeActions.Actions
              edge="leading"
              allowsFullSwipe={false}>
              <Button
                label="Pin"
                systemImage="pin"
                onPress={() => {}}
              />
            </SwipeActions.Actions>

            <SwipeActions.Actions edge="trailing">
              <Button
                label="Delete"
                systemImage="trash"
                role="destructive"
                onPress={() => {}}
              />
            </SwipeActions.Actions>
          </SwipeActions>
        </Section>
      </List>
    </Host>
  );
}

API

import { SwipeActions } from '@expo/ui/swift-ui';

Components

SwipeActions

iOS

Type: React.Element<SwipeActionsProps>

Applies native SwiftUI swipe actions to its non-slot children.

SwipeActionsProps

children

iOS
Type: ReactNode

The regular content and SwipeActions.Actions action groups.

Inherited props

Actions

iOS

Type: React.Element<SwipeActionsGroupProps>

The buttons revealed when the user swipes the regular content from an edge.

Types

SwipeActionsEdge

iOS

Literal type: string

Acceptable values are: 'leading' | 'trailing'