Trying to hide the status bar in iOS SwiftUI on the first view.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: ContentViewC()) {
Text("New View")
}
}.offset(y: 100)
}.navigationViewStyle(StackNavigationViewStyle())
.accentColor(.white)
.statusBar(hidden: true)
}
}
The status bar is still showing on the initial view. Any suggestions?
This looks like a SwiftUI bug. The possible valid workaround is to use UIKit view controller, as representable, to manage status bar hidden.
Here is a demo of possible solution. Tested with Xcode 12.4 / iOS 14.4
class StatusBarHideHelper: UIViewController {
override var prefersStatusBarHidden: Bool { true } // << important !!
}
struct StatusBarHideHelperView: UIViewControllerRepresentable {
func makeUIViewController(context: Context) -> UIViewController {
StatusBarHideHelper()
}
func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
}
}
and now we can use it in our SwiftUI view hierarchy, like
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: ContentViewC()) {
Text("New View")
}
}.offset(y: 100)
}.navigationViewStyle(StackNavigationViewStyle())
.background(StatusBarHideHelperView()) // << this !!
.accentColor(.white)
Try that one
struct ContentView: View {
#State var hideStatusBar = false
var body: some View {
Button("Toggle Status Bar") {
withAnimation {
self.hideStatusBar.toggle()
}
}
.statusBar(hidden: hideStatusBar)
}
}
Related
While this question has been asked previously, none of the threads deal with the latest SwiftUI and iOS15+.
I am seeing this error in console when navigating to a second level in a custom tab view, where the NavigationView is instantiated outside of the custom tab view.
The full error is:
[Presentation] Attempt to present <SwiftUI.PlatformAlertController: 0x7f8962874800> on <_TtGC7SwiftUI19UIHostingControllerGVS_15ModifiedContentVS_7AnyViewVS_24NavigationColumnModifier__: 0x7f896080dac0> (from <_TtGC7SwiftUI19UIHostingControllerGVS_15ModifiedContentVS_7AnyViewVS_24NavigationColumnModifier__: 0x7f896080dac0>) whose view is not in the window hierarchy
The hierarchy is as follows:
Login Page (NavigationView instantiated here) -> Tap NavigationLink
from this view
Custom Tab View is displayed -> Tap any tab and see
the correct view
Tap a NavigationLink from within one of these views
and the alert works perfectly
Tap a NavigationLink from within that view and the error is shown and no alerts work
I know it's a lot of code, but I have been asked to provide code that will compile, and since this is quite a few different files to make this happen, I stripped everything down to the bare minimum so the issue could be recreated.
Here's the code:
App:
import SwiftUI
#main
struct TestApp: App {
#StateObject var viewRouter: ViewRouter
init() {
let viewRouter = ViewRouter()
_viewRouter = StateObject(wrappedValue: viewRouter)
}
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(viewRouter)
}
}
}
ViewRouter:
import Foundation
class ViewRouter: ObservableObject {
#Published var accessView: DisplayView = .home
}
enum DisplayView {
case settings
case home
}
ContentView:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(
destination: HomeView()
) {
Text("Go To Tab View")
}
.isDetailLink(false)
}
}
}
HomeView:
import SwiftUI
struct HomeView: View {
#EnvironmentObject var viewRouter: ViewRouter
var body: some View {
switch viewRouter.accessView {
case .home:
UserHome()
.navigationBarHidden(true)
case .settings:
UserSettings()
.navigationBarHidden(true)
}
}
}
struct HomeNavView: View {
#EnvironmentObject var viewRouter: ViewRouter
var body: some View {
VStack(spacing: 0) {
VStack(spacing: 30) {
HStack(alignment: .bottom) {
Image(systemName: "House")
.onTapGesture {
viewRouter.accessView = .home
}
.frame(maxWidth: .infinity)
Image(systemName: "Person")
.onTapGesture {
viewRouter.accessView = .settings
}
.frame(maxWidth: .infinity)
}
}
}
.ignoresSafeArea()
.zIndex(1)
}
}
UserHome:
import SwiftUI
struct UserHome: View {
var body: some View {
Text("User Home View")
HomeNavView()
}
}
UserSettings:
import SwiftUI
struct UserSettings: View {
var body: some View {
NavigationLink(
destination: SectionView()
) {
Text("Go To Section View")
}
}
}
SectionView (if you try to display an alert here, it works just fine):
import SwiftUI
struct SectionView: View {
var body: some View {
NavigationLink(
destination: AlertView()
) {
Text("Go To Alert View")
}
}
}
AlertView (This is where you see the error in console and the alert does not work):
import SwiftUI
struct AlertView: View {
#State private var alertTest: Bool = false
var body: some View {
Button("Show Alert") {
alertTest = true
}
.alert(
"Alert",
isPresented: $alertTest,
actions: {
Button("OK", role: .cancel) {
}
}, message: {
Text("The alert is working!")
})
}
}
I am using .refreshable to List in Home Screen. When user clicks on any cell item from the List, presenting DetailsView by sheet/fullscreenCover. But, .refreshable is still attached with DetailsView.
How to disable refreshable in nested view (DetailsView) which is presented from Home Screen?
HomeView.swift
struct HomeView: View {
#State private var showDetailsView: Bool = false
var body: some View {
NavigationView {
List(0..<29) { _ in
Text("Hello, world!")
.padding()
.onTapGesture {
showDetailsView = true
}
//.sheet or .fullScreenCover
.fullScreenCover(isPresented: $showDetailsView) {
DetailsView()
}
}
.refreshable {
print("refreshing...")
}
.navigationTitle("Home")
}
}
}
DetailsView.swift
struct DetailsView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView {
List(0..<29) { _ in
Text("DetailsView...")
.padding()
}
.navigationTitle("DetailsView")
.navigationBarItems(
leading:
Button(action: {
presentationMode.wrappedValue.dismiss()
}) {
Text("Close")
}
)
}
}
}
}
Move fullScreenCover modifier out of NavigationView (on home), and probably in real app it will be needed to use variant with item fullScreenCover(item:) instead to pass selection.
var body: some View {
NavigationView {
List(0..<29) { _ in
Text("Hello, world!")
.padding()
.onTapGesture {
showDetailsView = true
}
//.sheet or .fullScreenCover
}
.refreshable {
print("refreshing...")
}
.navigationTitle("Home")
}
.fullScreenCover(isPresented: $showDetailsView) { // << here !!
DetailsView()
}
}
Tested with Xcode 13.3 / iOS 15.4
I am new to SwiftUI and I am trying to use the .transition, but for some reason no transition happens.
You can see the code below:
View
import SwiftUI
struct ContentView: View {
#ObservedObject var viewModel = ViewModel()
var body: some View {
if self.viewModel.model.show {
Text("Showing")
.padding()
} else {
Text("Not Showing")
.padding()
.transition(.asymmetric(insertion: .scale, removal: .opacity))
}
Button {
self.viewModel.show()
} label: {
Text("Tap to change")
}
}
}
ViewModel
class ViewModel: ObservableObject {
#Published private(set) var model = Model()
func show() {
self.model.toggleShow()
}
}
Model
struct Model {
var show: Bool = true
mutating func toggleShow() {
self.show.toggle()
}
}
When I tap the button the text changes but no transition occurs.
I feel like I am missing something trivial here.
Can anyone please assist?
You need an animation (to animate transition) and a container (which performs actual transition, because default implicit Group does not do that).
Here is fixed part of code (tested with Xcode 13.2 / iOS 15.2)
*Note:Preview > Debug > Slow Animation for better visibility
var body: some View {
VStack { // << this !!
if self.viewModel.model.show {
Text("Showing")
.padding()
} else {
Text("Not Showing")
.padding()
.transition(.asymmetric(insertion: .scale, removal: .opacity))
}
}
.animation(.default, value: self.viewModel.model.show) // << here !!
Button {
self.viewModel.show()
} label: {
Text("Tap to change")
}
}
Your code is fine (besides the fact that you need a VStack wrapping the text and the button), you only need to tell SwiftUI to use the transition by wrapping the command inside withAnimation().
Here's what you simply need to do in ContentView (look at the Button):
#ObservedObject var viewModel = ViewModel()
var body: some View {
VStack {
if self.viewModel.model.show {
Text("Showing")
.padding()
} else {
Text("Not Showing")
.padding()
.transition(.asymmetric(insertion: .scale, removal: .opacity))
}
Button {
withAnimation { // This is what you need to trigger the transition
self.viewModel.show()
}
} label: {
Text("Tap to change")
}
}
.animation(.easeIn, value: self.viewModel.show)
}
I have a ContentView containing a NavigationView that leads to a DestinationView. I want to hide the navigation bar in the ContentView, but show it in the DestinationView. To hide it in the ContentView I set navigationBarHidden to true and give navigationBarTitle an empty string.
In the DestinationView I set navigationBarHidden to false and give it the title "DestinationView".
If I run the project and tap on the NavigationLink, the DestinationView shows the NavigationBar but quickly hides it after the view appeared. Can anybody help me with this?
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
Color.red.frame(maxWidth: .infinity, maxHeight: .infinity)
NavigationLink(destination: DestinationView()) {
ZStack {
Color.green.frame(width: 200, height: 200)
Text("Tap me")
}
}
}
.navigationBarTitle("")
.navigationBarHidden(true)
}
}
}
struct DestinationView: View {
var body: some View {
List {
Text("1")
Text("2")
}
.navigationBarTitle("DestinationView")
.navigationBarHidden(false)
}
}
You need to use variable to achieve this and bind it with your destination
struct ContentView: View {
#State var isNavigationBarHidden: Bool = true
var body: some View {
NavigationView {
ZStack {
Color.red.frame(maxWidth: .infinity, maxHeight: .infinity)
NavigationLink(destination: DestinationView(isNavigationBarHidden: self.$isNavigationBarHidden)) {
ZStack {
Color.green.frame(width: 200, height: 200)
Text("Tap me")
}
}
}
.navigationBarHidden(self.isNavigationBarHidden)
.navigationBarTitle("")
.onAppear {
self.isNavigationBarHidden = true
}
}
}
}
struct DestinationView: View {
#Binding var isNavigationBarHidden: Bool
var body: some View {
List {
Text("1")
Text("2")
}
.navigationBarTitle("DestinationView")
.onAppear {
self.isNavigationBarHidden = false
}
}
}
There is an issue with the safe area layout guide
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
Color.red.frame(maxWidth: .infinity, maxHeight: .infinity)
VStack {
NavigationLink(destination: DestinationView()) {
ZStack {
Color.green.frame(width: 200, height: 200)
Text("Tap me")
}
}
}
}.edgesIgnoringSafeArea(.all)
.navigationBarHidden(true)
}
}
}
struct DestinationView: View {
var body: some View {
VStack {
List {
Text("1")
Text("2")
}
}.navigationBarTitle("DestinationView")
.navigationBarHidden(false)
}
}
Happy Coding...
Edit: use the accepted answer as it's a much cleaner solution.
I encountered this bug and ended up using UIViewControllerRepresentable to wrap a controller which sets the navigation bar hidden state in its viewDidAppear method:
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
Color.red.frame(maxWidth: .infinity, maxHeight: .infinity)
NavigationLink(destination: DestinationView()) {
ZStack {
Color.green.frame(width: 200, height: 200)
Text("Tap me")
}
}
}
.navigationBarTitle("")
.navigationBarHidden(true)
}
}
}
struct DestinationView: View {
var body: some View {
List {
Text("1")
Text("2")
}
.navigationBarTitle("DestinationView")
.navigationBarHidden(false)
.background(HorribleHack())
}
}
struct HorribleHack: UIViewControllerRepresentable {
func makeUIViewController(context: Context) -> HorribleHackViewController {
HorribleHackViewController()
}
func updateUIViewController(_ uiViewController: HorribleHackViewController, context: Context) {
}
}
class HorribleHackViewController: UIViewController {
override func viewDidAppear(_ animated: Bool) {
DispatchQueue.main.async {
self.navigationController?.setNavigationBarHidden(false, animated: false)
}
}
}
For me passing a binding around through the view hierarchy wasn't optimal, adding the state to an environment var was preferable.
class SceneState: ObservableObject {
#Published var isNavigationBarHidden = true
}
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
...
var sceneState = SceneState()
...
let contentView = ContentView().environmentObject(sceneState)
...
}
struct ContentView: View {
var body: some View {
NavigationView {
View1()
}
}
}
struct View1: View {
#EnvironmentObject var sceneState: SceneState
#State private var showView2: Bool = false
var body: some View {
VStack {
Text("NO nav bar.")
Button("Go to View2") {
self.showView2 = true
}
NavigationLink(destination: View2(), isActive: $showView2, label: {EmptyView()})
}
.navigationBarHidden(self.sceneState.isNavigationBarHidden)
.navigationBarTitle("")
.navigationBarBackButtonHidden(self.sceneState.isNavigationBarHidden)
}
}
struct View2: View {
#EnvironmentObject var sceneState: SceneState
var body: some View {
VStack {
Text("WITH nav bar.")
}
.navigationBarHidden(self.sceneState.isNavigationBarHidden)
.navigationBarTitle("WWDC")
.navigationBarBackButtonHidden(self.sceneState.isNavigationBarHidden)
.onAppear {
self.sceneState.isNavigationBarHidden = false
}
}
}
There ist actually a really simple solution to this problem. After many tries I figured it, that you have to add the .navigationBarHidden(false) directly to the destination view inside the NavigationLink like this:
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
Color.red.frame(maxWidth: .infinity, maxHeight: .infinity)
NavigationLink(destination: DestinationView()
.navigationBarHidden(false)) {
ZStack {
Color.green.frame(width: 200, height: 200)
Text("Tap me")
}
}
}
.navigationBarTitle("")
.navigationBarHidden(true)
}
}
}
struct DestinationView: View {
var body: some View {
List {
Text("1")
Text("2")
}
.navigationBarTitle("DestinationView")
.navigationBarHidden(false)
}
}
It will work like desired, and won't disappear after showing up.
I run this code on an iOS 14 Simulator and the navigation bar did not hide, so I assume this might be an issue with iOS 13. I had a similar problem and my code which resulted in nav bar disappearing on iOS 13.5 Simulator worked fine on iOS 14.4 Simulator.
I couldn't find any reference about any ways to make a pop or a dismiss programmatically of my presented view with SwiftUI.
Seems to me that the only way is to use the already integrated slide dow action for the modal(and what/how if I want to disable this feature?), and the back button for the navigation stack.
Does anyone know a solution?
Do you know if this is a bug or it will stays like this?
This example uses the new environment var documented in the Beta 5 Release Notes, which was using a value property. It was changed in a later beta to use a wrappedValue property. This example is now current for the GM version. This exact same concept works to dismiss Modal views presented with the .sheet modifier.
import SwiftUI
struct DetailView: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var body: some View {
Button(
"Here is Detail View. Tap to go back.",
action: { self.presentationMode.wrappedValue.dismiss() }
)
}
}
struct RootView: View {
var body: some View {
VStack {
NavigationLink(destination: DetailView())
{ Text("I am Root. Tap for Detail View.") }
}
}
}
struct ContentView: View {
var body: some View {
NavigationView {
RootView()
}
}
}
SwiftUI Xcode Beta 5
First, declare the #Environment which has a dismiss method which you can use anywhere to dismiss the view.
import SwiftUI
struct GameView: View {
#Environment(\.presentationMode) var presentation
var body: some View {
Button("Done") {
self.presentation.wrappedValue.dismiss()
}
}
}
iOS 15+
Starting from iOS 15 we can use a new #Environment(\.dismiss):
struct SheetView: View {
#Environment(\.dismiss) var dismiss
var body: some View {
NavigationView {
Text("Sheet")
.toolbar {
Button("Done") {
dismiss()
}
}
}
}
}
(There's no more need to use presentationMode.wrappedValue.dismiss().)
Useful links:
DismissAction
There is now a way to programmatically pop in a NavigationView, if you would like. This is in beta 5. Notice that you don't need the back button. You could programmatically trigger the showSelf property in the DetailView any way you like. And you don't have to display the "Push" text in the master. That could be an EmptyView(), thereby creating an invisible segue.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
MasterView()
}
}
}
struct MasterView: View {
#State private var showDetail = false
var body: some View {
VStack {
NavigationLink(destination: DetailView(showSelf: $showDetail), isActive: $showDetail) {
Text("Push")
}
}
}
}
struct DetailView: View {
#Binding var showSelf: Bool
var body: some View {
Button(action: {
self.showSelf = false
}) {
Text("Pop")
}
}
}
#if DEBUG
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#endif
I recently created an open source project called swiftui-navigation-stack (https://github.com/biobeats/swiftui-navigation-stack) that contains the NavigationStackView, an alternative navigation stack for SwiftUI. It offers several features described in the readme of the repo. For example, you can easily push and pop views programmatically. I'll show you how to do that with a simple example:
First of all embed your hierarchy in a NavigationStackVew:
struct RootView: View {
var body: some View {
NavigationStackView {
View1()
}
}
}
NavigationStackView gives your hierarchy access to a useful environment object called NavigationStack. You can use it to, for instance, pop views programmatically as asked in the question above:
struct View1: View {
var body: some View {
ZStack {
Color.yellow.edgesIgnoringSafeArea(.all)
VStack {
Text("VIEW 1")
Spacer()
PushView(destination: View2()) {
Text("PUSH TO VIEW 2")
}
}
}
}
}
struct View2: View {
#EnvironmentObject var navStack: NavigationStack
var body: some View {
ZStack {
Color.green.edgesIgnoringSafeArea(.all)
VStack {
Text("VIEW 2")
Spacer()
Button(action: {
self.navStack.pop()
}, label: {
Text("PROGRAMMATICALLY POP TO VIEW 1")
})
}
}
}
}
In this example I use the PushView to trigger the push navigation with a tap. Then, in the View2 I use the environment object to programmatically come back.
Here is the complete example:
import SwiftUI
import NavigationStack
struct RootView: View {
var body: some View {
NavigationStackView {
View1()
}
}
}
struct View1: View {
var body: some View {
ZStack {
Color.yellow.edgesIgnoringSafeArea(.all)
VStack {
Text("VIEW 1")
Spacer()
PushView(destination: View2()) {
Text("PUSH TO VIEW 2")
}
}
}
}
}
struct View2: View {
#EnvironmentObject var navStack: NavigationStack
var body: some View {
ZStack {
Color.green.edgesIgnoringSafeArea(.all)
VStack {
Text("VIEW 2")
Spacer()
Button(action: {
self.navStack.pop()
}, label: {
Text("PROGRAMMATICALLY POP TO VIEW 1")
})
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
RootView()
}
}
the result is:
Alternatively, if you don't want to do it programatically from a button, you can emit from the view model whenever you need to pop.
Subscribe to a #Published that changes the value whenever the saving is done.
struct ContentView: View {
#ObservedObject var viewModel: ContentViewModel
#Environment(\.presentationMode) var presentationMode
init(viewModel: ContentViewModel) {
self.viewModel = viewModel
}
var body: some View {
Form {
TextField("Name", text: $viewModel.name)
.textContentType(.name)
}
.onAppear {
self.viewModel.cancellable = self.viewModel
.$saved
.sink(receiveValue: { saved in
guard saved else { return }
self.presentationMode.wrappedValue.dismiss()
}
)
}
}
}
class ContentViewModel: ObservableObject {
#Published var saved = false // This can store any value.
#Published var name = ""
var cancellable: AnyCancellable? // You can use a cancellable set if you have multiple observers.
func onSave() {
// Do the save.
// Emit the new value.
saved = true
}
}
Please check Following Code it's so simple.
FirstView
struct StartUpVC: View {
#State var selection: Int? = nil
var body: some View {
NavigationView{
NavigationLink(destination: LoginView().hiddenNavigationBarStyle(), tag: 1, selection: $selection) {
Button(action: {
print("Signup tapped")
self.selection = 1
}) {
HStack {
Spacer()
Text("Sign up")
Spacer()
}
}
}
}
}
SecondView
struct LoginView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView{
Button(action: {
print("Login tapped")
self.presentationMode.wrappedValue.dismiss()
}) {
HStack {
Image("Back")
.resizable()
.frame(width: 20, height: 20)
.padding(.leading, 20)
}
}
}
}
}
You can try using a custom view and a Transition.
Here's a custom modal.
struct ModalView<Content>: View where Content: View {
#Binding var isShowing: Bool
var content: () -> Content
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .center) {
if (!self.isShowing) {
self.content()
}
if (self.isShowing) {
self.content()
.disabled(true)
.blur(radius: 3)
VStack {
Text("Modal")
}
.frame(width: geometry.size.width / 2,
height: geometry.size.height / 5)
.background(Color.secondary.colorInvert())
.foregroundColor(Color.primary)
.cornerRadius(20)
.transition(.moveAndFade) // associated transition to the modal view
}
}
}
}
}
I reused the Transition.moveAndFade from the Animation Views and Transition tutorial.
It is defined like this:
extension AnyTransition {
static var moveAndFade: AnyTransition {
let insertion = AnyTransition.move(edge: .trailing)
.combined(with: .opacity)
let removal = AnyTransition.scale()
.combined(with: .opacity)
return .asymmetric(insertion: insertion, removal: removal)
}
}
You can test it - in the simulator, not in the preview - like this:
struct ContentView: View {
#State var isShowingModal: Bool = false
func toggleModal() {
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
withAnimation {
self.isShowingModal = true
}
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
withAnimation {
self.isShowingModal = false
}
}
}
}
var body: some View {
ModalView(isShowing: $isShowingModal) {
NavigationView {
List(["1", "2", "3", "4", "5"].identified(by: \.self)) { row in
Text(row)
}.navigationBarTitle(Text("A List"), displayMode: .large)
}.onAppear { self.toggleModal() }
}
}
}
Thanks to that transition, you will see the modal sliding in from the trailing edge, and the it will zoom and fade out when it is dismissed.
The core concept of SwiftUI is to watch over the data flow.
You have to use a #State variable and mutate the value of this variable to control popping and dismissal.
struct MyView: View {
#State
var showsUp = false
var body: some View {
Button(action: { self.showsUp.toggle() }) {
Text("Pop")
}
.presentation(
showsUp ? Modal(
Button(action: { self.showsUp.toggle() }) {
Text("Dismiss")
}
) : nil
)
}
}
I experienced a compiler issue trying to call value on the presentationMode binding. Changing the property to wrappedValue fixed the issue for me. I'm assuming value -> wrappedValue is a language update. I think this note would be more appropriate as a comment on Chuck H's answer but don't have enough rep points to comment, I also suggested this change as and edit but my edit was rejected as being more appropriate as a comment or answer.
This will also dismiss the view
let scenes = UIApplication.shared.connectedScenes
let windowScene = scenes.first as? UIWindowScene
let window = windowScene?.windows.first
window?.rootViewController?.dismiss(animated: true, completion: {
print("dismissed")
})