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>
  );
}

A list row swiped part way open, showing its leading Pin action beside the label Message from Expo.

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.

Expo UI lets you put any of the 89 modifiers for any view on SwipeActions, but not all of them do something here.

74 change what you see on SwipeActions.
2 have no visible effect on SwipeActions.
13 work only in one place, such as a widget or a Grid.

Where the modifiers go

modifiers apply to the row content, with the swipe actions attached. Only the first child that is not SwipeActions.Actions shows. Swipe actions work only on a row in a List.

Best modifiers for SwipeActions

These modifiers are the ones that you use most with SwipeActions.

Also works on SwipeActions

SwipeActions takes these modifiers too, and each one works in the usual way.

No visible effect on SwipeActions

SwipeActions accepts these modifiers, but you see no change. They do not give an error.

Modifier	Why nothing happens
`layoutPriority`	It has an effect only when the view shares an axis with other views in a stack.
`zIndex`	It changes the order of views that cover each other in the same parent, and SwipeActions does not stack its children.

Only in some places

These modifiers work only in a widget, in a Grid, in a Namespace or in a parent that asks for them.

Modifier	Where it works
`activityBackgroundTint`	Works only in a Live Activity. It has no effect in the app.
`alignmentGuide`	Has an effect only when the parent, such as a `VStack` or `ZStack`, aligns its children by the same guide.
`containerBackground`	Works only in a widget, or in a navigation container when you use a `navigation` placement.
`glassEffectId`	Works only on a view that also has `glassEffect`, in a `GlassEffectContainer` and a `Namespace`.
`gridCellAnchor` iOS 16+	Works only on a cell of a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellColumns`	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridCellUnsizedAxes`	Works only on a view in a `Grid`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`gridColumnAlignment` iOS 16+	Works only on a view in a `Grid.Row`. `Grid` is in `@expo/ui/swift-ui`, but it has no Expo docs page.
`invalidatableContent` iOS 17+	Has an effect only when a parent view uses `redacted` with the `invalidated` reason.
`matchedGeometryEffect`	Works only in a `Namespace`. Give two views the same `id` and change between them with an animation.
`privacySensitive`	Has an effect only when a parent view uses `redacted` with the `privacy` reason.
`unredacted`	Has an effect only in a parent view that uses `redacted`.
`widgetURL`	Works only in a widget. It has no effect in the app.

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