How to create a custom TabView with NavigationView in SwiftUI?

swift nub

[EDIT] - This question has been edited and simplified.

I need to create a CustomLooking TabView instead of the default one.

Here is my full code with the problem. Just run the code below.

import SwiftUI

enum TabName {
    case explore, network
}

struct ContentView: View {
    @State var displayedTab: TabName = .explore
    var body: some View {
        VStack(spacing: 0) {
            Spacer()
            switch displayedTab {
            case .explore: AViewWhichNavigates(title: "Explore").background(Color.yellow)
            case .network: AViewWhichNavigates(title: "Network").background(Color.green)
            }
            Spacer()
            CustomTabView(displayedTab: $displayedTab)
        }
    }
}

struct CustomTabView: View {
    @Binding var displayedTab: TabName
    var body: some View {
        HStack {
            Spacer()
            Text("Explore").border(Color.black, width: 1).onTapGesture { self.displayedTab = .explore }
            Spacer()
            Text("Network").border(Color.black, width: 1).onTapGesture { self.displayedTab = .network }
            Spacer()
        }
    }
}

struct AViewWhichNavigates: View {
    let title: String
    var body: some View {
        NavigationView(content: {
            NavigationLink(destination: Text("We are one level deep in navigation")) {
                Text("You are at root. Tap to navigate").navigationTitle(title)
            }
        })
    }
}

On tab#1 click the navigation. Switch to tab#2, then Switch back to tab#1. You will see that tab#1 has popped to root.

How do I prevent the customTabView from popping to root every time i switch tabs?

Just a coder

All you need is a ZStack with opacity.

import SwiftUI

enum TabName {
    case explore, network
}

struct ContentView: View {
    @State var displayedTab: TabName = .explore
    var body: some View {
        VStack {
            ZStack {
                AViewWhichNavigates(title: "Explore")
                    .background(Color.green)
                    .opacity(displayedTab == .explore ? 1 : 0)
                AViewWhichNavigates(title: "Network")
                    .background(Color.green)
                    .opacity(displayedTab == .network ? 1 : 0)
            }
            CustomTabView(displayedTab: $displayedTab)
        }
    }
}

struct CustomTabView: View {
    @Binding var displayedTab: TabName
    var body: some View {
        HStack {
            Spacer()
            Text("Explore").border(Color.black, width: 1).onTapGesture { self.displayedTab = .explore }
            Spacer()
            Text("Network").border(Color.black, width: 1).onTapGesture { self.displayedTab = .network }
            Spacer()
        }
    }
}

struct AViewWhichNavigates: View {
    let title: String
    var body: some View {
        NavigationView(content: {
            NavigationLink(destination: Text("We are one level deep in navigation")) {
                Text("You are at root. Tap to navigate").navigationTitle(title)
            }
        })
    }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.