Use same `navigationBarTitle` and `navigationBarItems` on two views which are shown based on condition

Question

I have a View which shows Text view to show help text for user to tap on plus icon to add group. Once group is added, it shows List view. To show navigation bar, I need to call navigationBarTitle and navigationBarItems on both Text and List view. Below is my code snippet.

import SwiftUI

struct Home:View {
    @EnvironmentObject var dataStore:DataStore
    var body: some View {
        NavigationView {
            if dataStore.groups.isEmpty {
                Text("Tap on + icon to add group.")
                    .font(.caption)
                    .multilineTextAlignment(.center)
                    .padding()
                    .foregroundColor(.gray)
                    .navigationBarTitle(Text("My App Name"), displayMode: .automatic)
                    .navigationBarItems(
                        trailing:
                            NavigationLink(
                                destination:
                                    CreateGroup(),
                                label: {
                                    Image(systemName: "plus")
                                        .foregroundColor(Color.blue)
                                })
                    )
            } else {
                List(dataStore.groups) { groupElement in
                    GroupRow(group: groupElement)
                }
                .navigationBarTitle(Text("My App Name"), displayMode: .automatic)
                .navigationBarItems(
                    trailing:
                        NavigationLink(
                            destination:
                                CreateGroup(),
                            label: {
                                Image(systemName: "plus")
                                    .foregroundColor(Color.blue)
                            })
                )
            }
        }
    }
}

Is there a way to call navigationBarTitle and navigationBarItems only once rather than calling on both Text and List views?

score 1 · Accepted Answer · answered Dec 31 '20 at 07:53

Is there a way to call navigationBarTitle and navigationBarItems only once rather than calling on both Text and List views?

Yes, you can wrap condition into any container, like Group or xStack:

struct Home:View {
    @EnvironmentObject var dataStore:DataStore
    var body: some View {
        NavigationView {
            Group {
                if dataStore.groups.isEmpty {
                    Text("Tap on + icon to add group.")
                        .font(.caption)
                        .multilineTextAlignment(.center)
                        .padding()
                        .foregroundColor(.gray)
                } else {
                    List(dataStore.groups) { groupElement in
                        GroupRow(group: groupElement)
                    }
                }
            }
            .navigationBarTitle(Text("My App Name"), displayMode: .automatic)
            .navigationBarItems(
                trailing:
                    NavigationLink(
                        destination:
                            CreateGroup(),
                        label: {
                            Image(systemName: "plus")
                                .foregroundColor(Color.blue)
                        })
            )

        }
    }
}

Use same `navigationBarTitle` and `navigationBarItems` on two views which are shown based on condition

1 Answers1