SwiftUI: Navigation Bar does not fill the top of the screen on iPhone X and newer devices

Question

I've created a master-detail app using SwiftUI and a Navigation View, except the navigation bar doesn't appear properly on the detail view. It won't fill the top portion of the screen (where the time and status icons are) on iPhone X and newer devices. I created a new project in Xcode using the master-detail template and that app rendered just fine. I've compared my app to the template and I honestly can't find anything that's out of place, so any suggestions are welcome!

Here's a screenshot of my app. Notice the navigation bar not filling the top of the screen:

And here's a screenshot of the template app, which displays the bar as it should be:

Here's the code for the master view:

struct ListView: View {

@State var showNewAssignmentModal = false
@Environment(\.managedObjectContext) var context
@FetchRequest(entity: Assignment.entity(), sortDescriptors: [NSSortDescriptor(keyPath: \Assignment.dueDate, ascending: true), NSSortDescriptor(keyPath: \Assignment.name, ascending: true)]) var assignments: FetchedResults<Assignment>

var body: some View {
    NavigationView {
        List(assignments, id: \.self) { assignment in
            AssignmentRow(assignment: assignment).environment(\.managedObjectContext, self.context)
        }

        .navigationBarTitle(Text("Lists"))
        .navigationBarItems(
            leading: EditButton(),
            trailing: Button(
                action: {
                    self.showNewAssignmentModal = true
            }
            ) {
                Image(systemName: "plus").imageScale(.large)

            } .sheet(isPresented: $showNewAssignmentModal) {
                NewAssignmentView().environment(\.managedObjectContext, self.context)
            }
        )

    }
}
}

Here's the code for the detail view:

struct AssignmentDetailView: View {

@Binding var assignment: Assignment
@Environment(\.managedObjectContext) var context

var body: some View {
    Text("Hello")
    .padding()
    .navigationBarTitle(Text(""), displayMode: .inline)

}
}

Answer 1

You should be able to add this modifier to your NavigationView

.edgesIgnoringSafeArea(.top)

to where it will ignore only the top. You can also set .bottom or .all as well depending on the application you need. Hope this works!