1

My SwiftUI project refuses to display the navigation title after a certain point. I'm using a navigation structure that I haven't seen implemented on any example projects I've seen, but it makes sense to me and has been seeming to work thus far. My suspicion is that since I'm using a different navigation structure that it is part of the problem. The .navigationBar is there on every page, but the title doesn't display.

SettingsView.swift screen

I've tried many solutions on Stack Overflow and otherwise. I've tried every combination of .navigationBarHidden(false), .navigationBarTitle() and .navigationBarBackButtonHidden(true) on every page listed below, with no change. I've also tried every location I could think of to place these combinations of .navigationBar modifiers.

Recently, I discovered .toolbar, and this changes nothing either. My suspicion is that (as seen in the code snippets below) since the NavigationView is in the first view (WelcomeUI.swift), I can't place the .navigationBarTitle deeper in the code.

Below is my current navigation structure, and bits of code from each file:

WelcomeUI.swift

struct WelcomeUI: View { 
   var body: some View {
      NavigationView {
         VStack {
            //NavigationLink(destination: SignupUI(), label: {
               //Text("Sign Up")
            //}
            NavigationLink(destination: LoginUI(), label: {
               Text("Log In")
            }
         }
      }
   }
}

LoginUI.swift

struct LoginUI: View {
   var body: some View {
      VStack {
         
         NavigationLink(destination: MainUI(), label: { Text("Log In") })
         //Button(action: { ... }
      }
   .navigationBarHidden(false)
   }
}

Note: SignupUI.swift is essentially the same as LoginUI.swift

MainUI.swift

struct MainUI: View {
   var body: some View {
      TabView {
         //SpendingView()
            //.tabItem {
               //Image(...)
               //Text("Spending")
            //}
         //SavingView()
            //.tabItem {
               //Image(...)
               //Text("Saving")
            //}
         //AddView()
            //.tabItem {
               //Image(...)
               //Text("Add")
            //}
         //EditView()
            //.tabItem {
               //Image(...)
               //Text("Edit")
            //}
         SettingsView()
            .tabItem {
               //Image(...)
               Text("Settings")
            }
      }
      .navigationBarBackButtonHidden(true)
   }
}

Note: All views in MainUI.swift are structured the same.

SettingsView.swift

struct SettingsView: View {
   var body: some View {
      ZStack {
         Form {
            Section(header: Text("Section Header")) {
               NavigationLink(destination: WelcomeUI()) {
                  Text("Setting Option")
               }
            }
            Section {
               //Button("Log Out") {
                  //self.logout()
               //}
               Text("Log Out")
            }
         }
         .navigationBarTitle("Settings") // This has no effect on code no matter where it is place in SettingsView.swift
      }
   }
}

I should also note that only the pages after MainUI.swift is affected by this. WelcomeUI.swift and LoginUI.swift work as expected.

YourManDan
  • 277
  • 1
  • 14
  • The blank space could be the `NavigationView` look up `.toolbar` to put a title in it or something. Also, it would be best if you have minimal reproducible code. Something that if any of us copy and paste We can immediately see in my Canvas or Simulator. No periods, asterisks, `View`s that aren't provided. https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-a-toolbar-and-add-buttons-to-it – lorem ipsum Dec 13 '20 at 21:11
  • Thanks for the tips @loremipsum. I've taken a look into `.toolbar` and there is no change either. I have more information about what seems to be the problem and will update the post accordingly. – YourManDan Dec 14 '20 at 16:33

1 Answers1

1

Look at the MainUI navigationTitle. I just put a title in every View to find what was going on.

import SwiftUI
struct SubSpendingView: View {
    var body: some View {
        ScrollView{
            Text("SubSpendingView")
            
        }.navigationBarTitle("SubSpending"
                             //, displayMode: .inline
        )
    }
}
struct SpendingView: View {
    var body: some View {
        ScrollView{
            Text("SpendingView")
            NavigationLink("subSpending", destination: SubSpendingView())
        }.padding()
    }
}
struct WelcomeUI: View {
    var body: some View {
        NavigationView {
            VStack {
                //NavigationLink(destination: SignupUI(), label: {
                //Text("Sign Up")
                //}
                NavigationLink(destination: LoginUI(), label: {
                    Text("Go to Log In")
                })
            }.navigationTitle(Text("WelcomeUI"))
        }
    }
}
struct SettingsView: View {
    var body: some View {
        VStack{
            ZStack {
                
                
                Form {
                    Section(header: Text("Section Header")) {
                        NavigationLink(destination: WelcomeUI()) {
                            Text("Setting Option")
                        }
                    }
                    Section {
                        //Button("Log Out") {
                        //self.logout()
                        //}
                        Text("Log Out")
                    }
                }
                Button("say-high", action: {print("Hi")})
                // This has no effect on code no matter where it is place in SettingsView.swift
            }
        }//.navigationBarTitle("Settings")
    }
}
struct LoginUI: View {
    var body: some View {
        VStack {
            
            NavigationLink(destination: MainUI(), label: { Text("Log In") })
            //Button(action: { ... }
        }.navigationTitle(Text("LoginUI"))
        .navigationBarHidden(false)
    }
}
struct MainUI: View {
    @State var selectedTab: Views = .adding
    var body: some View {
        
        TabView(selection: $selectedTab) {
            SpendingView()
                .tabItem {
                    Image(systemName: "bag.circle")
                    Text("Spending")
                }.tag(Views.spending)
            //SavingView()
            //.tabItem {
            //Image(...)
            //Text("Saving")
            //}
            Text("Adding View")
                .tabItem {
                    Image(systemName: "plus")
                    Text("Add")
                }.tag(Views.adding)
            Text("Edit View")
                .tabItem {
                    Image(systemName: "pencil")
                    Text("Edit")
                }.tag(Views.edit)
            SettingsView()
                .tabItem {
                    Image(systemName: "gear")
                    Text("Settings")
                }.tag(Views.settings)
        }
        //This overrides the navigationTitle in the tabs
        .navigationBarTitle(Text(selectedTab.rawValue)
                            //, displayMode: .inline
        )
        .navigationBarBackButtonHidden(true)
    }
}
enum Views: String{
    case settings = "Settings"
    case spending = "Spending"
    case adding = "Add"
    case edit = "Edit"
}
struct PaddyNav: View {
    var body: some View {
        WelcomeUI()
            //Wont work
            .navigationTitle(Text("PaddyNav"))
    }
}

struct PaddyNav_Previews: PreviewProvider {
    static var previews: some View {
        PaddyNav()
    }
}
lorem ipsum
  • 21,175
  • 5
  • 24
  • 48
  • This is a great start! I've gone ahead and done the changes you've suggested for every view. However, it only works as expected for whichever view is selected under `@State var selectedTab` in `MainUI.swift`. As I said, I added enums for every view and tagged every view in `MainUI.swift`. In every view that isn't the `selectedTab`, it displays the `navigationTitle`, but stays stationary even if you scroll down. Do you have a solution that works for every view? – YourManDan Dec 15 '20 at 16:46
  • It stays stationary? Add some code or a photo. – lorem ipsum Dec 15 '20 at 16:53
  • [Try these](https://imgur.com/a/7VDkDnU), currently I have the `AddView()` selected in `@State var selectedTab: Views = .add` as well as the respective enum additions and tags in `MainUI`. – YourManDan Dec 15 '20 at 17:09
  • I don't know what you mean by stationary. Do you want it `.inline`? – lorem ipsum Dec 15 '20 at 17:41
  • When I scroll down on the view, the title should go from `.large` to `.inline`, the only one that does that is whatever view is selected in `selectedTab`. You'll also notice in the second photo that the `navigationBar` is transparent and the title doesn't become `.inline`. – YourManDan Dec 15 '20 at 17:48
  • [Here's](https://imgur.com/a/qLqu6ZR) a video, that should help a bit more. – YourManDan Dec 15 '20 at 17:53
  • If you wanted to stay inline you have to tell it. As far as the Scroll going under the navigation title is an issue that depends on your UI there are many questions on stackoverflow that deal with it in different manners (I add color to my NavigatonBar and the action that hides the keyboard). See the extra code. – lorem ipsum Dec 15 '20 at 18:07