how to hide navigation bar on particular screen in SwiftUI? - ios

I am navigating from one screen to another on previous screen i am hiding navigation bar but on second screen I want to show navigation bar but in mu case its hiding on second screen also.
navigation bar hidden on first screen as
.navigationBarHidden(true)
How can i show navigation bar on second screen? (I am NOT using navigation view on either screen)
My First parent screen has
NavigationView {
//design
}
.navigationBarTitle("ABCScreen", displayMode: .inline)
.navigationViewStyle(StackNavigationViewStyle())
Thank you for help.

The possible approach to hide navigation bar in root view and show in child subviews.
struct FirstNavigationView: View {
#State private var hideBar = true // << hide state
var body: some View {
NavigationView {
VStack {
Text("FirstView")
Divider()
NavigationLink("Goto Child", destination: NextChildView(index: 1))
.simultaneousGesture(TapGesture().onEnded {
self.hideBar = false // << show
})
}
.navigationBarHidden(hideBar)
// .navigationBarTitle("Back to Root") // << choice
.onAppear {
self.hideBar = true // << hide on back
}
}
}
}
The only needed modifications is in root view.

For your first screen you can add .navigationBarHidden(true) inside your NavigationView to hide it and false on second screen to unhide.
FIRST SCREEN:
NavigationView{
Button(action: {}, label: {
Text("Button")
})
.navigationBarHidden(true) //This flag will hide your navigationBar
}
SECOND SCREEN:
NavigationView{
Button(action: {}, label: {
Text("Button")
})
.navigationBarHidden(false) //This flag will unhide your navigationBar
}

Related

SwiftUI : How to get a Navigation Title aligned with Back Button

I'm trying to get the navigation title vertically aligned with the back button in a NavigationDetail view in SwiftUI. Here's what this looks like currently:
Below's my code for adding the Navigation Bar title to the view. How do I get it vertically aligned with the Back button?
var body: some View {
Text("My Detail View")
.navigationBarTitleDisplayMode(.inline)
VStack {
List {
ForEach(0..<layerSettings.count, id: \.self) { each in
...
}
}
If you need to draw "My Detail View" on the same line that the Back button, try to do like this:
NavigationView {
VStack() {
...
}
.navigationBarTitle(Text("My Detail View"),
displayMode: .inline)
}
Since navigationBarTitle(_:) is Deprecated. Use navigationTitle(_:) together with navigationBarTitleDisplayMode(_:) in iOS 14.0+
NavigationView {
VStack() {
...
}
.navigationTitle(Text("My Detail View"))
.navigationBarTitleDisplayMode(.inline)
}

NavigationBar with Custom Back Text but no NavigationBarTitle

I want to hide the navigationbarTitle for my views, but keep a custom value for the back button in the child views. So the NavigationBar should be visible in every screen, but should not have a title. But i want to change the text 'Back' to a custom text.
NavigationLink {
SomeChildView()
} label: {
SomeView()
}.navigationBarTitle("Text for back button in child view")
If I set the title on the NavigationLink this gives me my custom back button text but also displays the title in the Parent View.
You can achieve what you need by using the environment value of presentationMode to dismiss the screen you are in by code, and for changing the back button label and style you can simply do
hide the back button by using .navigationBarBackButtonHidden(true) modifier
use toolbar and toolbarItem to add your custom back button to the NavigationBar
here an example of how you can use it
// FirstScreen
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink {
SecondScreen()
} label: {
Text("Go To Second Screen")
}
}
}
}
// SecondScreen
struct SecondScreen: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
Text("Second Screen")
.navigationBarBackButtonHidden(true)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {
presentationMode.wrappedValue.dismiss()
} label: {
Label("Custom Back Button", systemImage: "command")
.labelStyle(.titleAndIcon)
}
}
}
}
}

Draw a view over the navigation bar

