Safe Area Insets

I am working on an app that needs to fit in the safe area. I am currently using UIScreen.main.bounds.size.height and width to size everything in my view, but these seem to ignore the safe area insets, which results in my view being obstructed by other things in the safe area of the device running my app. How can I set a variable to equal the top safe area inset and another variable to equal the bottom safe area inset in order to fix my problem? Please help me, I’ve been looking forever to find an answer, and I can’t find one

Answered by BabyJ in 719351022

I'm assuming you're using SwiftUI since that's what you tagged the question with. If so, your views should automatically be placed to fit in the safe area. Using the ignoresSafeArea(_:edges:) modifier, well, ignores the safe area, so expanding to fill the whole screen.


If you want your views to fill the entire space inside of the safe area, you can use a frame modifier like this:

.frame(maxWidth: .infinity, maxHeight: .infinity)


If you explicitly want the top and bottom safe area inset values, then you can wrap your view in a GeometryReader and access the values like this:

GeometryReader { geoProxy in
    let topInset = geoProxy.safeAreaInsets.top
    let bottomInset = geoProxy.safeAreaInsets.bottom
    ...
}

Why don't you use constraints, set to match the safe area ?

Accepted Answer

I'm assuming you're using SwiftUI since that's what you tagged the question with. If so, your views should automatically be placed to fit in the safe area. Using the ignoresSafeArea(_:edges:) modifier, well, ignores the safe area, so expanding to fill the whole screen.


If you want your views to fill the entire space inside of the safe area, you can use a frame modifier like this:

.frame(maxWidth: .infinity, maxHeight: .infinity)


If you explicitly want the top and bottom safe area inset values, then you can wrap your view in a GeometryReader and access the values like this:

GeometryReader { geoProxy in
    let topInset = geoProxy.safeAreaInsets.top
    let bottomInset = geoProxy.safeAreaInsets.bottom
    ...
}

I used that and it didn’t work

It didn't work

does not provide much useful information. What do you get ? What did you expect ?

Safe Area Insets
 
 
Q