SwiftUI - show Alert from Button inside of ToolbarItem

Question

I want to do something similar to the code below, where it shows an alert when a user taps a navigation bar item button. However the code below doesn't work, the alerts do not display.

I can't add the alert modifiers to the NavigationView because my actual app is more complex and the VStack is a view in another file, also adding multiple alert modifiers to the same view doesn't work (only the last one added works).

import SwiftUI

struct SOQuestionView: View {
    @State private var showAlert1 = false
    @State private var showAlert2 = false

    var body: some View {
        NavigationView {
            VStack {
                Text("Click button in toolbar")
            }
            .navigationBarTitle(Text("Title"))
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        showAlert1 = true
                    }) {
                        Image(systemName: "square.and.arrow.up")
                    }
                    .alert(isPresented: $showAlert1) {
                        Alert(title: Text("Alert 1"))
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        showAlert2 = true
                    }) {
                        Image(systemName: "square.and.arrow.up.fill")
                    }
                    .alert(isPresented: $showAlert2) {
                        Alert(title: Text("Alert 2"))
                    }
                }
            }
        }
    }
}

Easiest solution will be to make each button into its own subview. This way each subview can have its own .alert modifier. — nicksarno, Dec 24 '20 at 04:26
That may work too but for this example I think it's easier to go with the solution from @Asperi — marchinram, Dec 26 '20 at 06:35

score 8 · Answer 1 · edited Aug 23 '22 at 15:05

The solution is to use alert outside of toolbar and with different constructor. Tested with Xcode 12.1 / iOS 14.1.

struct SOQuestionView: View {
    @State private var alertItem: String? // assuming item confirmed to Identifiable
    
    var body: some View {
        NavigationView {
            VStack {
                Text("Click button in toolbar")
            }
            .navigationBarTitle(Text("Title"))
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {
                        alertItem = "Alert 1"
                    }) {
                        Image(systemName: "square.and.arrow.up")
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        alertItem = "Alert 2"
                    }) {
                        Image(systemName: "square.and.arrow.up.fill")
                    }
                }
            }
            .alert(item: $alertItem) { item in
                Alert(title: Text(item))
            }
        }
    }
}

This works but you need to make sure you make String conform to Identifiable — marchinram, Dec 26 '20 at 06:36

score 0 · Answer 2 · answered Jun 15 '23 at 10:56

I use this view to pass buttons with alert, it works inside ToolbarItem

struct AlertButton<L: View, M: View, A: View>: View {
    @ViewBuilder let label: () -> L
    let alertTitle: LocalizedStringKey
    @ViewBuilder let alertMessage: () -> M
    @ViewBuilder let actions: () -> A

    @State private var isAlertPresented = false

    var body: some View {
        Button {
            isAlertPresented.toggle()
        } label: {
            label()
        }
        .alert(
            alertTitle,
            isPresented: $isAlertPresented,
            actions: actions,
            message: alertMessage
        )
    }
}

SwiftUI - show Alert from Button inside of ToolbarItem

2 Answers2