As the title already says I'm trying to make a view fullscreen (make it extend over the SafeArea
), but SwiftUI
seems to always align views to the safeArea
.
After researching this for a while I found .edgesIgnoringSafeArea(.all)
which seems like a pretty straightforward way to do it. The problem is that it doesn't work. The view still isn't full screen. Here is some example code:
struct ContentView : View {
var body: some View {
Text("Test")
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.edgesIgnoringSafeArea(.all)
.background(Color.red)
}
}
How to present a full screen modal view using fullScreenCover() SwiftUI's fullScreenCover() modifier gives us a presentation style for times when you want to cover as much of the screen as possible, and in code it works almost identically to regular sheets.
By default SwiftUI's views take up only as much space as they need, but if you want that to change you can use a frame() modifier to tell SwiftUI what kind of size range you want to have. Note: if you want a view to go under the safe area, make sure you add the ignoresSafeArea() modifier.
To make the VStack the width of the actual screen you can use UIScreen. main. bounds.
Just swap the ..background(Color.red) and .edgesIgnoringSafeArea(.all). And it will work perfectly.
struct ContentView : View {
var body: some View {
Text("Test")
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.background(Color.red)
.edgesIgnoringSafeArea(.all)
}
}
According to Apple documentation from iOS 14 you can use fullScreenCover(item:onDismiss:content:)
And here is sample code:
struct ContentView: View {
@State private var isFullScreen = false
var body: some View {
ZStack{
Color.yellow.edgesIgnoringSafeArea(.all)
Text("Hello, FullScreen!")
.padding()
.background(Color.blue)
.foregroundColor(.green)
.cornerRadius(8)
.fullScreenCover(isPresented: $isFullScreen) {
FullScreen(isFullScreen: $isFullScreen)
}
.onTapGesture {
isFullScreen.toggle()
}
}
}
}
struct FullScreen: View {
@Binding var isFullScreen: Bool
var body: some View {
ZStack {
Color.red.edgesIgnoringSafeArea(.all)
Text("This is full screen!!")
.onTapGesture {
self.isFullScreen.toggle()
}
}
}
}
The Augmented Reality App with SwiftUI also has a problem in entering full screen. (Xcode 12.3, SwiftUI 5.3)
struct ContentView : View {
var body: some View {
return ARViewContainer().edgesIgnoringSafeArea(.all)
}
}
The code above is from the AR template. However, it doesn't work.
The solution is tricky: you have to set "LaunchScreen.storyboard" as "Launch Screen File" in "[yourTarget] -> General -> App Icons and Launch Images". If there is no "LaunchScreen.storyboard" in the project, it can still work by entering "LaunchScreen" in that field.
I found a similar discussion on Apple forum that explains the potential reason of failure:
If that isn't set properly, then it sounds like your app is launching into a compatibility mode which is letterboxing your app.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With