Search code examples
swiftuiswiftui-navigationlinkswiftui-navigationview

NavigationTitle in second view not appearing


I'm new to IOS-app development. I've created (albeit with the help of a guide) a login page which is fully functional.

Whenever the authentication of the user is completed, the user is forwarded to HomepageView().

However, I have read that it is bad practise to also create a NavigationView in the second view. (Because then the title gets pushed down a lot).

But if I don't include a NavigationView in my second view the title doesn't show up at all.

I will include the code of both my views below

VIEW 1

    var body: some View {
    
    NavigationView{
        
        ScrollView{
            
            // LINK TO GO TO HOMESCREEN (Activated once login is succesfull)
            NavigationLink(destination: HomepageView(uid: self.uid), isActive: $moveToHomeView, label: {
                EmptyView()
            })
            
            VStack(spacing: 16){
                Picker(selection: $isLoginMode, label: Text("Picker here")){
                    Text("Sign In")
                    // this .tag changes isLoginMode to true
                        .tag(true)
                    Text("Create Account")
                    // this .tag changes isLoginMode to false
                        .tag(false)
                }
                .pickerStyle(SegmentedPickerStyle())
                
                if !isLoginMode {
                    Button{
                        // Action
                        shouldShowImagePicker.toggle()
                    }label:{
                        VStack{
                            // Selected image
                            if let image = self.image {
                                Image(uiImage: image)
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 128, height: 128)
                                    .cornerRadius(64)
                            }else{
                                // Standard icon
                                Image(systemName: "person.fill")
                                    .font(.system(size: 64))
                                    .padding()
                            }
                        }
                        .overlay(RoundedRectangle(cornerRadius: 64)
                                    .stroke(lineWidth: 3))
                    }
                }
                
                // In a Group you can put multiple items and style them the same way.
                Group{
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                        .autocapitalization(.none)
                    SecureField("Password", text: $password)
                }
                .padding(12)
                .background(Color.white)
                
                Button{
                    // Btn action here
                    handleAction()
                } label: {
                    HStack{
                        Spacer()
                        Text(isLoginMode ? "Sign In" : "Create Account")
                            .foregroundColor(.white)
                            .padding(.vertical, 10)
                        Spacer()
                    }.background(Color.blue)
                }
                
                Text(self.loginStatusMessage)
                    .foregroundColor(.red)
                
            }
            .padding()
        }
        .navigationTitle(isLoginMode ?  "Sign In" : "Create Account")
        .background(Color(.init(white: 0, alpha: 0.05))
                        .ignoresSafeArea())
    }
    
    // FULL SCREEN COVER FOR IMAGE PICKER
    .fullScreenCover(isPresented: $shouldShowImagePicker, onDismiss: nil){
        ImagePicker(image: $image)
    }
}

This code creates the following:

enter image description here

Then when I create the second view (Which the user will go to once they've logged in) looks like this:

VIEW 2: (Separate file)

struct HomepageView: View {

var uid: String

var body: some View {
    
    VStack {
        Text("Hey, \(uid)")
    }
    .navigationTitle("Why does this not work?")
        
}}

This code creates the following:

enter image description here

Why doesn't View 2 show a .navigationTitle ?

I have been stuck on this for a long time now. Any help is greatly appreciated!

Thank you and have a nice day!


Solution

  • The NavigationView doesn't show up in previews because your second view doesn't have one. That's ok. Like you mentioned, you don't want to add one here.

    When you run the actual app, if the view prior had a NavigationView, your second view will too.