TabBar Problem

[jake-short]

TabBar Problem

[sebastinto]

Just wanted to thank you again! I managed to make it work and learned a lot in the process!

[Jake-Short]

Hey there, this is most likely due to an issue due of where you place the image viewer. The image viewer is made to be an overlay for the view that it is placed on.

The following code reproduces the issue you are having, where the image viewer does not cover the tab bar:

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Hey")
                .tabItem {
                    Image(systemName: "list.dash")
                    Text("Menu")
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .overlay(ImageViewer(image: .constant(Image(uiImage: UIImage(named: "test.jpg")!)), viewerShown: .constant(true)))
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

In contrast, this code produces the desired result of the image viewer being above the tab bar:

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Hey")
                .tabItem {
                    Image(systemName: "list.dash")
                    Text("Menu")
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(ImageViewer(image: .constant(Image(uiImage: UIImage(named: "test.jpg")!)), viewerShown: .constant(true)))
    }
}

Placing the image viewer on the TabView will fix your issue!

[halilyuce]

Thanks for your reply, yeah I know but ImageViewer is not at the same view with tabBar :) I'm gonna place imageViewer at first view and I will trigger it with an observed object, it will work I think. Thanks anyway :)

-- Edit :
It's working well now but now I have a sheet issue :) How can I use it above sheet ? @Jake-Short

[sebastinto]

Hello!

Thanks for making this project open source. Works great and very easy to use even for a newb like myself.

I have a question related to positioning. I thought I would ask here instead of creating a new issue as it is related.

Here is my struct:

struct ContentView: View {
    var body: some View {
        ScrollView {
            // More Views
        }
        .overlay(ImageViewer(image: .constant(Image(uiImage: UIImage(named: "test.jpg")!)), viewerShown: .constant(true)))
        .edgesIgnoringSafeArea(.all)
        .navigationBarTitle("Navigation Bar Title")
        .navigationBarItems(leading:trailing:) 
    }
}

The problem is that the navigation bar item(s) and back button are in front of the overlay. Instead, I'd like the overlay to be in front of and block them. How could I achieve this?

Thanks!

[Jake-Short]

@OEssHRERLr770rGGLOH0 Hey! (If you want to, you may skip to the solution below.)

Effect of SwiftUI on functionality

There are a couple of things regarding the way that SwiftUI is built that makes the image viewer act in this way. First, the .overlay modifier only applies to the view that it is being applied to. In the example you provided, it appears that that particular screen is a child of a NavigationView. Therefore, the NavigationView elements (title, buttons, etc.) are all above the overlay, since the overlay is on a child of said NavigationView.

This package is built mainly using, and intended for, SwiftUI. To present a view that would be above all elements no matter their position in the parent/child hierarchy would require a fallback into UIKit, which is currently undesired.

Solution

The way to solve this is to place the .overlay on the NavigationView. You can have the image/viewerShown state variables stored in the root view (where your NavigationView is) and pass it to the children using binding.

[sebastinto]

Effect of SwiftUI on functionality

There are a couple of things regarding the way that SwiftUI is built that makes the image viewer act in this way. First, the .overlay modifier only applies to the view that it is being applied to. In the example you provided, it appears that that particular screen is a child of a NavigationView. Therefore, the NavigationView elements (title, buttons, etc.) are all above the overlay, since the overlay is on a child of said NavigationView.

Make sense. And yes it is a child of a NavigationView.

(If you want to, you may skip to the solution below.)

I had somehow overlooked the relationship between Navigation View and children so I'm grateful for your explanation as it clarifies the behavior of the Navigation Bar. 👍

This package is built mainly using, and intended for, SwiftUI. To present a view that would be above all elements no matter their position in the parent/child hierarchy would require a fallback into UIKit, which is currently undesired.

Completely understandable.

Solution

The way to solve this is to place the .overlay on the NavigationView. You can have the image/viewerShown state variables stored in the root view (where your NavigationView is) and pass it to the children using binding.

Sounds like something I should be able to implement. Thanks so much for the help!

[Jake-Short]

No problem! I'm glad you got it fixed :)