NavigationView in tvOS

Question

Created Jul ’20

Replies 1

Boosts 0

Views 2.5k

Participants 1

I watched "SwiftUI On All Devices" from WWDC19 and the tvOS speaker suggested that TabView navigation structures should be nested within a NavigationView to clear the tabs when drilling down in content.

I've setup a basic TabView structure with three tabs, nested in a Navigation view. Everything works as expected, except the tabbed navigation bar shifts down (as if there was a text label needing to be shown) when navigating from one tab to another.

I don't want to have a text label above the tabbed navigation and have tried placing

Code Block swift.navigationBarHidden(true)
.navigationBarTitle(Text(""))

in various locations in the views to no effect.

Here is my main ContentView.swift

Code Block swiftimport SwiftUI
struct ContentView: View {
    @State private var selection = 0
    var body: some View {
        NavigationView {
            TabView(selection: $selection) {
            WatchLiveMainView()
            .tabItem {
                Text("Watch Live")
            }
            .tag(0)
            CurrentSeriesMainView()
            .tabItem {
                Text("Current Series")
            }
            .tag(1)
            SermonArchiveMainView()
            .tabItem {
                Text("Sermon Archive")
            }
            .tag(2)
            }
        }
    }
}

Both the WatchLiveMainView and the CurrentSeriesMainView are identical basic brand new SwiftUI views with the only change being the Text("Hello World") was renamed to Text("Watch Live") and Text("Current Series") in each respective view.

The SermonArchiveMainView.swift looks like this:

Code Block swiftimport SwiftUI
struct SermonArchiveMainView: View {
 
	var body: some View {
        VStack{
            Text("Sermon Archive View")
            NavigationLink(destination: Text("Temp Destination")) {
                Text("Link to Destination")
            }
        }
    }
}

I'm currently working in Xcode Version 11.6 (11E708). tvOS 13.4 as the deployment target.

Has anyone else experienced anything like this, or have any thoughts on how to stop the shifting from occurring?

Thanks,
Michael

Answered by msullivan in 625487022

For anyone interested... I was able to resolve my issue... It looks like I didn't try one permutation of placement for the .navigationBarHidden(true) prior to posting... several days of banging my head against the wall on this.

Code Block swiftimport SwiftUI
struct ContentView: View {
    enum Tab { case watchLive, currentSeries, sermonArchive }
    @State var selection: Tab
    var body: some View {
        /*This way seems to have a weird shift in the navigation title and tab bar.*/
        NavigationView {
            TabView(selection: $selection) {
                WatchLiveView()
                    .navigationBarTitle("Watch Live")
                    .navigationBarHidden(true)
                    .tabItem{
                        Text("Watch Live")
                    }
                    .tag(Tab.watchLive)
                CurrentSeriesView()
                    .navigationBarTitle("Current Series")
                    .navigationBarHidden(true)
                    .tabItem{
                   	   Text("Current Series")
                    }
                    .tag(Tab.currentSeries)
                SermonArchiveView()
                    .navigationBarTitle("Sermon Archive")
                    .navigationBarHidden(true)
                    .tabItem{
                        Text("Sermon Archive")
                    }
                    .tag(Tab.sermonArchive)
            }
        }
    }
}

The result of the above leaves the bar hidden when switching views in the TabView.

Michael

Boost

Answer 1

msullivan OP

Aug ’20

Accepted Answer

For anyone interested... I was able to resolve my issue... It looks like I didn't try one permutation of placement for the .navigationBarHidden(true) prior to posting... several days of banging my head against the wall on this.

Code Block swiftimport SwiftUI
struct ContentView: View {
    enum Tab { case watchLive, currentSeries, sermonArchive }
    @State var selection: Tab
    var body: some View {
        /*This way seems to have a weird shift in the navigation title and tab bar.*/
        NavigationView {
            TabView(selection: $selection) {
                WatchLiveView()
                    .navigationBarTitle("Watch Live")
                    .navigationBarHidden(true)
                    .tabItem{
                        Text("Watch Live")
                    }
                    .tag(Tab.watchLive)
                CurrentSeriesView()
                    .navigationBarTitle("Current Series")
                    .navigationBarHidden(true)
                    .tabItem{
                   	   Text("Current Series")
                    }
                    .tag(Tab.currentSeries)
                SermonArchiveView()
                    .navigationBarTitle("Sermon Archive")
                    .navigationBarHidden(true)
                    .tabItem{
                        Text("Sermon Archive")
                    }
                    .tag(Tab.sermonArchive)
            }
        }
    }
}

The result of the above leaves the bar hidden when switching views in the TabView.

Michael

0