Skip to main content
.ignoresSafeArea(regions?: SafeAreaRegions, edges?: EdgeSet): Component;

​
Parameters

​
regions
SafeAreaRegions
The safe area regions to ignore.
​
edges
EdgeSet
The edges where safe area should be ignored.

​
Support

​
Usage

​
Ignore all safe areas

Image("background.jpg")
    .ignoresSafeArea()

​
Ignore specific edges

Rectangle()
    .fill(Color("blue"))
    .ignoresSafeArea("all", "top")

​
Ignore keyboard safe area

const [message, setMessage] = useState("")

VStack([
    Spacer(),
    TextField({ placeholder: "Enter message", text: message, setText: setMessage }),
    Button("Send", () => {})
]).ignoresSafeArea("keyboard")

​
Full screen background

ZStack([
    // Background ignores all safe areas
    LinearGradient({
        colors: [Color("purple"), Color("pink")],
        startPoint: "topLeading", 
        endPoint: "bottomTrailing"
    }).ignoresSafeArea(),
    
    // Content respects safe areas
    VStack([
        Text("Title"),
        Text("Content")
    ])
])

​
Ignore multiple edges

ScrollView([
    Text("Content that extends to screen edges")
]).ignoresSafeArea("container", ["leading", "trailing"])

​
Header that extends to top

VStack([
    // Header extends under status bar
    Rectangle()
        .fill(Color("blue"))
        .frame(height: 100)
        .ignoresSafeArea("container", "top"),
        
    // Body content respects safe area
    Text("Main content")
])