I have the following:
#State private var showNext = false
...
NavigationStack {
VStack {
NavigationLink(destination: NextView(showSelf: $showNext),
isActive: $showNext) { EmptyView() }
Button("Show Next") {
showNext = true
}
}
}
...
struct NextView: View {
#Binding var showSelf: Bool
var body: some View {
Text("Next")
.navigationTitle("Next")
Button("Dismiss") {
showSelf = false
}
.padding(30)
}
}
When tapping Show Next, the NextView is shown as expected.
But when tapping Dismiss, nothing happens.
Turns out that showSelf was already false before it's set to false. So it seems something went wrong with passing the binding into NextView.
What could be wrong?
The issue was caused by NavigationStack. When I replaced it with NavigationView it worked as expected.
The isActive binding of NavigationLink does not appear to work (or to be supported) when embedded in a NavigationStack.
isActive binding is for NavigationView, try:
NavigationView {
...
}
.navigationViewStyle(.stack)`
You are trying to mix code for iOS >= 16 (NavigationStack) and for iOS < 16 (the previous way to handle NavigationLink). Similarly for the dismiss part, which is iOS < 15.
Here is your code for iOS 16:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationStack {
VStack {
NavigationLink {
NextView()
} label: {
Text("Show next view")
}
}
}
}
}
struct NextView: View {
#Environment(\.dismiss) private var dismiss
var body: some View {
VStack {
Text("You are in the next view")
Button("Dismiss", action: dismiss.callAsFunction)
}
.navigationTitle("Next")
}
}
I have used the simplest construction of NavigationLink. A more complex one would be used in conjunction with .navigationDestination. The best examples I have found are here:
https://swiftwithmajid.com/2022/06/15/mastering-navigationstack-in-swiftui-navigator-pattern/
https://swiftwithmajid.com/2022/06/21/mastering-navigationstack-in-swiftui-deep-linking/
https://www.pointfree.co/blog/posts/78-reverse-engineering-swiftui-s-navigationpath-codability
And if you want to dive more into very strange behaviour of the stack, you can look at my post here: Found a strange behaviour of #State when combined to the new Navigation Stack - Is it a bug or am I doing it wrong?
If you need to produce code for iOS < 16, you should replace NavigationStack with NavigationView and work from there.
Related
I'm trying to create a IOS app with SwiftUI that uses NavigationViewand hides the Navigation Bar on the first view (and only on the first one).
So I created an ObservableObject
class NavBarShowViewModel: ObservableObject {
#Published var isHidden: Bool = true
}
and in my Content View
struct ContentView: View {
#ObservedObject var navBarShowViewModel = NavBarShowViewModel()
var body: some View {
NavigationView {
Home()
.navigationBarHidden(self.navBarShowViewModel.isHidden)
}
.environmentObject(self.navBarShowViewModel)
}
}
Now in Home I have:
struct Home: View {
#EnvironmentObject var navBarShowViewModel: NavBarShowViewModel
var body: some View {
VStack {
HStack {
NavigationLink(destination: FirstPage()) {
Text("Go!")
}
Text("Hello World")
Spacer()
}
.navigationBarTitle("Home")
}
.onAppear(perform: {
self.navBarShowViewModel.isHidden = true
})
}
}
Now FirstPage() has the exact structure of Home(), except that has a different title
.navigationBarTitle("First Page")
and onAppear has the following code:
.onAppear(perform: {
self.navBarShowViewModel.isHidden = false
})
With this setup, the app works.
But if inside FirstPage() I navigate further, for example going to SecondPage() (which is for sake of simplicity, identical to FirstPage() with a different title) and then hitting back until I return to Home, onAppear here on Home() is not called, so it shows the navigation bar title.
Could someone explain this?
It is about how SwiftUI engine tracks views and if it really appears... anyway, what it is can be determined as it is how child views appear/disappear on navigation stack, so possible solution is to add onDisappear in FirstPage, like
struct FirstPage: View {
#EnvironmentObject var navBarShowViewModel: NavBarShowViewModel
var body: some View {
... other code here
.onAppear(perform: {
self.navBarShowViewModel.isHidden = false
})
.onDisappear(perform: {
self.navBarShowViewModel.isHidden = true
})
}
}
Tested with Xcode 12.4 / iOS 14.4
Whenever my code gets too big, SwiftUI starts acting weird and generates an error:
"The compiler is unable to type-check this expression in reasonable time; try breaking up the expression into distinct sub-expressions"
So I started breaking up my code into Extracted Subviews, one of the problems I came across is how to dismiss a view from a subtracted subview.
Example: we have here LoginContentView this view contains a button when the button is clicked it will show the next view UsersOnlineView.
struct LoginContentView: View {
#State var showUsersOnlineView = false
var body: some View {
Button(action: {
self.showUsersOnlineView = true
}) {
Text("Show the next view")
}
.fullScreenCover(isPresented: $showUsersOnlineView, content: {
UsersOnlineView()
})
}
On the other hand, we have a button that is extracted to subview, to dismiss the modal and go back to the original view:
import SwiftUI
struct UsersOnlineView: View {
var body: some View {
ZStack {
VStack {
CloseViewButton()
}
}
}
}
struct CloseViewButton: View {
var body: some View {
Button(action: {
// Close the Modal
}) {
Text("Close the view")
}
}
}
Give the sbview the state property that defines if the view is shown.
struct CloseViewButton: View {
#Binding var showView: Bool
var body: some View {
Button(
ShowView = false
}) {
Text("Close the view")
}
}
}
When you use the sub view give it the property
CloseButtonView(showView: $showOnlineView)
To allow the sub view to change the isShown property it needs to get a binding.
On the presentation mode. I think this only works with Swiftui presentations like sheet and alert.
The simplest solution for this scenario is to use presentationMode environment variable:
struct CloseViewButton: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
Button(action: {
presentationMode.wrappedValue.dismiss()
}) {
Text("Close the view")
}
}
}
Tested with Xcode 12.1 / iOS 14.1
I want to achieve the function. Like, "Look up" view that is from Apple.
My aim is when the sheet view push another view by navigation, the user can tap the navigation item button to close the sheet view. Like, this below gif.
I try to achieve this function.
I found a problem that is when the user tap the "Done" button. The App doesn't close the sheet view. It only pop the view to parent view. Like, this below gif.
This is my code.
import SwiftUI
struct ContentView: View {
#State var isShowSheet = false
var body: some View {
Button(action: {
self.isShowSheet.toggle()
}) {
Text("Tap to show the sheet")
}.sheet(isPresented: $isShowSheet) {
NavView()
}
}
}
struct NavView: View {
var body: some View {
NavigationView {
NavigationLink(destination: NavSubView()) {
Text("Enter Sub View")
}
} .navigationViewStyle(StackNavigationViewStyle())
}
}
struct NavSubView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
Text("Hello")
.navigationBarItems(trailing:
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}){
Text("Done")
}
)
}
}
How did I achieve this function? :)
Please help me, thank you. :)
UPDATE: Restored original version - provided below changes should be done, as intended, to the topic starter's code. Tested as worked with Xcode 13 / iOS 15
As navigation in sheet might be long enough and closing can be not in all navigation subviews, I prefer to use environment to have ability to specify closing feature only in needed places instead of passing binding via all navigation stack.
Here is possible approach (tested with Xcode 11.2 / iOS 13.2)
Define environment key to store sheet state
struct ShowingSheetKey: EnvironmentKey {
static let defaultValue: Binding<Bool>? = nil
}
extension EnvironmentValues {
var showingSheet: Binding<Bool>? {
get { self[ShowingSheetKey.self] }
set { self[ShowingSheetKey.self] = newValue }
}
}
Set this environment value to root of sheet content, so it will be available in any subview when declared
}.sheet(isPresented: $isShowSheet) {
NavView()
.environment(\.showingSheet, self.$isShowSheet)
}
Declare & use environment value only in subview where it is going to be used
struct NavSubView: View {
#Environment(\.showingSheet) var showingSheet
var body: some View {
Text("Hello")
.navigationBarItems(trailing:
Button("Done") {
self.showingSheet?.wrappedValue = false
}
)
}
}
I haven't tried SwiftUI ever, but I came from UIKit + RxSwift, so I kinda know how binding works. I read quite a bit of sample codes from a SwiftUI Tutorial, and the way you dismiss a modal is actually correct, but apparently not for a navigation stack.
One way I learned just now is use a #Binding var. This might not be the best solution, but it worked!
So you have this $isShowSheet in your ContentView. Pass that object to your NavView struct by declaring a variable in that NavView.
ContentView
.....
}.sheet(isPresented: $isShowSheet) {
NavView(isShowSheet: self.$isShowSheet)
}
NavView
struct NavView: View {
#Binding var isShowSheet: Bool
var body: some View {
NavigationView {
NavigationLink(destination: NavSubView(isShowSheet: self.$isShowSheet)) {
Text("Enter Sub View")
}
} .navigationViewStyle(StackNavigationViewStyle())
}
}
and finally, do the same thing to your subView.
NavSubView
struct NavSubView: View {
#Environment(\.presentationMode) var presentationMode
#Binding var isShowSheet: Bool
var body: some View {
Text("Hello")
.navigationBarItems(trailing:
Button(action: {
//self.presentationMode.projectedValue.wrappedValue.dismiss()
self.isShowSheet = false
}){
Text("Done")
}
)
}
}
Now as you can see, you just need to send a new signal to that isShowSheet binding var - false.
self.isShowSheet = false
Voila!
Here's an improved version of Asperi's code from above since they won't accept my edit. Main credit goes to them.
As navigation in sheet might be long enough and closing can be not in all navigation subviews, I prefer to use environment to have ability to specify closing feature only in needed places instead of passing binding via all navigation stack.
Here is possible approach (tested with Xcode 13 / iOS 15)
Define environment key to store sheet state
struct ShowingSheetKey: EnvironmentKey {
static let defaultValue: Binding<Bool>? = nil
}
extension EnvironmentValues {
var isShowingSheet: Binding<Bool>? {
get { self[ShowingSheetKey.self] }
set { self[ShowingSheetKey.self] = newValue }
}
}
Set this environment value to root of sheet content, so it will be available in any subview when declared
#State var isShowingSheet = false
...
Button("open sheet") {
isShowingSheet?.wrappedValue = true
}
// note no $ in front of isShowingSheet
.sheet(isPresented: isShowingSheet ?? .constant(false)) {
NavView()
.environment(\.isShowingSheet, self.$isShowingSheet)
}
Declare & use environment value only in subview where it is going to be used
struct NavSubView: View {
#Environment(\.isShowingSheet) var isShowingSheet
var body: some View {
Text("Hello")
.navigationBarItems(trailing:
Button("Done") {
isShowingSheet?.wrappedValue = false
}
)
}
}
I am having some issues with a NavigationLink on an iPad with split view (landscape). Here is an example:
Here is the code to reproduce the issue:
import SwiftUI
final class MyEnvironmentObject: ObservableObject {
#Published var isOn: Bool = false
}
struct ContentView: View {
#EnvironmentObject var object: MyEnvironmentObject
var body: some View {
NavigationView {
NavigationLink("Go to FirstDestinationView", destination: FirstDestinationView(isOn: $object.isOn))
}
}
}
struct FirstDestinationView: View {
#Binding var isOn: Bool
var body: some View {
NavigationLink("Go to SecondDestinationView", destination: SecondDestinationView(isOn: $isOn))
}
}
struct SecondDestinationView: View {
#Binding var isOn: Bool
var body: some View {
Toggle(isOn: $isOn) {
Text("Toggle")
}
}
}
// Somewhere in SceneDelegate
ContentView().environmentObject(MyEnvironmentObject())
Does anyone know a way to fix this? An easy fix is to disable split view, but that is not possible for me.
When something within EnvironmentObject changes, it will render the whole view again including NavigationLink. That's the root cause of automatic pop back.
My research on it:
OK on iOS 15 (seems Apple fixed)
Still broken on iOS 14
The reason why "This bug went away when I dropped the #EnvironmentObject and went with an #ObservedObject instead." #Jon Vogel mentioned is ObservedObject is a local state, which will not be affected by other views while EnvironmentObject is global state and can change from any other remote views.
Ok, here is my investigation results (tested with Xcode 11.2) and below is the code that works.
In iPad NavigationView got into Master/Details style, so ContentView having initial link is active and process bindings update from environmentObject, so refresh, which result in activating link of details view via same binding, thus corrupting navigation stack. (Note: this is absent in iPhone due to stack style, which deactivates root view).
So, probably this is workaround, but works - the idea is not to pass binding from view to view, but use environmentObject directly in final view. Probably this will not always be a case, but anyway in such scenarios it is needed to avoid root view refresh, so it should not have same binding in body. Something like that.
final class MyEnvironmentObject: ObservableObject {
#Published var selection: Int? = nil
#Published var isOn: Bool = false
}
struct ContentView: View {
#EnvironmentObject var object: MyEnvironmentObject
var body: some View {
NavigationView {
List {
NavigationLink("Go to FirstDestinationView", destination: FirstDestinationView())
}
}
}
}
struct FirstDestinationView: View {
var body: some View {
List {
NavigationLink("Go to SecondDestinationView", destination: SecondDestinationView())
}
}
}
struct SecondDestinationView: View {
#EnvironmentObject var object: MyEnvironmentObject
var body: some View {
VStack {
Toggle(isOn: $object.isOn) {
Text("Toggle")
}
}
}
}
You need can use isDetailLink(_:) to fix that, e.g.
struct FirstDestinationView: View {
#Binding var isOn: Bool
var body: some View {
NavigationLink("Go to SecondDestinationView", destination: SecondDestinationView(isOn: $isOn))
.isDetailLink(false)
}
}
I have a NavigationView at the root of my app that has the initial state of .navigationViewStyle(.stack), but as I navigate, I want to change that style to .doubleColumn.
From my descendent view I have tried calling navigationViewStyle(.doubleColumn) much like how you change the navigation bar title, but no luck.
Trying a ternary operator in the root view also doesn't work navigationViewStyle(isDoubleColumn ? .doubleColumn : .stack)
ROOT VIEW:
var body: some View {
NavigationView {
VStack {
//stuff
}
}
.navigationViewStyle(.stack)
}
Descendent View
var body: some View {
ScrollView{
//stuff
}
.navigationViewStyle(.doubleColumn) //doesn't work
}
DoubleColumnNavigationViewStyle is a struct that needs to be initialized. Try it this way:
.navigationViewStyle(DoubleColumnNavigationViewStyle())
The code below does the job but with the price of losing of some state data so it may not really be the solution.
struct SwiftUIView: View {
#State var isDoubleColumn = false
var body: some View {
Group {
if isDoubleColumn{
NavigationView {
Text("Hello, World!")
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
} else {
NavigationView {
Text("Hello, World!")
}
}
}
}
}
I'm not an expert but something tells me that the style can't be changed during NavigationView lifetime.