Get SafeArea & TabBar Sizes in SwiftUI

Moussa Hellal
2 min readJun 11, 2023

Understanding and effectively utilizing the safe area and tab bar sizes is essential when developing iOS apps with SwiftUI in order to produce aesthetically pleasing and useful user experiences.

The safe area makes sure that even on devices with notches or home indicator areas, the content is still viewable and properly aligned.

On the other hand, our app’s tab bar offers a dependable navigation and content organizing structure. In this tutorial, we’ll examine how to get SwiftUI’s safe area and tab bar sizes that can help build responsive and engaging user interfaces.

I build a one screen App for you to check for yourself the sizes.

For PROJECT LINK, please scroll to the end of the article; You will find the github Link

No worries.

The Code is here, For simplicity sake I have Added all the needed extensions in one file;

Usage? Simply:

//SAFE AREA
let safeTopAreaSize = safeAreaInsets.top
let safeBottomAreaSize = safeAreaInsets.bottom
let safeLeadingAreaSize = safeAreaInsets.leading
let safeTrailingAreaSize = safeAreaInsets.trailing
//TAB BAR
let tabBarHeightSize = UITabBarController().height
let tabBarWidthSize = UITabBarController().width

Project Link:

https://github.com/MoussaHellal/SafeAreaTabBarSwiftUI

I appreciate you choosing to spend some of your day with me. I hope that my piece was informative and helpful to you.

Farewell, keep growing and learning. See you in the next one. ✌️

Make sure to follow me on Twitter to keep receiving the newest articles:

https://twitter.com/mosesCodeOs

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Responses (1)

Write a response

It does not work at all when rotating to landscape, continuing showing 49. When I introspect the UITabView from TabView tab bar heights are 83 for portrait (-34 safe area = 49) and 53 for landscape (-21 safe area = 32 effective content height).
Your…

--