Ganda Rain Panjaitan
Ganda Rain Panjaitan

Reputation: 949

Double Navigation Bar SwiftUI

Here is my scenario. I have 3 screen, screen one, screen two and screen three. I screen one I have a button, to navigate to screen two. In screen two I have a button to navigate to screen three. For screen two, the navigation bar is working fine and perfect. But in screen three is like navigation bar showing two times. How can I fix this?

This is my code,

import SwiftUI

struct ContentView: View {
    var body: some View {
        FirstView()
    }
}

struct FirstView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("This is First View")
                NavigationLink(destination: SecondView()) {
                    Text("Show Second View")
                }
            }
            .navigationBarTitle("Root View", displayMode: .inline)
        }
    }
}

struct SecondView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("This is Second View")
                NavigationLink(destination: ThirdView()) {
                    Text("Show Third View")
                }
            }
            .navigationBarTitle("Second View", displayMode: .inline)
        }
    }
}

struct ThirdView: View {
    var body: some View {
        NavigationView {
            Text("Third View")
            .navigationBarTitle("Third View", displayMode: .inline)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

This is the result enter image description here

Upvotes: 1

Views: 963

Answers (1)

Asperi
Asperi

Reputation: 257503

You don't need second NavigationView, there should be only one in navigation stack, ie

struct SecondView: View {
    var body: some View {
       // NavigationView {      // << remove this one !!
            VStack {
                Text("This is Second View")
                NavigationLink(destination: ThirdView()) {
                    Text("Show Third View")
                }
            }
            .navigationBarTitle("Second View", displayMode: .inline)
    //    }
    }
}

Upvotes: 3

Related Questions