Skip to main content
.ignoresSafeArea(regions?: SafeAreaRegions, edges?: EdgeSet): Component
​
regions
SafeAreaRegions
Which safe area regions to ignore. One of "container", "keyboard", or "all". Defaults to "all".
​
edges
EdgeSet
Which edges to extend into. See Edge. Defaults to "all".

​
Support

​
Usage

​
Ignoring all safe areas

Color("blue").ignoresSafeArea("all", "all")

​
Background that extends behind the status bar

ZStack([
    Color("indigo").ignoresSafeArea(),
    VStack([
        Text("Content")
            .foregroundStyle(Color("white"))
    ])
])

​
Ignoring only the keyboard safe area

VStack([
    TextField({ text: value, setText: setValue })
]).ignoresSafeArea("keyboard")

​
Extending into specific edges

Image({ url: "hero.jpg" })
    .resizable()
    .scaledToFill()
    .ignoresSafeArea("container", "top")

​
Notes

  • On devices with notches or home indicators, content normally avoids the safe area insets. This modifier lets components extend into those regions.
  • Common use cases include full-bleed background colors, hero images that extend behind the status bar, and input views that should not shift when the keyboard appears.

​
See Also

  • safeAreaInset — adds content to the safe area, pushing main content inward