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

Time:06-24

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?

enter image description here

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")
    }
}

CodePudding user response:

Try wrapping your MainMenuListView in an actual Navigation View:

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

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

CodePudding user response:

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()
        }
    }
}
  • Related