Text Don't Show in swipeActions buttons !

Question

Ammar S. Mitoori OP

Created Jul ’24

Replies 3

Boosts 0

Participants 4

Hi,

I have the below code and don't know why the text doesn't show fro swipe buttons just the icons show ?

Kind Regards

import SwiftUI

struct NewView: View {
    var body: some View {
        NavigationStack {
            List {
                ForEach(1...7, id: \.self) { number in
                    VStack {
                        Text("Item \(number)")
                            .padding()
                    }
                    .swipeActions(edge: .trailing) {
                        Button(role: .destructive) {
                            withAnimation {
                                deletePatient2()
                            }
                            
                        } label: {
                            Label("Delete", systemImage: "trash.fill")
                        }
                        
                        Button {
                            deletePatient2()
                            // toDoToEdit = item
                        } label: {
                            Label("Edit", systemImage: "pencil")
                        }
                        .tint(.orange)
                    }
                }
            }
        }
        .listStyle(.plain)
    }
    
    func deletePatient2() {
    }
}

#Preview {
    NewView()
}

Boost

Answer 1

darkpaw OP

Jul ’24

Although it's not actually mentioned on this page, from the example it looks like the text isn't displayed at all, just the images.

Maybe the text is used for accessibility, where someone cannot see the images and so iOS reads out the text?

0

Answer 2

Frameworks Engineer OP

Apple

Jul ’24

Accepted Answer

Swipe actions may display the label's text, icon, or both, depending on the height of the row and the platform.

iOS and iPadOS prefer showing the icon instead of the title when the row isn't tall enough to display both.

In your example, if you make the content of the row take up more vertical space, such as by adding more text or increasing the the padding, you'll see that both the text and icon are displayed. (In the video you linked to, the row content is much taller.)

1

Answer 3

Ammar S. Mitoori OP

Jul ’24

Thanks, it's working now, one last question is it possible to use views such as in code below ? maybe for example I want to show to circle buttons ? I remember Apple Mail used this design before ?

Kind Regards

                        Button(role: .destructive) {
                            withAnimation {
                                deletePatient2()
                            }
                            
                        } label: {
                            View1()
                        }
                        
                        Button {
                            deletePatient2()
                        } label: {
                            View2()
                        }
                        .tint(.orange)
                    }

0