How to set a default Tab in SwiftUIs TabView?

Question

I have a TabView in SwiftUI and want the second tab to be the default, when starting the app.

I haven't found any documentation to provide this behavior, but it should be possible. Most of the apps have the mid tab as their default tab.

TabView {
    QuestionView()
        .tabItem {
            Image(systemName: "questionmark")
            Text("Questions")
        }
    DataView()
        .tabItem {
            Image(systemName: "chart.bar.fill")
            Text("Data")
        }
    Text("Empty Tab right now")
        .tabItem {
            Image(systemName: "bolt.horizontal.fill")
            Text("Trend")
        }
}

Enea Dume · Accepted Answer · 2019-09-05T11:42:03.533

39

@State private var selection = 3

TabView(selection:$selection) {
     QuestionView()
          .tabItem {
              Image(systemName: "questionmark")
              Text("Questions")
          }
          .tag(1)
     DataView()
          .tabItem {
              Image(systemName: "chart.bar.fill")
              Text("Data")
          }
          .tag(2)
     Text("Empty Tab right now")
          .tabItem {
              Image(systemName: "bolt.horizontal.fill")
              Text("Trend")
          }
          .tag(3)
}

In this case I set default selected the third Tab. Change selection to the desired Tab.

edited Sep 05 '19 at 11:42

answered Sep 05 '19 at 09:42

Enea Dume

3,014
3
21
36

Start tag number from 0 if you don't want to change `selection` manually. – ali6p Dec 24 '19 at 21:49
Why does this answer not work and the answer adding .tag(1) does work? – Kurt L. Oct 01 '22 at 06:23

Mojtaba Hosseini · Answer 2 · 2022-10-03T17:30:21.563

9

Define a State with the default value and bind it to TabView:

@State var selection = 1
,,,

    TabView(selection: $selection) 

,,,

Then assign a tag to each tabItem:

,,,
    .tabItem {
        Image(systemName: "bolt.horizontal.fill")
        Text("Trend")
    }.tag(1)
,,,

Now you can use them together, selection === tag

edited Oct 03 '22 at 17:30

answered Sep 05 '19 at 09:40

Mojtaba Hosseini

95,414
31
268
278

1

Preferred this answer for specifying the use of `tag` on each `tabItem` – elight Feb 25 '20 at 16:01

Sateesh Yemireddi · Answer 3 · 2022-08-02T07:08:49.277

We can use enum with specific View name cases for tag rather than using Ints.

func tag<V>(_ tag: V) -> some View where V : Hashable

Please note that tag has to be confirmed to Hashable protocol so you can the enum cases like below.

enum Tab: String, CaseIterable, Identifiable {
    case question
    case data
    case empty

    var id: Self { self }
}

@State private var tab = Tab.data

TabView(selection: $tab) {
     QuestionView()
          .tabItem {
              Image(systemName: "questionmark")
              Text("Questions")
          }
          .tag(Tab.question)
     DataView()
          .tabItem {
              Image(systemName: "chart.bar.fill")
              Text("Data")
          }
          .tag(Tab.data)
     Text("Empty Tab right now")
          .tabItem {
              Image(systemName: "bolt.horizontal.fill")
              Text("Trend")
          }
          .tag(Tab.empty)
}

This should be the accepted answer. Much cleaner than using ints. Though you don't necessarily need `String, CaseIterable, Identifiable`, just `Hashable` is enough. — Lord Zsolt, Apr 15 '23 at 12:31

How to set a default Tab in SwiftUIs TabView?

3 Answers3