Unwanted SplitView on modal view displayed on iPad - ios

Testing my first SwiftUI app on iPad, I discovered that the modal views I display from my ContentView are displayed as Split views on the iPad, with the UI being truncated on the master side and the detail side is empty.
I did check both posts here :
Unwanted SplitView and,
What's the equality of the UISplitView controller
But their solution of applying the .navigationViewStyle(StackNavigationViewStyle) to the NavigationView does not work for me :
I display my modals through user input (tap of a button) using the following method :
When a button is pressed, an Int value is passed to a local var (modalViewCaller) and then to the sheetContent() function.
Here is the end of my var body: some View and the following sheetContent func :
} // END of main VStack
.sheet(isPresented: $isModalPresented, content: sheetContent)
} // END of body
// modalViewCaller is the Int var I set upon button tap
#ViewBuilder func sheetContent() -> some View {
if modalViewCaller == 1 {
firstModalView()
} else if modalViewCaller == 2 {
secondModalView()
} else if modalViewCaller == 3 {
thirdModalView()
}
} // END of func sheetContent
Then in each of these modalViews, I apply the .navigationViewStyle(StackNavigationViewStyle) modifier to the NavigationView that encapsulate my entire view in var body: some View, but I get the following error :
"Type 'StackNavigationViewStyle.Type' cannot conform to 'NavigationViewStyle'; only struct/enum/class types can conform to protocols"
Here is the end of my NavigationView in the modals :
} // End of VStack
.navigationBarItems(
leading:
Button("Done") {
self.saveEdits()
self.presentationMode.wrappedValue.dismiss() // This dismisses the view
} // END of Button "Done"
)
.navigationBarTitle("Takeoff edition")
} // END of Navigation View
.navigationViewStyle(StackNavigationViewStyle)
.onAppear { // assigned fetched event date, here it is available (was not in init())
self.selectedDate = self.fetchedEvent.first?.eventDate ?? Date()
}
} // END of some View
I guess the solution posted was to apply that modifier from the ContentView NavigationView, but I don't have one (and don't want one because of all the screen real estate lost on top of my UI)

Here is fix (it has to be constructed, ie. StackNavigationViewStyle()):
} // END of Navigation View
.navigationViewStyle(StackNavigationViewStyle()) // << here !!

Related

Bug with NavigationLink and #Binding properties causing unintended Interactions in the app

