Hide bottom navigation bar.

I have an issue where I see bottom navigation bar "menu". I created a menu so I don't need that default navigation bar. I just want to delete it so it does not shows at all. Any tips? To be clear I need to delete that "gray" bar behind white menu.

Up vote post of Krystian1232 Down vote post of Krystian1232
504 views
Posted by
Krystian1232
Reply
Add a Comment

Accepted Reply

I improved the MainView in the app by adding a ZStack for content layering and precise placement of a custom navigation bar at the bottom. The bar, made of a HStack within the ZStack, contains CustomTabItems linked to a 'selectedTab' state variable, enabling smooth view changes. Its design features a custom background color, rounded corners, a subtle shadow, and proper padding. To ensure the bar reaches the bottom screen edge, I used the '.edgesIgnoringSafeArea(.all)' modifier on the ZStack, integrating the navigation bar seamlessly into the app's design and maintaining its visibility and functionality.

Posted by
Krystian1232
Up vote reply of Krystian1232 Down vote reply of Krystian1232
Post marked as solved
Add a Comment

Replies

Just to confirm - you have the blue highlighted house icon, and behind that is a white capsule with five icons total, and behind that is a light grey bar, and that's the thing you want to remove?

Okay, how is your view being displayed? Is it in a NavigationStack or something that automatically adds that bar? You might find it better to just add your white capsule onto the view rather than using a pre-defined navigation method. In other words, load app, display first view, add capsule to bottom of view. If user taps a different icon display the view for that.

It's a bit difficult to help you without any code.

Actually, is there a way of making the background colour of that grey bar Color.clear?

Posted by
darkpaw
Post not yet marked as solved Up vote reply of darkpaw Down vote reply of darkpaw

  • I improved the MainView in the app by adding a ZStack for content layering and a custom navigation bar at the bottom. The bar, in a HStack within the ZStack, contains CustomTabItems linked to a 'selectedTab' state variable for smooth view changes. It features a custom background color, rounded corners, a shadow, and padding. To ensure the bar reaches the bottom screen edge, I used the '.edgesIgnoringSafeArea(.all)' modifier, integrating the navigation bar into the app's design seamlessly.

    —
    Krystian1232
Add a Comment

I improved the MainView in the app by adding a ZStack for content layering and precise placement of a custom navigation bar at the bottom. The bar, made of a HStack within the ZStack, contains CustomTabItems linked to a 'selectedTab' state variable, enabling smooth view changes. Its design features a custom background color, rounded corners, a subtle shadow, and proper padding. To ensure the bar reaches the bottom screen edge, I used the '.edgesIgnoringSafeArea(.all)' modifier on the ZStack, integrating the navigation bar seamlessly into the app's design and maintaining its visibility and functionality.

Posted by
Krystian1232
Up vote reply of Krystian1232 Down vote reply of Krystian1232
Post marked as solved
Add a Comment