Search code examples
swiftuimapkit

SwiftUI - Map isn't diplayed properly when embedded in other view

I have a straightforward view like this:

import SwiftUI
import MapKit

   struct Incoming: View {

   var body: some View {
       NavigationStack {
          Map()        
       }
   }
}

And a more complicated one like this:

import SwiftUI

enum TabbedItems: Int, CaseIterable{
case onroute = 0
case archived
case settings
case profile

var title: String{
    switch self {
    case .onroute:
        return "Incoming"
    case .archived:
        return "Delivered"
    case .settings:
        return "Settings"
    case .profile:
        return "Profile"
    }
}

var iconName: String{
    switch self {
    case .onroute:
        return "onroute"
    case .archived:
        return "parcels"
    case .settings:
        return "settings"
    case .profile:
        return "profile"
    }
}
}

 struct MainTabbedView: View {

  @State var selectedTab = 0

  var body: some View {
    
    ZStack(alignment: .bottom){
        TabView(selection: $selectedTab) {
            Incoming()
                .tag(0)

            Archived()
                .tag(1)

            SettingsView()
                .tag(2)

            Profile()
                .tag(3)
        }

        ZStack{
            HStack{
                ForEach((TabbedItems.allCases), id: \.self){ item in
                    Button{
                        selectedTab = item.rawValue
                    } label: {
                        CustomTabItem(imageName: item.iconName, title: item.title, 
      isActive: (selectedTab == item.rawValue))
                    }
                }
            }
            .padding(6)
        }
        .frame(height: 70)
        .background(Color("tabBarBG"))
        .cornerRadius(35)
        .padding(.horizontal, 20)
    }
    .ignoresSafeArea(.keyboard, edges: .bottom)
}
}

extension MainTabbedView{
func CustomTabItem(imageName: String, title: String, isActive: Bool) -> some View{
    
    HStack(spacing: 10){
        Spacer()
        
        if title == "Profile" {
            Image(isActive ? "\(imageName)_active" : "\(imageName)")
                .resizable()
                .renderingMode(.original)
                .foregroundColor(isActive ? Color("iconActive") : Color("iconInactive"))
                .aspectRatio(contentMode: .fit)
                .frame(height:38)
        } else {
            Image(isActive ? "\(imageName)_active" : "\(imageName)")
                .resizable()
                .renderingMode(.template)
                .foregroundColor(isActive ? Color("iconActive") : Color("iconInactive"))
                .aspectRatio(contentMode: .fit)
                .frame(height:20)
        }
        
        if isActive{
            Text(title)
                .font(.system(size: 13))
                .fontWeight(.bold)
                .foregroundColor(isActive ? Color("textActive") : .gray)
        }
        
        Spacer()
    }
    .frame(width: isActive ? .infinity : 60, height: 55)
    .background(isActive ? Color("tabBarSelected") : Color("tabBarBG"))
    .cornerRadius(30)
}
}

Everything looks ok but one thing: the map. I can't figure out why it looks good in its view, but looks blurry at the bottom when embedded in my MainTabbedView.

enter image description here

I tried to make the frame for the map ".infinity" for maxWidth and maxHeight: no success; I tried to put ".ignoresafearea" under the map: no success. I tried to do both things on the "Incoming()" tab in my MainTabbedView: no success.

Is there something I'm unaware of?

Tried also to create a simple view with just a colored background and it's displayed correctly in my MainTabbedView. The problem looks to be the map. Any suggestions? Thanks in advance.

EDIT: this issue looks to be a different problem than mine and it doesn't solve my problem.

Solution

  • try this approach to make the Map go down to the bottom:

    TabView(selection: $selectedTab) {
    Incoming().tag(0)
    Archived().tag(1)
    SettingsView().tag(2)
    Profile().tag(3)
}
.ignoresSafeArea()  // <--- here
.tabViewStyle(.page(indexDisplayMode: .never)) // <--- here