Swipe Actions for the Channel List

Changing the Swipe Actions UI

When the user swipes left on a channel in the channel list, there are additional actions that can be performed on that channel. By default, one of them is the deleting of a conversation, while the other one is about performing other actions.

The SwiftUI SDK allows you to either use the same view, with additional actions you want to provide, or inject a completely different view, with your own design.

Adding Additional Actions

First, we will explore how you can extend the existing channel actions view with your own actions. The default actions provided by the SDK are leaving group, muting/un-muting group and users, as well as deleting the conversation.

Let's add an additional action that will freeze the channel. Set the supportedMoreChannelActions closure on ChannelListConfig:

let channelListConfig = ChannelListConfig(
    supportedMoreChannelActions: { options in
        var defaultActions = ChannelAction.defaultActions(for: options)

        let freeze: @MainActor () -> Void = {
            let controller = InjectedValues[\.chatClient].channelController(for: options.channel.cid)
            controller.freezeChannel { error in
                if let error {
                    options.onError(error)
                } else {
                    options.onDismiss()
                }
            }
        }

        let confirmationPopup = ConfirmationPopup(
            title: "Freeze channel",
            message: "Are you sure you want to freeze this channel?",
            buttonTitle: "Freeze"
        )

        let channelAction = ChannelAction(
            title: "Freeze channel",
            iconName: "person.crop.circle.badge.minus",
            action: freeze,
            confirmationPopup: confirmationPopup,
            isDestructive: false
        )

        defaultActions.insert(channelAction, at: 0)
        return defaultActions
    }
)
let utils = Utils(channelListConfig: channelListConfig)
let streamChat = StreamChat(chatClient: chatClient, utils: utils)

Let's explore the code sample above in more detail. First, we take the currently default actions provided by the SDK. If you don't want to use them as a basis, you can create a new list of actions from scratch.

The SupportedMoreChannelActionsOptions provides:

• channel – the channel for which to provide actions.
• onDismiss – callback to call on success (dismisses the actions view).
• onError – callback to call on failure (displays an error alert).

Next, we create the freeze action, which creates a channel controller and executes the freezeChannel method of the low-level chat client. In the completion handler, we call onError or onDismiss depending on the result.

You can optionally specify a confirmation popup via ConfirmationPopup, which asks the end-user to confirm the action. Pass nil for the popup to execute the action immediately.

Swapping the Whole View

If the user interface or logic don't match your app's requirements, you can easily create your own view and inject it in place of the SDK's default one. Implement makeMoreChannelActionsView in your ViewFactory:

func makeMoreChannelActionsView(
    options: MoreChannelActionsViewOptions
) -> some View {
    VStack {
        Text("This is our custom view")
        Spacer()
        HStack {
            Button {
                options.onDismiss()
            } label: {
                Text("Action")
            }
        }
        .padding()
    }
}

The MoreChannelActionsViewOptions provides:

• channel – the channel for which actions are shown.
• swipedChannelId – binding to the currently swiped channel id.
• onDismiss – callback to dismiss the actions view.
• onError – callback when an error occurs.

Afterwards, don't forget to inject your custom factory to the view hierarchy.

var body: some Scene {
    WindowGroup {
        ChatChannelListView(viewFactory: CustomViewFactory.shared)
    }
}