How to programmatically make a List's editMode inactive when leaving the view with SwiftUI?

Question

Given a List view with an EditButton() in there, if the view is being edited (user tapped the Edit button), how can one disable the edit mode programmatically when the user navigates away from the view? (e.g. similar behavior to the Favorites view in the Phone app on the iPhone)

struct ContentView2: View {
    @State var fruits = ["Apple", "Banana"]

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .onDelete { _ in
                    print("Delete")
                }
            }
            .toolbar {
                EditButton()
            }
        }
        .onDisappear {
            // make List's editMode be .inactive; how?
        }
    }
}

Answer 1

You can use .environment to bind the List's current edit mode with a @State property, as shown in this awesome article.

struct ContentView: View {
    @State var editMode = EditMode.inactive /// the edit mode

    @State var fruits = ["Apple", "Banana"]
    
    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .onDelete { _ in
                    print("Delete")
                }
            }
            .toolbar {
                EditButton()
            }
            .environment(\.editMode, $editMode) /// bind it here!
        }
        .onDisappear {
            editMode = .inactive /// set to inactive
        }
    }
}

Also, your onDisappear won't be called if you're using a NavigationLink to present a new view, because the NavigationView that you attached it to won't actually disappear. You should attach it to the NavigationLink's label instead (from this answer).

Final code:

struct ContentView: View {
    @State var editMode = EditMode.inactive /// the edit mode
    @State var fruits = ["Apple", "Banana"]
    
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination:  Text("New view!")) {
                    Text("Navigate away")
                        .onDisappear {
                            editMode = .inactive /// set to inactive
                        }
                }
                
                List {
                    ForEach(fruits, id: \.self) { fruit in
                        Text(fruit)
                    }
                    .onDelete { _ in
                        print("Delete")
                    }
                }
                .toolbar {
                    EditButton()
                }
                .environment(\.editMode, $editMode) /// bind it here!
            }
        }
    }
}

Result:

Without editMode = .inactive	With editMode = .inactive