SwiftUI Navigating between tabs correct way

Question

I have two tabs: "Main" and "Friends". Friends has a list of people, I can click on person to navigate to their profile.

I want to accomplish two things:

1. Navigating to profile of friend "Mark" from "Main" tab.
2. Get back to "Main" tab on back button press.

I have accomplished #1, however there is no animation transition. Not sure how to accomplish #2.

enum Tab {
    case home, friends
}

struct ContentView: View {
    @State var tab: Tab = .home
    @State var selectedFriend: String?
    @State var friends: [String] = ["Mark", "Spencer"]
    
    var body: some View {
        TabView(selection: $tab) {
            NavigationView {
                VStack {
                    Button("You have a new friend Mark! Click to see his profile.") {
                        tab = .friends
                        selectedFriend = "Mark"
                    }
                }
            }
            .tabItem {
                Label("Home", systemImage: "list.bullet")
            }
            .tag(Tab.home)
            
            NavigationView {
                FriendsList(selected: $selectedFriend, friends: friends)
            }
            .tabItem {
                Label("Friends", systemImage: "list.bullet")
            }
            .tag(Tab.friends)
        }
        
    }
}

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


struct FriendsList: View {
    @Binding var selected: String?
    var friends: [String]
    
    var body: some View {
        VStack {
            ForEach(friends, id:\.self) { friend in
                NavigationLink(destination: FriendDetails(name: friend), tag: friend, selection: $selected) { EmptyView() }
            }

            List {
                ForEach(friends, id:\.self) {friend in
                    Button(friend) {
                        self.selected = friend
                    }
                }
            }
        }
    }
}

struct FriendDetails: View {
    var name: String
    
    var body: some View {
        Text("details of \(name)")
    }
}

Answer 1

This works for me. Added .listStyle(PlainListStyle()) to remove the padding (in my opinion it looks better)

import SwiftUI

enum Tab {
    case home, friends
}

struct ContentView: View {
    @State var tab: Tab = .home
    @State var selectedFriend: String?
    @State var friends: [String] = ["Mark", "Spencer"]
    @State var showFriendDetail = false
    
    var body: some View {
        TabView(selection: $tab) {
            NavigationView {
                VStack {
                    NavigationLink(destination: FriendDetails(name: selectedFriend ?? "Unknown"), isActive: $showFriendDetail) { EmptyView() }
                    Button("You have a new friend Mark! Click to see his profile.") {
                        selectedFriend = "Mark"
                        showFriendDetail = true
                    }
                }
            }
            .tabItem {
                Label("Home", systemImage: "list.bullet")
            }
            .tag(Tab.home)
            
            NavigationView {
                FriendsList(friends: friends)
            }
            .tabItem {
                Label("Friends", systemImage: "list.bullet")
            }
            .tag(Tab.friends)
        }
        
    }
}

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


struct FriendsList: View {
    @State var selected: String?
    var friends: [String]
    
    var body: some View {
        VStack {
            ForEach(friends, id:\.self) { friend in
                NavigationLink(destination: FriendDetails(name: friend), tag: friend, selection: $selected) { EmptyView() }
            }

            List {
                ForEach(friends, id:\.self) {friend in
                    Button(friend) {
                        self.selected = friend
                    }
                }
            }.listStyle(PlainListStyle())
        }
    }
}

struct FriendDetails: View {
    var name: String
    
    var body: some View {
        Text("details of \(name)")
    }
}

Answer 2

On the Home tab, switch out the Button and use a NavigationLink instead. NavigationLinks are the segues that push left-to-right and have a default back button built in.

   TabView(selection: $tab) {
        NavigationView {
            VStack {
                NavigationLink(
                    destination: FriendDetails(name: "Mark"),
                    label: {
                        Text("You have a new friend Mark! Click to see his profile.")
                    })
            }
        }
        .tabItem {
            Label("Home", systemImage: "list.bullet")
        }