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.

Answered by Krystian1232 in 777870022

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.

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?

Accepted Answer

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.

Hide bottom navigation bar.
 
 
Q