SwiftUI/UIKit - Make Navigation Bar Buttons and Text Stand Out

Question

In the app I'm currently working on I have a view that displays an associated image at the top. I currently have the image set to ignore the safe area at the top of the screen because I think it gives the app a more modern look. The problem is that all of the buttons or text that are in the navigation bar are unreadable depending on which image is being displayed. Is there a way to give the text shadow or a semitransparent background to make it stand out from the image? Or perhaps is there another design I could be pursuing that also looks very modern and avoids these problems?

I've experimented with changing appearances in the UINavigationBarAppearance and UIBarButtonItemAppearance with no success. I've been able to change text colors but nothing else so far.

Here is an example of my problem:

Here are a couple examples of what I'm hoping to do (I apologize for the bad quality):

I know I can style any button I add to the navigation bar manually, so I'm mostly wanting to make sure the back button is visible no matter which image is selected. I could possibly go the route of hiding the back button in the navigation bar and adding my own button but I'm not really wanting to lose the swipe gesture to go back to the previous screen.

Answer 1

Just remove the default back button with navigationBarBackButtonHidden and replace it with your own design by adding to the toolbar.

Here I have created something similar to one of the designs in the screenshot. The button has a material background.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink("Navigate") {
                AnotherView()
            }
        }
    }
}

struct AnotherView: View {
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        Image("your image here...")
            .resizable()
            .scaledToFill()
            .ignoresSafeArea()
            .navigationBarBackButtonHidden()
            .toolbar {
                // back button
                ToolbarItem(placement: .topBarLeading) {
                    Button {
                        dismiss()
                    } label: {
                        Image(systemName: "arrow.backward")
                            .foregroundStyle(.black)
                            .padding(7)
                            .background(.regularMaterial, in: Circle())
                    }
                }
                // as an additional example, here is a button with a title
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                        // do something else
                    } label: {
                        Text("Press Me!")
                            .foregroundStyle(.black)
                            .padding(.vertical, 7)
                            .padding(.horizontal, 10)
                            .background(.regularMaterial, in: Capsule())
                    }
                }
            }
    }
}

Output: (I used my profile picture as the background because I don't have any better images)