Search code examples
swiftuipopupnavigationbar

Navigation bar peeking out from behind of the Popup view in swift

I want the popup view to appear over the current context. Here, the navigation bar on the screen behind is clearly visible. Is there a way to hide this?

enter image description here

struct RestaurantSelectionView: View {

    @State private var searchText: String = ""
    @State private var selectedLocation: String = ""
    @ObservedObject private var viewModel: RestaurantSelectionViewModel
    @State private var showNoPermissionView: Bool = false
    @State private var showingPopover = false

    var body: some View {

        ZStack {
            VStack(alignment: .leading, spacing: 0) {
                // TODO: - localise text
                CustomSearchBar(debouncedText: $searchText, selectedLocation: $selectedLocation, placeholderText: "Your address, city or postal code")
                ZStack {
                    VStack(alignment: .center, spacing: 24) {
                        ZStack {
                            Image(Images.dottedCircle.name)
                            Image(Images.redPin.name)
                        }
                        // TODO: - localise text
                        Text("Turn on location services\n to find an A&W near you.")
                            .lineLimit(2)
                            .foregroundColor(Color(Colors.brown500.color))
                    }
                    .padding(.horizontal, 16)
                    .isHidden(!showNoPermissionView)
                    VStack {
                        List(self.viewModel.locations, id: \.id) { location in
                            LocationListCell(city: location)
                                .listRowSeparator(.hidden)
                                .onTapGesture {
                                    searchText = ""
                                    selectedLocation = location.description
                                    viewModel.fetchCoordinates(placeId: location.placeId)
                                }
                        }
                        .isHidden(viewModel.locations.isEmpty)
                        .listStyle(.plain)
                        .background(Color.clear)
                    }
                }
            }
        .overlay {
            if $showingPopover.wrappedValue {
                CustomModalPopUpView(modalType: .loginToPin, show: $showingPopover)
                    .ignoresSafeArea()
            }
        }
}

Tried to add .navigationBarHidden(showingPopover) but the navigation bar disappears completely and is not visible through the blur popup background.

Solution

  • You need to put the "CustomModalPopUpView" in the ZStack and use a frame modifier. This allows it to stretch beyond the borders of the ZStack and cover the Navigation Bar.

    ZStack {
    // Your view here
    
    if show {
        CustomModalPopUpView()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .ignoresSafeArea()
    }
}