Camera view hides TabView - ios

Question

I've implemented a simple camera view:
import SwiftUI
import AVFoundation
struct CameraView: View {
#StateObject var model = CameraModel()
var body: some View {
CameraPreview(camera: model).ignoresSafeArea().onAppear() {
model.check()
}
}
}
struct CameraPreview: UIViewRepresentable {
#ObservedObject var camera: CameraModel
func makeUIView(context: Context) -> some UIView {
let view = UIView(frame: UIScreen.main.bounds)
camera.preview = AVCaptureVideoPreviewLayer(session: camera.session)
camera.preview.frame = view.frame
camera.preview.videoGravity = AVLayerVideoGravity.resizeAspectFill
view.layer.addSublayer(camera.preview)
camera.session.startRunning()
return view
}
func updateUIView(_ uiView: UIViewType, context: Context) {
}
}
struct CameraView_Previews: PreviewProvider {
static var previews: some View {
CameraView()
}
}
class CameraModel: ObservableObject {
#Published var session = AVCaptureSession()
#Published var alert = false
#Published var preview: AVCaptureVideoPreviewLayer!
func check() {
switch AVCaptureDevice.authorizationStatus(for: .video) {
case .authorized:
setUp()
break
case .notDetermined:
AVCaptureDevice.requestAccess(for: .video) { (status) in
if status {
self.setUp()
}
}
break
case .denied:
self.alert.toggle()
break
default:
break
}
}
func setUp() {
do {
self.session.beginConfiguration()
let device = AVCaptureDevice.default(.builtInDualCamera, for: .video, position: .back)
let input = try AVCaptureDeviceInput(device: device!)
if self.session.canAddInput(input) {
self.session.addInput(input)
}
self.session.commitConfiguration()
}
catch {
print(error.localizedDescription)
}
}
}
And show it as a tab in TabView (root layer):
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
HomeView()
.tabItem {
Image("HomeIcon").renderingMode(.template)
Text("Home")
}
CameraView()
.tabItem {
Image("MapMarkerRadiusIcon").renderingMode(.template)
Text("Camera")
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Unfortunately, CameraView() overlays the bottom tab bar:
Looks okay? Unfortunately, no... It shows unselected icons when I am making a screenshot or going to hide app. When app is just launched and Camera tab is opened, it looks as below:
How to fix this bug? I need to the tab bar was on the top always (like on the first screenshot)

Answer 1

If you want to see all tabs over camera view, there is only one workaround but it doesn't match what you showed in your first screenshot excatly.
To see all tabs, just add safeAreaInset(edge:alignment:spacing:_:) modifier right below CameraPreview(camera: model) and set ignoresSafeArea to .top.
Here is the complete sample code:
CameraPreview(camera: model)
.safeAreaInset(edge: .bottom, alignment: .center, spacing: 0) {
Color.clear
.frame(height: 0)
.background(Material.bar)
}
.ignoresSafeArea(.all, edges: .top)
The result:
Hope it will save you.