SwiftUI - NavigationLink not showing 'Back' or title of the view besides arrow on next view

Question

Noob to SwiftUI and WatchOS. I have NavigationLink wrapped around the row in the list. When I click on the row within the list, it does navigate to new view, but I only see '<' back arrow on the top left of the new view. I don't see word 'Back' or even title of the view on it. Below is my code. My understanding is 'Back' word shows up by default. Am I missing something?

ContentView:

struct ContentView: View {
    @StateObject var userSettingsStore = UserSettingsStore()
    
    var body: some View {
        MainMenuListView()
    }
}

MainMenuListView:

struct MainMenuListView: View {
    @EnvironmentObject var userSettingsStore: UserSettingsStore
    
    var body: some View {
        VStack {
            let menuItems = MenuOptions().menu
            List(menuItems) { item in
                NavigationLink(destination: MenuDestination(rawValue: item.id)?.view) {
                    MenuListRowView(imageName: item.imageName, menuItemName: item.name)
                }.navigationViewStyle(StackNavigationViewStyle())
            }
        }.navigationTitle("Sample Application")
    }
}

Menu Destination returns the view to which each row is supposed to navigate. Let's say I click on row 2 and it navigates to CustomView.

CustomView:

struct CustomView: View {
    @StateObject var viewModel: CustomViewModel
    
    var body: some View {
        VStack {
            HStack {
                Text("Books List")
                Spacer()
                Button(action: {}) {
                    Image(systemName: "calendar.circle").foregroundColor(Color(red: 32 / 255, green: 148 / 255, blue: 249 / 255))
                }.buttonStyle(PlainButtonStyle())
            }
            List(CustomMockData().booksList) { item in
                CustomRowView(bookItem: item)
            }
        }.onAppear() {
            self.viewModel.getBooksList()
        }
    }
}

Below is how the new view looks i.e. just '<' without any text besides it. How do I display the text?

Edit: Adding code for app file.

@main
struct myCustomApp: App {
    @WKExtensionDelegateAdaptor(ExtensionDelegate.self) var delegate
    @SceneBuilder var body: some Scene {
        WindowGroup {
            NavigationView {
                ContentView().environmentObject(UserSettingsStore())
            }
        }

        WKNotificationScene(controller: NotificationController.self, category: "myCategory")
    }
}

I think in SwiftUI, you have to wrap your MainMenuListView in an actual NavigationView {}, right in the body — DaWiseguy, Jun 23 '22 at 23:57

score 1 · Answer 1 · answered Jun 24 '22 at 02:01

I was able to display the title besides '<' back arrow by adding .navigationBarTitle("Main Menu") in my next view i.e. Custom View.

Code:

struct CustomView: View {
    @StateObject var viewModel: CustomViewModel
    
    var body: some View {
        VStack {
            HStack {
                Text("Books List")
                Spacer()
                Button(action: {}) {
                    Image(systemName: "calendar.circle").foregroundColor(Color(red: 32 / 255, green: 148 / 255, blue: 249 / 255))
                }.buttonStyle(PlainButtonStyle())
            }
            List(CustomMockData().booksList) { item in
                CustomRowView(bookItem: item)
            }
        }.navigationBarTitle("Main Menu").onAppear() {
            self.viewModel.getBooksList()
        }
    }
}

score 0 · Answer 2 · answered Jun 24 '22 at 00:00

0

Try wrapping your MainMenuListView in an actual Navigation View:

struct ContentView: View {
    @StateObject var userSettingsStore = UserSettingsStore()

    var body: some View {
        NavigationView{
            MainMenuListView()
        }
    }
}

answered Jun 24 '22 at 00:00

DaWiseguy

786
7
16

I have ContentView wrapped up inside NavigationView in my app file. If I add another NavigationView, then the '<' back arrow stops showing up. Sorry I had missed adding code for my app file. I just edited my post and added it. – tech_human Jun 24 '22 at 00:30
Try using .navigationBarTitle("Sample Application") or .navigationBarTitle(Text("Sample Application")) instead of navigationTitle(). I hope the title text isn't showing in black either, because your code does seem right already. – DaWiseguy Jun 24 '22 at 00:49
Also I am relooking at my old projects, I resorted to using this: .navigationBarTitle("").navigationBarHidden(true), and making my own back arrow and my own title. The back arros uses the .dismiss() command to simply go back one page. – DaWiseguy Jun 24 '22 at 00:51
1

I was able to make it work by adding ".navigationBarTitle("Main Menu")" towards the end in my new view. Adding the code as a comment. I feel like SwiftUI is more like trial and error.. haha.. probably since I am new to it and still learning. – tech_human Jun 24 '22 at 01:59

SwiftUI - NavigationLink not showing 'Back' or title of the view besides arrow on next view

2 Answers2