CODEWITHSUNDEEP
iosswiftuistatusbartoolbaritems
Mike G
Mike G

Reputation: 115

Swift UI Clicking navigation bar link hides status bar on back

I wrote a simple Swift UI app that creates a NavigationLink on the navigation toolbar and creates a status bar at the bottom of the display. When clicking on the gear link on the navigation bar, it takes you to the child view, but when you return to the parent view, the status bar gets hidden. If you click on the NavigationLink in the middle of the screen and return to the parent view, the status bar gets displayed again.

This looks like a bug in Swift UI and does anyone know how to fix?

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: Text("Child view")) {
                Text("Hello, World!")
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing, content: { 
                    NavigationLink(destination: Text("Settings view"),
                        label: { Image(systemName: "gearshape.fill")
                    })
                })
                ToolbarItem(placement: .status, content: {
                    Text("Checking for messages...") 
                })
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Upvotes: 0

Views: 1001

Answers (1)

Mike G
Mike G

Reputation: 115

The issue is that Swift UI doesn't handle NavigationLink properly inside a toolbar.

The workaround is to place a Button into a toolbar and use a hidden NavigationLink in the code.

This is a link to the answer that resolved my issue. SwiftUI - Make toolbar's NavigationLink use detail view

Here is the code that implements my original code with the workaround.

struct ContentView: View {
    @State var settingsLinkSelected = false
    var body: some View {
        NavigationView {
            NavigationLink(destination: Text("Second view")) {
                Text("Hello, World!")
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing,
                            content: { Button(action: { settingsLinkSelected = true },
                            label: { Image(systemName: "gearshape.fill") }) })
                ToolbarItem(placement: .status, 
                            content: { Text("Checking for messages...") })
            }
            .background(
                NavigationLink(
                    destination: Text("Settings View"),
                    isActive: $settingsLinkSelected
                ) {
                    EmptyView()
                }.hidden()
            )
        }
    }
}

Upvotes: 1

Related Questions