2

to summarize my problem: My application contains a TabView on the root level. The children of the TabView must be searchable (using the apple native .searchable(...) modifier. Additionally at least one of the views must be able to push a third view on the stack which hides the TabBar on the bottom.

The problem with that is that both approaches: Using one single NavigationView in the root view and using additional navigation views inside the child views did not work.

Using only one NavigationView:

  • TabBar gets overlayed when navigating to another acitivty ✔
  • Not searchable ❌

Using nested NavigationViews:

  • TabBar is always visible also in the full screen activity ❌
  • Desired title + search behavior ✔

Root View:

public enum TestNavItemId: String, CaseIterable, Equatable {
    case activity1 = "activity1"
    case activity2 = "activity2"

    public static func == (lhs: NavItemId, rhs: NavItemId) -> Bool {
        lhs.rawValue == rhs.rawValue
    }
}

struct DemoView: View {
    var body: some View {
        NavigationView {
            TabView {
                Activity1()
                        .tabItem {
                            Image(systemName: "house.fill")
                            Text(LocalizedStringKey(TestNavItemId.activity1.rawValue))
                        }
                        .tag(TestNavItemId.activity1)
                Text("Nothing to see here")
                        .tabItem {
                            Image(systemName: "fire")
                            Text(LocalizedStringKey(TestNavItemId.activity2.rawValue))
                        }
                        .tag(TestNavItemId.activity2)
            }
        }
    }
}

Activity1:

struct Activity1: View {

    @State private var query: String = ""

    var body: some View {
        NavigationView {
            VStack {
                Text("Content")
                NavigationLink(destination: Text("Full Screen View")) {
                    Text("Open full screen view")
                }
            }
                    .searchable(text: $query)
        }
    }
}

Any help is much appreciated!

Kn3cht
  • 135
  • 9
  • 2
    Apple doesn’t want the tab view to be hidden when used. It is mentioned in the design guidelines. The apps that do it have a custom design. The second is the “correct” approach. With the first you will find many bugs. – lorem ipsum Aug 02 '22 at 10:33
  • Does this answer your question https://stackoverflow.com/a/73162708/12299030? – Asperi Aug 02 '22 at 11:08
  • @Asperi no unfortunately this does not solve the problem of `NavigationView` behavior (searchable, nav bar items). - but thx! – Kn3cht Aug 02 '22 at 11:16
  • 1
    Thx @loremipsum - doesn't that mean that all chat messengers using `TabViews` must use some hacky workaround to hide the TabBar? – Kn3cht Aug 02 '22 at 11:17
  • Using *nested* NavigationView is invalid in SwiftUI, there should be only one in stack. Just be aware. I don't see what can be bad there with searchable and nav bar items, but ok. – Asperi Aug 02 '22 at 11:18
  • They just have a custom one. Not hacky just custom. – lorem ipsum Aug 02 '22 at 11:48
  • 3
    Also, what I meant that the second is correct I mean that the navigation view at the top of your code should not be there. Each tab should have its own navigation view. There should not be a shared navigation view. – lorem ipsum Aug 02 '22 at 11:55

0 Answers0