SwiftUI List inside ZStack inside NavigationView - swiftui

Question

I am building a screen with list and custom full screen background color. On the top level I have NavigationView. To paint background I am using ZStack. The problem is that when I wrap list in ZStack and scroll it, list items collapse with NavigationView. I can achieve the correct behavior only if the list is direct child of NavView and has no changed background color.
Code:
init() {
// Title text color
let navBarAppearance = UINavigationBar.appearance()
navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
navBarAppearance.backgroundColor = .clear
// Clear list background color
UITableView.appearance().separatorStyle = .none
UITableViewCell.appearance().backgroundColor = .clear
UITableView.appearance().backgroundColor = .clear
UITableViewCell.appearance().selectionStyle = .none
}
var body: some View {
NavigationView {
ZStack {
LinearGradient(gradient: Gradient(colors: [Color("DarkShade"), Color("PrimaryDark")]), startPoint: .top, endPoint: .bottom)
.edgesIgnoringSafeArea(.all)
List(self.viewModel.rooms.enumerated().map({ $0 }), id: \.element.id) { (index, room) in
ZStack {
RoomsItemView(room: room)
.onAppear(perform: {
let count = self.viewModel.rooms.count
if index == count - 1 {
self.viewModel.loadRooms(currentListSize: count)
}
})
NavigationLink(destination: GuestRoomView(room: room)) {
EmptyView()
}
}
}
}
.pullToRefresh(isShowing: self.$isRefreshing, onRefresh: self.onRefresh)
.navigationBarTitle("rooms_title")
.navigationBarBackButtonHidden(true)
.navigationBarItems(
leading:
Button(action: {
self.shouldShowSpotifyAuth = false
}) {
VStack {
Spacer()
HStack {
Image(systemName: "chevron.left")
.resizable()
.scaledToFit()
.frame(height: 20.0)
Spacer()
}
Spacer()
}
.frame(width: 40.0, height: 30.0)
},
trailing:
Button(action: {
print("create room")
}) {
VStack {
Spacer()
HStack {
Spacer()
Image(systemName: "plus")
.resizable()
.scaledToFit()
.frame(height: 20.0)
}
Spacer()
}
.frame(width: 40.0, height: 30.0)
}
)
}
.onAppear(perform: {
self.onRefresh()
})
.onReceive(viewModel.onRoomsUpdate) {
self.isRefreshing = false
}
.gesture(DragGesture().updating($dragOffset, body: { (value, state, transaction) in
if(value.startLocation.x < 20 && value.translation.width > 100) {
self.shouldShowSpotifyAuth = false
}
})
)
}
Expected result:
Expected result
Actual result:
Actual result