How can I implement a selectable view modifier in SwiftUI for list cells?

Below is an explanation of what's happening and a suggested solution.

What’s Happening

Your view modifier uses an internal @State property:

SWIFTCopied
struct ExpenseSelectableCell: ViewModifier {
    @State var isSelected: Bool
    // ...
}

When you pass a new value from the parent view (via the modifier call), the modifier isn’t "listening" for changes because its own @State variable is initialized once and then managed internally. In other words, the boolean you pass in never updates the internal state once it’s set.

The Fix

Since you want the modifier to react to external changes (i.e. when selectedItem changes), remove the @State and simply use a constant property. This way, each time the parent view updates the state, the modifier is recreated with the new value.

Updated Code

SWIFTCopied
struct ExpenseSelectableCell: ViewModifier {
    let isSelected: Bool

    func body(content: Content) -> some View {
        content
            .overlay {
                Color.green.opacity(isSelected ? 0.2 : 0)
            }
    }
}

extension View {
    func selectableCell(isSelected: Bool) -> some View {
        self.modifier(ExpenseSelectableCell(isSelected: isSelected))
    }
}

And your parent view remains the same:

SWIFTCopied
struct AllExpensesView: View {
    @Environment(\.expenseVM) var expensesVM
    @State private var selectedItem: Expense?
    @State var shouldPresentAddExpense = false 

    var body: some View {
        List {
            ForEach(expensesVM.expenses, id: \.self) { expense in
                ExpenseCellView(expense: expense)
                    .selectableCell(isSelected: selectedItem == expense)
                    .listRowSeparator(.hidden)
                    .onTapGesture {
                        selectedItem = expense
                    }
            }
            .onDelete { indexSet in
                Task {
                    try await expensesVM.delete(removeAt: indexSet)
                }
            }
        }
    }
}

Summary

By removing the internal state from your view modifier and using a constant property instead, the modifier will always reflect the current selection state from its parent. This approach simplifies your code while achieving the desired behavior.