I've encountered a bug in SwiftUI that could cause unintended interaction with the app without the user's knowledge.
Description
The problem seems to be related to using #Binding properties on the View structs when used in conjunction with NavigationStack and NavigationLink. If you use NavigationView with NavigationLink to display a DetailView that accepts a $Binding parameter, and that parameter is used in some sort of condition in the DetailView, it will result in unexpected behavior.
To clearly show the problem, I'm using a DetailView where the "Blue" or "Red" view is shown depending on the #Binding property. Each of those views has a .onTapGesture() modifier that prints some text when tapped. The problem is that if the Red view is shown, it detects and triggers the action on the Blue view, which could lead to unintended changes in many apps without the user's knowledge.
Replication of the problem
You can easily copy and paste this code into your own file to replicate the bug. To see the unexpected behavior, run the code below and follow these steps on the simulator:
Tap on the DetailView in the NavigationLink.
Tap the blue color area and the console will print "Blue Tapped".
Tap the "RED BUTTON" to switch to the other view.
Tap the red color area and the console will print "Red Tapped".
Now try to tap a blank space below the red area (where the blue area was previously located). The console will print "BLUE tapped" - this is the problem, it seems that the blue view is still active there.
I tested this behavior on: XCode 14.1, iPhone 13 Pro 16.1 iOS Simulator, and on a real iPhone with iOS 16. The result was always the same.
import SwiftUI
struct ContentView: View {
var body: some View {
NavView()
}
}
struct NavView: View {
#State private var colourShowed: Int = 1
var body: some View {
// If the DetailView() was shown directly, (without the NavigationLink and NavigationStack) there would be no such a bug.
// DetailView(colourShowed: $colourShowed)
// The bug is obvious when using the NavigationStack() with the NavigationLink()
NavigationStack {
Form {
NavigationLink(destination: { DetailView(colourShowed: $colourShowed) },
label: { Text("Detail View") })
}
}
}
}
struct DetailView: View {
// It seems like the problem is related to this #Binding property when used in conjunction
// with the NavigationLink in "NavView" View above.
#Binding var colourShowed: Int
var body: some View {
ScrollView {
VStack(spacing: 20){
HStack {
Button("BLUE BUTTON", action: {colourShowed = 1})
Spacer()
Button("RED BUTTON", action: {colourShowed = 2})
}
if colourShowed == 1 {
Color.blue
.frame(height: 500)
// the onTapeGesture() is stillActive here even when the "colourShowed" property is set to '2' so this
// view should therefore be deinitialized.
.onTapGesture {
print("BLUE tapped")
}
// The onAppear() doesn't execute when switching from the Red view to the Blue view.
// It seems like the "Blue" View does not deinitialize itself after being previously shown.
.onAppear(perform: {print("Blue appeared")})
}
else {
Color.red
.frame(height: 100)
.onTapGesture {
print("RED tapped")
}
.onAppear(perform: {print("Red appeared")})
}
}
}
}
}
Is there any solution to prevent this?
This is a common problem encountered by those new to Swift and value semantics, you can fix it by using something called a "capture list" like this:
NavigationLink(destination: { [colourShowed] in
It occurred because DetailView wasn't re-init with the new value of colourShowed when it changed. Nothing in body was using it so SwiftUI's dependency tracking didn't think body had to be recomputed. But since you rely on DetailView being init with a new value you have to add it to the capture list to force body to be recomputed and init a new DetailView.
Here are other questions about the same problem with .sheet and .task.

Presence of #Environment dismiss causes list to constantly rebuild its content on scrolling

I need to build a list of TextFields where each field is associated with focus id, so that I can auto scroll to such a text field when it receives focus. In reality the real app is a bit more complex which also includes TextEditors and many other controls.
Now, I found out that if my view defines #Environment(\.dismiss) private var dismiss then the list is rebuilding all the time during manual scrolling. If I just comment out the line #Environment(\.dismiss) private var dismiss then there is no rebuilding of the list when I scroll. Obviously, I want to be able to dismiss my view when user clicks some button. In the real app it's even worse: during scrolling everything is lagging, I cannot get smooth scrolling. And my list is not huge it's just 10 items or so.
Here is a demo example:
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink {
DismissListView()
} label: {
Text("Go to see the list")
}
}
}
}
struct DismissListView: View {
#Environment(\.dismiss) private var dismiss
enum Field: Hashable {
case line(Int)
}
#FocusState private var focus: Field?
#State private var text: String = ""
var body: some View {
ScrollViewReader { proxy in
List {
let _ = print("body is rebuilding")
Button("Dismiss me") {
dismiss()
}
Section("Section") {
ForEach((1...100), id: \.self) {num in
TextField("text", text: $text)
.id(Field.line(num))
.focused($focus, equals: .line(num))
}
}
}
.listStyle(.insetGrouped)
.onChange(of: focus) {_ in
withAnimation {
proxy.scrollTo(focus, anchor: .center)
}
}
}
}
}
The questions are:
Why is the list rebuilding during manual back and forth scrolling when #Environment(\.dismiss) private var dismiss is defined, and the same is NOT happening when dismiss is NOT defined?
Is there any workaround for this: I need to be able to use ScrollProxyReader to focus any text field when the focus changes, and I need to be able to dismiss the view, but in the same time I need to avoid constant rebuilds of the list during scrolling, because it drops app performance and scrolling becomes jagged...
P.S. Demo app constantly outputs "body is rebuilding" when dismiss is defined and the list is scrolled, but if any text field gets a focus manually, then the "body is rebuilding" is not printed anymore even if the dismiss is still defined.
I could make an assumption, but that would be really rather a guess (based on experience, observations, etc). In a fact, all WHYs like "why this sh... (bug) happens" should be asked on https://developer.apple.com/forums/ (there are Apple's engineers there) or reported to https://developer.apple.com/bug-reporting/
A solution is to separate dismiss depenent part into dedicated view, so hiding it from parent body (and so do not affect it)
struct DismissView: View {
// visible only for this view !!
#Environment(\.dismiss) private var dismiss
var body: some View {
Button("Dismiss me") {
// affects current context, so it does not matter
// in which sub-view is called
dismiss()
}
}
}
var body: some View {
ScrollViewReader { proxy in
List {
let _ = print("body is rebuilding")
DismissView() // << here !!
// ... other code

SwiftUI NavigationView nested bar issue

I have a View with a list with navigationLinks, and show a list of items to DetailView, and DetailView can go to another View and so on. Therefore it will have a full navigation stack in here.
However, in our app, we have two ways to show this view, first, a presenting View to show this view. Second, by other navigationLink under another NavigationView to push to this view. In the first case, it is fine. however in second case, it will show nested navigation bar, which I don't really like it.
Is there any possible way to show the following view without any nested navigationBar, in the pushing and presenting(UIKit wording) way
var body: some View {
NavigationView {
List(items) { item in
NavigationLink(destination: DetailView(item)) {
ItemRow(item)
}
}
.navigationBarTitle("Item list")
}
}
thanks a lot!
As Asperi says, you must separate the View into two Views. You have double NavigationBar because in the case where you already enter with the previous NavigationView at the top level of the View hierarchy, having another NavigatioView makes it double the NavigationBar.
You must do something like this in the View before this one:
var body: some View {
VSTack {
Text("Hello Word")
Button(action: {
if isShowWithPresent { // Some Bool
NavigationView {
SomeView()
}
} else {
AnotherView() // Some View without the NavigationView in the code
}
}) {
Text("Hit Me!")
}
}
}

How do I stop a view from refreshing each time I return from a detail view in SwiftUI?

I have a view which displays a list of posts. I have implemented infinite scrolling, and it is functioning properly. however, there is one small problem I am running into, and attempts to solve it have me going round in circles.
Main view
struct PostsHomeView: View {
#EnvironmentObject var viewModel: ViewModel
#State var dataInitiallyFetched = false
var body: some View {
NavigationView {
VStack(alignment: .center, spacing: 0) {
if self.viewModel.posts.count > 0 {
PostsListView(posts: self.viewModel.posts,
isLoading: self.viewModel.canFetchMorePosts,
onScrolledAtBottom: self.viewModel.fetchMorePosts
)
} else {
VStack {
Text("You have no posts!")
}
}
}
.onAppear() {
if !self.dataInitiallyFetched {
self.viewModel.fetchMostRecentPosts()
self.dataInitiallyFetched = true
}
}
.navigationBarTitle("Posts", displayMode: .inline)
}
}
}
List view
struct PostsListView: View {
#EnvironmentObject var viewModel: ViewModel
let posts: [Post]
let isLoading: Bool
let onScrolledAtBottom: () -> Void
var body: some View {
List {
postsList
if isLoading {
loadingIndicator
}
}
}
private var postsList: some View {
ForEach(posts, id: \.self) { post in
PostsCellView(post: post)
.onAppear {
if self.posts.last == post {
self.onScrolledAtBottom()
}
}
}
.id(UUID())
}
}
Problem
Upon tapping one of the posts in the list, I am taken to a detail view. When I tap the nav bar's back button in order go back to the posts list, the whole view is reloaded and my post fetch methods are fired again.
In order to stop the fetch method that fetches most recent posts from firing, I have added a flag that I set to true after the initial load. This stops the fetch method that grabs the initial set of posts from firing when I go back and forth between the details view and posts home screen.
I have tried various things to stop the fetchMorePosts function from firing, but I keep going in circles. I added a guard statement to the top of the fetchMorePosts function in my view model. It checks to see if string is equal to "homeview", if not, then the fetch is not done. I set this string to "detailview" whenever the detail view is visited, then I reset it back to "homeview" in the guard statement.
guard self.lastView == "homeview" else {
self.lastView = "homeview"
return
}
This works to an extent, but I keep finding scenarios where it doesn't work as expected. There must be a straight-forward way to tell SwiftUI not to reload a view. The problem is the method sits in the onAppear closure which is vital for the infinite scrolling to work. I'm not using iOS 14 yet, so I can't use #StateObject.
Is there a way to tell SwiftUI not to fire onAppear everytime I return from a detail view?
Thanks in advance
The culprit was .id(UUID()). I removed it from my list and everything worked again.
Thanks Asperi. Your help is much appreciated.

Present multiple modal sheet with SwiftUI [duplicate]

This question already has answers here:
Multiple sheet(isPresented:) doesn't work in SwiftUI
(21 answers)
Closed 2 years ago.
I am trying to attach multiple modal views to a NavigationView using .sheet presentation.
I tried chaining the .sheet together just to discover that only the last one can be triggered to display when bind variable is changed
Is there a way to do this for multiple modals?
var body: some View {
NavigationView {
ZStack(alignment: .leading) {
MainView()
}
// present profile page
.sheet(isPresented: self.$presentation.profile){
ProfilePage()
}
// present product page
.sheet(isPresented: self.$presentProduct) {
SingleProductView()
}
//present login
.sheet(isPresented: self.$showLogin) {
LoginView(showLogin:self.$showLogin)
}
//present cart
.sheet(isPresented: self.$showCart) {
CartView()
}
// set title
.navigationBarTitle("Title", displayMode: .inline)
// set items
.navigationBarItems(leading: (
NavigationBarLeadingItems()
),trailing: (
NavigationBarTrailingItems()
)
)
Calling the same method multiple times on the same Element in SwiftUI will always result in only the last one being applied.
Text("Some Nice Text")
.forgroundColor(.red)
.forgroundColor(.blue)
This will always result in the Text to be displayed in blue and not in red, even thou you set its color to red. Same gos for you .sheet call. The last .sheet call will kinda override its predecesors.
There are two possible solutions:
you place the .sheet call on different Views.
ViewOne().sheet(...) { ... }
ViewSecond().sheet(...) { ... }
you change the content of you .sheet call dynamically:
View()
.sheet(...) {
if someState {
return SheetViewOne()
else {
return SheetViewSecond()
}
}
}

Resources