iOS 15 tab bar transparent after scrolling to the bottom

Question

How to fix iOS 15 tab bar transparent after scrolling to the bottom:

Answer 1

In iOS 15, UIKit has extended the usage of the scrollEdgeAppearance, which by default produces a transparent background.

Since I changed the tab bar color globally in my app, prior to iOS 15, I have added the following code to my AppDelegate:

UITabBar.appearance().barTintColor = "YOUR UITABBAR COLOR"
UITabBar.appearance().tintColor = "YOUR ICONS COLOR"
UITabBar.appearance().isTranslucent = true

To restore the old look, I had adopt the new UITBar appearance APIs, UITabBarAppearance. I changed my code to:

    UITabBar.appearance().barTintColor = "YOUR UITABBAR COLOR"
    UITabBar.appearance().tintColor = "YOUR ICONS COLOR"
    UITabBar.appearance().isTranslucent = true

    if #available(iOS 15.0, *) {
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = "YOUR UITABBAR COLOR"
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = UITabBar.appearance().standardAppearance
    }

As a result, I get the original color of my UITabBar

Answer 2

With iOS 15, Apple adds the scrollEdgeAppearance property for configuring the appearance of the tab bar while edge scrolling.

https://developer.apple.com/documentation/uikit/uitabbar/3750912-scrolledgeappearance?changes=latest_minor

To fix the transparent tab bar, you should create a custom scroll edge appearance and set it to the tab bar.

if #available(iOS 15.0, *) {
   let appearance = UITabBarAppearance()
   appearance.backgroundEffect = UIBlurEffect(style: .light)
   tabBar.scrollEdgeAppearance = appearance
}

Result:

Answer 3

init() {
    if #available(iOS 15, *) {
        let tabBarAppearance: UITabBarAppearance = UITabBarAppearance()
           tabBarAppearance.configureWithOpaqueBackground()
            UITabBar.appearance().standardAppearance = tabBarAppearance
            UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
    }
}