I have two screens. First screen has following code
NavigationLink(destination: SecondScreen()) {
Text("Scan Qr Code")
}
The NavigationLink navigates to second screen which works as expected. In the second screen
struct SecondScreen: View {
#Environment(\.presentationMode) var presentation
var body: some View{
Button("Done") {
self.presentation.wrappedValue.dismiss()
}
}}
The button in second screen pops to first screen which works as expected, but as soon as I come back to first screen and I click NavigationLink, it does not move to second screen.
Here is a solution. Use a button on the first screen instead of the navigation link and use that button to pop out a sheet. I tested this and it worked for me!
struct ContentView: View {
#State private var showingAddExpense = false
var body: some View {
NavigationView{
Button(action: {
self.showingAddExpense = true
}) {
Text("Button")
}
.sheet(isPresented: $showingAddExpense) {
SecondScreen()
}
}
}
}
struct SecondScreen: View {
#Environment(\.presentationMode) var presentation
var body: some View{
NavigationView{
Button("Done") {
self.presentation.wrappedValue.dismiss()
}
}
}
}
Related
say I create 3 screens in SwiftUI which contains a NavigationLink to the next screen. like, first screen navigates to 2nd screen. 2nd screen navigates to third. and the third screen navigates to the first screen. In this case even if I use NavigationView only once(in the first screen). I encountered that there's a back button forming when I navigate to 1st screen from the third screen. And it keeps adding up when I start to navigate from then on. I have tried to use .navigationBarBackButtonHidden(true). It hides it but the space taken by back button was still there.
My code is similar to this:
struct FirstScreen: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: SecondScreen()) {
Text("Go to Second Screen")
}
}
}
}
}
struct SecondScreen: View {
var body: some View {
VStack {
NavigationLink(destination: ThirdScreen()) {
Text("Go to Third Screen")
}
}
}
}
struct ThirdScreen: View {
var body: some View {
VStack {
NavigationLink(destination: FirstScreen()) {
Text("Go to First Screen")
}
}
}
}
this is the image
You're pushing the FirstScreen onto your navigation stack, but FirstScreen contains its own NavigationView. If you really want to keep pushing them on the stack, then move the NavigationView outside of FirstScreen.
struct ContentView: View {
var body: some View {
NavigationStack { // Use NavigationStack for iOS 16
FirstScreen()
}
}
}
struct FirstScreen: View {
var body: some View {
VStack {
NavigationLink(destination: SecondScreen()) {
Text("Go to Second Screen")
}
}
}
}
If you actually want to pop all the views off the stack and go back to FirstScreen you should use
init(path: Binding<NavigationPath>, etc)
Here's a simple example passing the path down the stack and resetting it to pop back to the root…
enum Screen {
case two, three
}
struct ContentView: View {
#State var path = NavigationPath()
var body: some View {
NavigationStack(path: $path) {
VStack {
// value gets appended to path
NavigationLink("Go to Second Screen", value: Screen.two)
}
// Decides which screen to show for values in path
.navigationDestination(for: Screen.self) { index in
switch index {
case .two:
SecondScreen(path: $path)
case .three:
ThirdScreen(path: $path)
}
}
}
}
}
struct SecondScreen: View {
#Binding var path: NavigationPath
var body: some View {
VStack {
NavigationLink("Go to Third Screen", value: Screen.three)
}
}
}
struct ThirdScreen: View {
#Binding var path: NavigationPath
var body: some View {
VStack {
Button("Go to First Screen") {
// reset the path to pop to root
path = NavigationPath()
}
}
}
}
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
Is there a way to dismiss a modal view without animation in SwiftUI?
I want to dismiss a modal without the dismiss animation because I want to navigate from the modal view to a new SwiftUI View using a view router. Everything is working, except for the transition animation from the modal view to the new full-screen view. I followed that tutorial to create a view router: Tutorial
I'm using that code snippet to present the modal view:
struct ContentView: View {
#State private var showModal = false
#Environment(\.presentationMode) var presentationMode
var body: some View {
Button(action: {
self.showModal = true
}) {
Text("Show modal")
}.sheet(isPresented: self.$showModal) {
ModalView()
}
}
}
struct ModalView: View {
#EnvironmentObject var viewRouter: ViewRouter
var body: some View {
Group {
Text("Modal view")
Button(action: {
self.viewRouter.currentPage = "New View"
}) {
Text("Dismiss")
}
}
}
}
Source: Answer by #M Reza Farahani
Here is a solution in Swift: Swift solution
Did not fully test this since I dont have the ViewRouter
You should move the
#Environment(\.presentationMode) var presentationMode
the ModalView and add
self.presentationMode.wrappedValue.dismiss()
to the button action in that ModalView
Edit:
After I added
.animation(.none)
To the ModalView it worked for me
Alright thats one ugly a** comment so putting it here:
struct ModalView: View {
// #EnvironmentObject var viewRouter: ViewRouter
#Environment(\.presentationMode) var presentationMode
var body: some View {
Group {
Text("Modal view")
Button(action: {
// self.viewRouter.currentPage = "New View"
self.presentationMode.wrappedValue.dismiss()
}) {
Text("Dismiss")
}
}
.animation(.none)
}
}
It seems as though I'm unable to choose which pages I want to hide the Navigation Bar on in swift UI.
I have the following screens:
Main
struct Main: View {
var body: some View {
NavigationView {
Home()
}
}
}
Home
struct Home: View {
var body: some View {
NavigationLink(destination: Details()) {
Text("Go Next")
}
// I expect the navigation bar to show up here, and it does
.navigationBarTitle("Home")
.navigationBarHidden(false)
}
}
Details
struct Details: View {
#Environment(\.presentationMode) var mode: Binding<PresentationMode>
var body: some View {
Button(action: { self.mode.wrappedValue.dismiss() }) {
Text("Go Back")
}
// I expect the navigation bar to be hidden here
// At first, it is hidden. Then, after a second, it pops up
// with the title "Details"
.navigationBarTitle("Details")
.navigationBarHidden(true)
}
}
Either I'm doing this wrong (likely), or Apple has some work to do (also likely).
As I saw earlier, something comes wrong, when you use both:
.navigationBarTitle("some text")
.navigationBarHidden(true)
in code below there is no navigation bar staff and nothing pops up:
struct Details: View {
#Environment(\.presentationMode) var mode: Binding<PresentationMode>
var body: some View {
Button(action: { self.mode.wrappedValue.dismiss() }) {
Text("Go Back")
}
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true) // even no back button
}
}
I have a list in a Navigation View, with a trailing navigation button to add a list item. The button opens a modal sheet. When I dismiss the sheet (by pulling it down), the sheet pops right back up again automatically and I can't get back to the first screen. Here's my code.
struct ListView: View {
#ObservedObject var listVM: ListViewModel
#State var showNewItemView: Bool = false
init() {
self.listVM = ListViewModel()
}
var body: some View {
NavigationView {
List {
ForEach(listVM.items, id: \.dateCreated) { item in
HStack {
Text(item.name)
Spacer()
Image(systemName: "arrow.right")
}
}
}
.navigationBarTitle("List Name")
.navigationBarItems(trailing: AddNewItemBtn(isOn: $showNewItemView))
}
}
}
struct AddNewItemBtn: View {
#Binding var isOn: Bool
var body: some View {
Button(
action: { self.isOn.toggle() },
label: { Image(systemName: "plus.app") })
.sheet(
isPresented: self.$isOn,
content: { NewItemView() })
}
}
I am getting this error:
Warning: Attempt to present <_TtGC7SwiftUIP13$7fff2c603b7c22SheetHostingControllerVS_7AnyView_: 0x7fc5e0c1f8f0> on which is already presenting (null)
I've tried toggling the bool within "onDismiss" on the button itself, but that doesn't work either. Any ideas?
Turns out putting the button in the navigationBarItems(trailing:) modifier is the problem. I just put the button in the list itself instead of in the nav bar and it works perfectly fine. Must be some kind of bug.