SwipeActions

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

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

Usage

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`

Type: React.Element<SwipeActionsProps>

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

SwipeActionsProps

`children`

Type: ReactNode

The regular content and SwipeActions.Actions action groups.

Inherited props

CommonViewModifierProps

`Actions`

Type: React.Element<SwipeActionsGroupProps>

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

Types

`SwipeActionsEdge`

Literal type: string

Acceptable values are: 'leading' | 'trailing'

Modifiers

Use these modifiers in the modifiers prop of the SwiftUI version.

Modifiers for any view

Sources

The original Expo docs for this page:

SwipeActions (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/swipeactions.md)

On this page