How to make full screen TabView in SwiftUI

Issue #507

View extends to the bottom, but not to the notch. We need to add .edgesIgnoringSafeArea(.top) to our TabView to tell TabView to extend all the way to the top.

Note that if we use edgesIgnoringSafeArea(.all) then TabView ‘s bar will be dragged very down and broken.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
struct MainScreen: View {
init() {
UITabBar.appearance().backgroundColor = R.color.barBackground
UITableView.appearance().backgroundColor = .clear
UITableViewCell.appearance().backgroundColor = .clear
UITableView.appearance().tableFooterView = UIView()
}

var body: some View {
ZStack {
R.color.background
.edgesIgnoringSafeArea(.all)

TabView {
PersonalScreen()
.tabItem({
Image(sfSymbol: .bagFill)
Text("Personal")
.styleTabBarItem()
})
CloudScreen()
.tabItem({
Image(sfSymbol: .cloudFill)
Text("Cloud")
.styleTabBarItem()
})
SettingsScreen()
.tabItem({
Image(sfSymbol: .gear)
Text("Settings")
.styleTabBarItem()
})
}
.edgesIgnoringSafeArea(.top)
}
}
}

Comments