TabView is transparent on iOS 15 SwiftUI | Change Tab View Bar Color SwiftUI

I was working in TabView I found a problem when you want to use NavigationLink to navigate to a subview, and return to original TabView, as you can see from this example hide TabView background color and The text is overlap on the tabview. How to fix this problem?

Below is our example code.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            TabView {
                Text("Home Tab")
                    .tabItem {
                        Text("House")
                        Image(systemName: "house.fill")
                            .font(.system(size: 50, weight: .bold, design: .rounded))
                    }
                SecondView()
                    .tabItem {
                        Text("Star")
                        Image(systemName: "star.fill")
                    }
            }.font(.headline)
            .accentColor(.red)
        }
    }
}



struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}




// Mark:- FirstView
struct FirstView: View {
    var body: some View {
            List(1...60, id: \.self) { index in
                NavigationLink(
                    destination: Text("Item #\(index) Details"),
                    label: {
                        Text("AppCodeZip@\(index)")
                            .font(.system(size: 20, weight: .bold, design: .rounded))
                    })
            }.navigationBarTitle("AppCodeZip", displayMode: .inline)
        }
}




// Mark:- SecondView
struct SecondView: View {
    var body: some View {
       
            VStack{
                Divider()
                NavigationLink("Go to the Other View", destination: FirstView())
                Divider()
                List(1...50, id: \.self) { index in
                    NavigationLink(
                        destination: Text("Item #\(index) Details"),
                        label: {
                            Text("AppCodeZip@\(index)")
                                .font(.system(size: 20, weight: .bold, design: .rounded))
                        })
                }
            }
        
        .navigationBarTitle("Item List", displayMode: .inline)
    }
}

Fixing this issue-

In the app I was fixing, I needed the to do these two if #available to fix the tabBar on both iOS 15 and prior versions when built with Xcode 13. It is possible that for your app, only setting all these properties for iOS 15 will work fine.

Disable new iOS 15's transparent TabView use below code


import SwiftUI

struct ContentView: View {
    
    init(){
        let apparence = UITabBarAppearance()
        apparence.configureWithOpaqueBackground()
        if #available(iOS 15.0, *) {
            UITabBar.appearance().scrollEdgeAppearance = apparence
        }
    }
    
    var body: some View {
        
        NavigationView {
            TabView {
                Text("Home Tab")
                    .tabItem {
                        Text("House")
                        Image(systemName: "house.fill")
                            .font(.system(size: 50, weight: .bold, design: .rounded))
                    }
                SecondView()
                    .tabItem {
                        Text("Star")
                        Image(systemName: "star.fill")
                    }
            }.font(.headline)
                .accentColor(.red)
        }
    }
}



struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}