SwiftUI updating #Binding value in NavigationLink(destination:label) causes destination to reappear - binding

I have a weird issue, where I navigate to EditView and edit a state variable from ContentView. After that I dismiss EditView with presentation.wrappedValue.dismiss(). The problem is, as soon as the view is dismissed, it reappears again.
I'm using XCode 12.4 and my iOS deployment target is set to 14.4
Observations:
EditView doesn't reappear if the value isn't edited
removing the changed value Text("Value: \(title)") >> Text("Value") from ContentView tree resolves the issue, but that obviously isn't a solution.
moving the NavigationLink from .toolbar e.g.
VStack {
Text("Value: \(title)")
NavigationLink(destination: EditView(title: $title)){
Text("Edit")
}
}
also resolves the issue, but that seems like a hack. Besides, I'd like to keep using .toolbar because I like the .navigationTitle animation and I can't have a button in the upper-right corner of the screen if I have a navigation title without the toolbar.
Here's the full code:
import SwiftUI
struct ContentView: View {
#State var title: String = "Title"
#State var isActive: Bool = false
var body: some View {
NavigationView {
Text("Value: \(title)")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
NavigationLink(destination: EditView(title: $title, isActive: $isActive), isActive: $isActive){
Text("Edit")
}
}
}
}
}
}
struct EditView: View {
#Environment(\.presentationMode) var presentation
#Binding var title: String
#Binding var isActive: Bool
var body: some View {
Button(action: {
title = "\(Date().timeIntervalSince1970)"
// presentation.wrappedValue.dismiss()
isActive = false
}){
Text("Done")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
As far as I can tell this is a .toolbar bug, and if it turns out that way I'll report it to Apple, but in the meantime, does anyone have a better solution and/or explanation for this?
Cheers!
EDIT:
I updated the code with isActive value for the NavigationLink. It doesn't work when written like that, but uncommenting the commented out line makes it work. But that's quite hacky.

You are mixing up 2 things NavigationLink will push the view on stack, just like NavigationController in swift. That’s why you can see back button after navigating to second view. When you hit back button, it will pop top most view out of stack. presentationMode is not needed , dismissing presented view will not pop it of the stack.
To present a view and dismiss it you can check below code.
import SwiftUI
struct ContentViewsss: View {
#State var title: String = "Title"
#State var isPresented = false
var body: some View {
NavigationView {
Text("Value: \(title)")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button(action: {
isPresented.toggle()
}){
Text("Edit")
}
}
}
}.sheet(isPresented: $isPresented, content: {
EditView(title: $title, state: $isPresented)
})
}
}
struct EditView: View {
#Binding var title: String
#Binding var state: Bool
var body: some View {
Button(action: {
title = "\(Date().timeIntervalSince1970)"
state.toggle()
}){
Text("Done")
}
}
}
If you want NavigationLink functionality, you can just remove presentationMode code from second view, and keep ContentView as it is -:
struct EditView: View {
//#Environment(\.presentationMode) var presentation
#Binding var title: String
var body: some View {
Button(action: {
title = "\(Date().timeIntervalSince1970)"
// presentation.wrappedValue.dismiss()
}){
Text("Done")
}
}
}

Related

SwiftUI NavigationView with List programmatic navigation does not work

I am trying to do programmatic navigation in NavigationView, but for some reason I am unable to switch between the views. When switching from the parent view everything works fine - but as soon as I am trying to switch while being in one of the child views I get this strange behaviour (screen is switching back and forth). I tried disabling animations, but this did not help. Strangely enough, if I remove a list together with .navigationViewStyle(StackNavigationViewStyle()) everything starts to work - but I need a list.
This seems to be somewhat similar to Deep programmatic SwiftUI NavigationView navigation but I do not have deep nesting and it still does not work.
I am using iOS 14.
struct TestView: View {
#State private var selection: String? = nil
var body: some View {
VStack {
NavigationView {
VStack {
List {
NavigationLink(destination: Text("View A"), tag: "A", selection: self.$selection) { Text("A") }
NavigationLink(destination: Text("View B"), tag: "B", selection: self.$selection) { Text("B") }
}
}
.navigationTitle("Navigation")
}
.navigationViewStyle(StackNavigationViewStyle())
Button("Tap to show A") {
selection = "A"
}.padding()
Button("Tap to show B") {
selection = "B"
}.padding()
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
}
}
Here is the behaviour i get:
Navigation View/Link is meant to operate from parent to child directly, if you break that order then you should not use navigate via NavLink.
What you need to do is use a fullScreenCover which I think solves your problem nicely. Copy and paste the code to see what I mean.
import SwiftUI
struct TestNavView: View {
#State private var selection: String? = nil
#State private var isShowing = false
#Environment(\.presentationMode) var pMode
var body: some View {
VStack {
NavigationView {
VStack {
List {
NavigationLink(destination: Text("View A"), tag: "A", selection: self.$selection) { Text("A") }
NavigationLink(destination: Text("View B"), tag: "B", selection: self.$selection) { Text("B") }
}.fullScreenCover(isPresented: $isShowing, content: {
CView()
})
}
.navigationTitle("Navigation")
}
.navigationViewStyle(StackNavigationViewStyle())
Button("Tap to show A") {
selection = "A"
}.padding()
Button("Tap to show B") {
isShowing = true
selection = "B"
}.padding()
Button("Tap to show C") {
isShowing = true
}.padding()
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestNavView()
}
}
struct CView: View {
#Environment(\.presentationMode) var pMode
var body: some View {
VStack {
Button("Back") {self.pMode.wrappedValue.dismiss() }
Spacer()
Text("C")
Spacer()
}
}
}
If you are only wanting the presented view to take up half the screen, I would recommend using a ZStack to present the view over top of the main window.
You can add your own custom back button to the top left corner (or elsewhere).
This would allow both views to presented and switched between easily.
You can also add a withAnimation() to have the overlayed views to present nicely.

SwiftUI StackNavigationViewStyle will not update NavigationLink selection state

I recognized that my iOS app does have a double column navigation view style resp. split view for larger iPhones, like the iPhone 11 Pro Max, compared to a single column navigation.
I tried to get rid of this unwanted split view according to SwiftUI: unwanted split view on iPad by applying the .navigationViewStyle(StackNavigationViewStyle()) modifier to the NavigationView.
However, that introduces a new issue, where SwiftUI does not update the NavigationLink selection state after returning from a detail view. After coming back, the link is still shown to be active. After removing the .navigationViewStyle(StackNavigationViewStyle()) again, the selection state is updated correctly, so I think I am missing something.
I created a minimal reproducible example project. Please see the code below.
This image demonstrates the issue of a non-updating NavigationLink selection state after returning from a detail view when using the .navigationViewStyle(StackNavigationViewStyle()) modifier.
Minimal reproducible example project:
import SwiftUI
#main
struct TestSwiftUIApp: App {
var body: some Scene {
WindowGroup {
View1()
}
}
}
struct View1: View {
var body: some View {
NavigationView {
List {
NavigationLink(
destination: View2(),
label: {
Text("View2")
}
).isDetailLink(false)
NavigationLink(
destination: View2(),
label: {
Text("View2")
}
).isDetailLink(false)
}.listStyle(InsetGroupedListStyle())
.navigationTitle("View1")
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct View2: View {
#State var presentView3: Bool = false
var body: some View {
List {
Text("Foo")
NavigationLink("View3",
destination: View3(presentView3: $presentView3),
isActive: $presentView3
).isDetailLink(false)
Text("Bar")
}
.listStyle(InsetGroupedListStyle())
.navigationTitle("View 2")
}
}
struct View3: View {
#Binding var presentView3: Bool
#State
var isAddViewPresented: Bool = false
var body: some View {
List {
Button(action: {presentView3 = false}, label: {
Text("Dismiss")
})
}
.listStyle(InsetGroupedListStyle())
.navigationTitle("View3")
.toolbar {
ToolbarItem {
Button(action: {isAddViewPresented.toggle()}, label: {
Label("Add", systemImage: "plus.circle.fill")
})
}
}
.sheet(isPresented: $isAddViewPresented, content: {
Text("DestinationDummyView")
})
}
}

Why onAppear called again after onDisappear while switching tab in TabView in SwiftUI?

I am calling API when tab item is appeared if there is any changes. Why onAppear called after called onDisappear?
Here is the simple example :
struct ContentView: View {
var body: some View {
TabView {
NavigationView {
Text("Home")
.navigationTitle("Home")
.onAppear {
print("Home appeared")
}
.onDisappear {
print("Home disappeared")
}
}
.tabItem {
Image(systemName: "house")
Text("Home")
}.tag(0)
NavigationView {
Text("Account")
.navigationTitle("Account")
.onAppear {
print("Account appeared")
}
.onDisappear {
print("Account disappeared")
}
}
.tabItem {
Image(systemName: "gear")
Text("Account")
}.tag(1)
}
}
}
Just run above code and we will see onAppear after onDisappear.
Home appeared
---After switch tab to Account---
Home disappeared
Account appeared
Home appeared
Is there any solution to avoid this?
It's very annoying bug, imagine this scenario:
Home view onAppear method contains a timer which is fetching data repeatedly.
Timer is triggered invisibly by switching to the Account view.
Workaround:
Create a standalone view for every embedded NavigationView content
Pass the current selection value on to standalone view as #Binding parameter
E.g.:
struct ContentView: View {
#State var selected: MenuItem = .HOME
var body: some View {
return TabView(selection: $selected) {
HomeView(selectedMenuItem: $selected)
.navigationViewStyle(StackNavigationViewStyle())
.tabItem {
VStack {
Image(systemName: "house")
Text("Home")
}
}
.tag(MenuItem.HOME)
AccountView(selectedMenuItem: $selected)
.navigationViewStyle(StackNavigationViewStyle())
.tabItem {
VStack {
Image(systemName: "gear")
Text("Account")
}
}
.tag(MenuItem.ACCOUNT)
}
}
}
enum MenuItem: Int, Codable {
case HOME
case ACCOUNT
}
HomeView:
struct HomeView: View {
#Binding var selectedMenuItem: MenuItem
var body: some View {
return Text("Home")
.onAppear(perform: {
if MenuItem.HOME == selectedMenuItem {
print("-> HomeView")
}
})
}
}
AccountView:
struct AccountView: View {
#Binding var selectedMenuItem: MenuItem
var body: some View {
return Text("Account")
.onAppear(perform: {
if MenuItem.ACCOUNT == selectedMenuItem {
print("-> AccountView")
}
})
}
}
To whom it may help.
Because this behaviour I only could reproduce on iOS 14+, I end up using https://github.com/NicholasBellucci/StatefulTabView (which properly only get called when showed; but don't know if it's a bug or not, but it works with version 0.1.8) and TabView on iOS 13+.
I'm not sure why you are seeing that behaviour in your App. But I can explain why I was seeing it in my App.
I had a very similar setup to you and was seeing the same behaviour running an iOS13 App on iOS14 beta. In my Home screen I had a custom Tab Bar that would animate in and out when a detail screen was displayed. The code for triggering the hiding of the Tab Bar was done in the .onAppear of the Detail screen. This was triggering the Home screen to be redrawn and the .onAppear to be called. I removed the animation and found a much better set up due to this bug and the Home screen .onAppear stopped being called.
So if you have something in your Account Screen .onAppear that has a visual effect on the Home Screen then try commenting it out and seeing if it fixes the issue.
Good Luck.
I have been trying to understand this behavior for a number of days now. If you are working with a TabView, all of your onAppears() / onDisapear() will fire immediately on app init and never again. Which actually makes since I guess?
This was my solution to fix this:
import SwiftUI
enum TabItems {
case one, two
}
struct ContentView: View {
#State private var selection: TabItems = .one
var body: some View {
TabView(selection: $selection) {
ViewOne(isSelected: $selection)
.tabBarItem(tab: .one, selection: $selection)
ViewTwo(isSelected: $selection)
.tabBarItem(tab: .two, selection: $selection)
}
}
}
struct ViewOne: View {
#Binding var isSelected: TabItems
var body: some View {
Text("View One")
.onChange(of: isSelected) { _ in
if isSelected == .one {
// Do something
}
}
}
}
struct ViewTwo: View {
#Binding var isSelected: TabItems
var body: some View {
Text("View Two")
.onChange(of: isSelected) { _ in
if isSelected == .two {
// Do something
}
}
}
}
View Modifier for custom TabView
struct TabBarItemsPreferenceKey: PreferenceKey {
static var defaultValue: [TabBarItem] = []
static func reduce(value: inout [TabBarItem], nextValue: () -> [TabBarItem]) {
value += nextValue()
}
}
struct TabBarItemViewModifer: ViewModifier {
let tab: TabBarItem
#Binding var selection: TabBarItem
func body(content: Content) -> some View {
content
.opacity(selection == tab ? 1.0 : 0.0)
.preference(key: TabBarItemsPreferenceKey.self, value: [tab])
}
}
extension View {
func tabBarItem(tab: TabBarItem, selection: Binding<TabBarItem>) -> some View {
modifier(TabBarItemViewModifer(tab: tab, selection: selection))
}
}

SwiftUI transition from modal sheet to regular view with Navigation Link

I'm working with SwiftUI and I have a starting page. When a user presses a button on this page, a modal sheet pops up.
In side the modal sheet, I have some code like this:
NavigationLink(destination: NextView(), tag: 2, selection: $tag) {
EmptyView()
}
and my modal sheet view is wrapped inside of a Navigation View.
When the value of tag becomes 2, the view does indeed go to NextView(), but it's also presented as a modal sheet that the user can swipe down from, and I don't want this.
I'd like to transition from a modal sheet to a regular view.
Is this possible? I've tried hiding the navigation bar, etc. but it doesn't seem to make a difference.
Any help with this matter would be appreciated.
You can do this by creating an environmentObject and bind the navigationLink destination value to the environmentObject's value then change the value of the environmentObject in the modal view.
Here is a code explaining what I mean
import SwiftUI
class NavigationManager: ObservableObject{
#Published private(set) var dest: AnyView? = nil
#Published var isActive: Bool = false
func move(to: AnyView) {
self.dest = to
self.isActive = true
}
}
struct StackOverflow6: View {
#State var showModal: Bool = false
#EnvironmentObject var navigationManager: NavigationManager
var body: some View {
NavigationView {
ZStack {
NavigationLink(destination: self.navigationManager.dest, isActive: self.$navigationManager.isActive) {
EmptyView()
}
Button(action: {
self.showModal.toggle()
}) {
Text("Show Modal")
}
}
}
.sheet(isPresented: self.$showModal) {
secondView(isPresented: self.$showModal).environmentObject(self.navigationManager)
}
}
}
struct StackOverflow6_Previews: PreviewProvider {
static var previews: some View {
StackOverflow6().environmentObject(NavigationManager())
}
}
struct secondView: View {
#EnvironmentObject var navigationManager: NavigationManager
#Binding var isPresented: Bool
#State var dest: AnyView? = nil
var body: some View {
VStack {
Text("Modal view")
Button(action: {
self.isPresented = false
self.dest = AnyView(thirdView())
}) {
Text("Press me to navigate")
}
}
.onDisappear {
// This code can run any where but I placed it in `.onDisappear` so you can see the animation
if let dest = self.dest {
self.navigationManager.move(to: dest)
}
}
}
}
struct thirdView: View {
var body: some View {
Text("3rd")
.navigationBarTitle(Text("3rd View"))
}
}
Hope this helps, if you have any questions regarding this code, please let me know.

ObservedObject not working on NavigationLink's destination if there are updates on parent

I have two screens, a master and a detail, detail has an ObservedObject that has it's state. I also want to hide the navigation bar on master and show it on detail. To do that, I have the navigation bar hidden status as a #State property on master view and send it back to the detail view as a Binding variable.
The problem I'm having is that whenever I update that variable inside the detail screen, the ObservedObject stops working.
Here's a sample code that reproduces the issue:
struct ContentView: View {
#State var navigationBarHidden = true
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: DetailView(navigationBarHidden: $navigationBarHidden)) {
Text("Go Forward")
}
}
.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(navigationBarHidden)
.onAppear { self.navigationBarHidden = true }
}
}
}
class DetailViewModel: ObservableObject {
#Published var text = "Didn't work"
}
struct DetailView: View {
#Binding var navigationBarHidden: Bool
#ObservedObject var viewModel = DetailViewModel()
var body: some View {
VStack {
Text(viewModel.text)
}.onAppear {
self.navigationBarHidden = false
self.viewModel.text = "Worked"
}
}
}
If I leave it as is, the text will not update to "Worked". If I remove the line self.navigationBarHidden = false, the ObservedObject will work properly and the text will update.
How can I achieve the expected behavior, update the navigation bar while keeping my observed object working?
The reason is, that
NavigationLink(destination: DetailView(navigationBarHidden: $navigationBarHidden)) {
Text("Go Forward")
}
create new DetailView and so on new DetailViewModel when activating
try
import SwiftUI
struct ContentView: View {
#State var navigationBarHidden = true
#ObservedObject var viewModel = DetailViewModel()
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: DetailView(navigationBarHidden: $navigationBarHidden).environmentObject(viewModel)) {
Text("Go Forward")
}
}
.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(navigationBarHidden)
.onAppear { self.navigationBarHidden = true }
}
}
}
class DetailViewModel: ObservableObject {
#Published var text = "Didn't work"
}
struct DetailView: View {
#Binding var navigationBarHidden: Bool
#EnvironmentObject var viewModel: DetailViewModel
var body: some View {
VStack {
Text(viewModel.text)
}.onAppear {
self.navigationBarHidden = false
self.viewModel.text = "Worked"
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Now you share the model with DetailView and it works as expected (written)
If I remove the line self.navigationBarHidden = false, the
ObservedObject will work properly and the text will update.
If you remove this line, the DetailView in not recreated (there is nothing changed in View) State is not part of View state, it is reference type, so SwiftUI don't see any changes until some values which are wrapped by them change.

Resources