Black background color on SwiftUI list item when reordering

Question

I am trying to implement list reordering, basic code example:

import SwiftUI

struct ContentView: View {

    @State var items = [
        "One",
        "Two",
        "Three"
    ]

    var body: some View {
        NavigationStack {
            ZStack {
                Color.gray
                    .ignoresSafeArea()

                List($items, id: \.self, editActions: .move) { $item in
                    ListItem(text: item)
                }
                .scrollContentBackground(.hidden)
                .listStyle(.plain)
            }
            .navigationTitle("Test")
            .navigationBarTitleDisplayMode(.inline)
        }
    }

}

struct ListItem: View {

    let text: String

    var body: some View {
        Text(text)
            .frame(maxWidth: .infinity)
            .foregroundColor(.white)
            .padding()
            .background(.blue)
            .clipShape(RoundedRectangle(cornerRadius: 4.0))
            .listRowSeparator(.hidden)
            .listRowBackground(Color.clear)
    }

}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

It all works fine and well however when I long press to begin the drag gesture the background for the list item appears black. I have added all the modifiers such as listRowBackground and scrollContentBackground but the problem persists. Any ideas what I'm doing wrong here?

Answer 1

Use your page background color (gray) for your listRowBackground modifier.

    Text(text)
        .frame(maxWidth: .infinity)
        .foregroundColor(.white)
        .padding()
        .background(.blue)
        .clipShape(RoundedRectangle(cornerRadius: 4.0))
        .listRowSeparator(.hidden)
        .listRowBackground(Color.gray)