SwiftUI NavigationBar empty space under the title

Question

I was working on Xcode 12 and upgraded to 13. Now I'm seeing a weird empty space under the navigation bar title text. I have shared some screenshots.

Here is the another image that have the scrollview, and the navigation bar is overlapping it.

Here is the code.

struct ProductDetailScreen: View {
        
    let product: Product
    
    @State var productVariation: ProductVariation?
    
    var body: some View {
        ZStack{
            Color.themeBackground
                .ignoresSafeArea()
            VStack{
                VStack{
                    AsyncImage(
                        url: URL(string: product.image)!,
                        placeholder: {
                            ProgressView()
                                .progressViewStyle(CircularProgressViewStyle(tint: Color.themeBackground))
                        },
                        image: {
                            Image(uiImage: $0)
                                .resizable()
                        }
                    )
                    .frame(height: 250, alignment: .center)
                    .cornerRadius(10)
                    FixedSpacer(height: 10)
                    LazyVGrid(columns: [GridItem(.adaptive(minimum: 60))]){
                        ForEach(product.variations, id: \.self) { variation in
                            VariationSizeButtonView(productVariation: $productVariation, variation: variation)
                        }
                    }
                    
                    Spacer()
                    
                    if productVariation != nil {
                        NavigationButton(text: "Select Photos", destination: AnyView(SelectPhotosScreen(product: product, productVariation: self.productVariation!)))
                    }
                    
                }
                .frame(
                    minWidth: 0,
                    maxWidth: .infinity,
                    minHeight: 0,
                    maxHeight: .infinity,
                    alignment: .topLeading
                )
                Spacer()
            }
            .padding(.horizontal, 24)
        }
        .navigationBarTitle(product.name)
        .navigationBarTitleDisplayMode(.inline)
    }
}

Here is the code for select photo screen.

struct SelectPhotosScreen: View {
    
    @State private var id = 1
    @State var product: Product
    @State var uploadingPhotos = false
    @State var productVariation: ProductVariation
    @StateObject var selectedImagesViewModel = SelectedImagesViewModel()
    @EnvironmentObject var cartViewModel: CartViewModel
    
    let imageUploaderService = ImageUploaderService()
    
    
    var body: some View {
        ZStack{
            Color.themeBackground
                .ignoresSafeArea()
            VStack{
                VStack {
                    PhotoSelectionOptions(selectedImagesViewModel: selectedImagesViewModel)
                    SelectedPhotoDisplayer(selectedImagesViewModel: selectedImagesViewModel)
                }
                Spacer()
                if uploadingPhotos && (selectedImagesViewModel.pendingImages() > 0) {
                    ProgressView("Uploading....", value:  Float(selectedImagesViewModel.uploadedImages()), total: Float(selectedImagesViewModel.images.count))
                        .padding(.horizontal, 24)
                        .foregroundColor(.white)
                        .frame(maxWidth: .infinity)
                }
                if !selectedImagesViewModel.images.isEmpty && !uploadingPhotos{
                    RoundedButton(text: "Upload Photos", action: {
                        uploadingPhotos = true
                        imageUploaderService.uploadImages(selectedImagesViewModel: selectedImagesViewModel)
                    })
                }
                if (selectedImagesViewModel.pendingImages() <= 0) && (selectedImagesViewModel.uploadedImages() >= 1) {
                    NavigationButton(text: "Order Summary", destination: AnyView(OrderSummaryScreen(
                                                                                    cartItem: CartItem(
                                                                                        id: self.product.id,
                                                                                        selectedImages: self.selectedImagesViewModel,
                                                                                        product: self.product,
                                                                                        productVariation: self.productVariation
                                                                                    )
                                                                                )))
                }
            }
            .padding(.horizontal, 24)
        }
        .navigationBarTitle("Select Photos", displayMode: .inline)
    }
}

Both Screens are navigating from the home screen that's code is here.

struct ContentView: View {
    let greet = Greeting().greeting()

    var body: some View {
        NavigationView{
            HomeScreen()
                .navigationTitle("")
                .navigationBarHidden(true)
        }
        .navigationAppearance(backgroundColor: .themeBackground, foregroundColor: .white)
    }
}

It only happened after upgrading Xcode to 13 and iOS 15.

Answer 1

Just set .navigationBarTitle("", displayMode: .inline)