I'm working on a bottom sheet that can be invoked from any other screen. The bottom sheet will be displayed on top of a half-opaque overlay and I would like the overlay to render full screen over any other view including the navigation bar and the tab bar.
However, I can't seem to be able to figure out how to get the content of the navigation bar to be behind the overlay. Here is what a demo of my current implementation looks like. As you can see, it's possible to interact with the content of the navigation bar even though it is visually displayed behind the overlay.
Half Screen
Full Screen
Back button is still active
And here is the simplified code of my current implementation:
import SwiftUI
struct MainNavigationView: View {
var body: some View {
NavigationView {
NavigationLink(destination: AnoterView()) {
Text("Navigate to the next screen")
}
}
}
}
struct AnoterView: View {
var body: some View {
ZStack {
Color(uiColor: .red)
.edgesIgnoringSafeArea(.all)
.navigationTitle("Test")
.navigationBarTitleDisplayMode(.inline)
ViewWithOverlay()
}
}
}
struct ViewWithOverlay: View {
var body: some View {
ZStack {
// I'd like this overlay to be rendered over the navigation bar
Color(uiColor: .blue)
.edgesIgnoringSafeArea(.all)
Color(uiColor: .green)
}
}
}
And the outcome:
As you can see, while the blue color, which represent my overlay, is drawn over the red color, the title and the back button are still displayed on top of the blue color.
I understand why this is happening, but I cannot think of any workaround in SwiftUI to fix this that can be invoked from any view.
Any help is appreciated.
If you want to overlay everything then it should be on root, including over NavigationView as well, ie.
ZStack {
NavigationView {
Color(uiColor: .red).edgesIgnoringSafeArea(.all)
}
ViewWithOverlay() // << here !!
}
.edgesIgnoringSafeArea(.all)
One thing you can do is to put the NavigationView inside a ZStack. This way it will be in a lower layer hidden by the layer above. Here is the code that completely hides the NavigationBar on the tap of the button.
struct ContentView: View {
#State private var isPresented: Bool = false
var body: some View {
ZStack {
NavigationView {
Text("Hello World")
.navigationTitle("Welcome")
}
VStack {
}.frame(maxWidth: isPresented ? .infinity: 0, maxHeight: isPresented ? .infinity: 0)
.background(.green)
Button("Animate") {
withAnimation {
isPresented.toggle()
}
}
}
}
}

SwiftUI : navigation to next view from navigation bar button?

I want to push a view when tapping the trailing button of the navigation bar, so I tried this:
struct ContentView: View {
var body: some View {
NavigationView {
MyListView()
.navigationBarTitle(Text("Main list title"))
.navigationBarItems(trailing: Button("Add", action: {
NavigationLink(destination: MyFormView()) {
Text("Hello!")
}
}))
}
}
}
But nothing happens when I tap the button and I end up having an issue on the NavigationLink line:
Result of 'NavigationLink<Label, Destination>' initializer is unused
Thank you for helping me

Placing interactable views in front of a NavigationView's hidden navigation bar

I have a NavigationView with a NavigationButton inside of it, but I cannot get the NavigationButton to be at the top of the screen and still be able to be pressed, even though the navigation bar is hidden.
This code:
struct ContentView : View {
var body: some View {
NavigationView {
VStack {
NavigationButton(destination: Text("Button Clicked")) {
Text("Hello World")
.background(Color.yellow)
}
Spacer()
}
}
.navigationBarHidden(true)
}
}
Looks like , but I want it to look like .
I've tried adding a negative padding to the top of the VStack (with .padding([.top], -95), and it visually works, but then I can't interact with the button by tapping it (I think it is behind the hidden navigation bar). I've tried setting the VStack's zIndex to 10000 to solve that, but it still didn't work. Is there a way for me to move the button up to the top while still making sure that the button recognizes when it is being tapped?
Add a navigationBarTitle before hiding your navigation bar:
struct ContentView : View {
var body: some View {
NavigationView {
VStack {
NavigationButton(destination: Text("Button Clicked")) {
Text("Hello World")
.background(Color.yellow)
}
Spacer()
}
.navigationBarTitle(Text("Title")) // Add this line
.navigationBarHidden(true)
}
}
Add this modifier to your NavigationView edgesIgnoringSafeArea(.top).

Resources