I’m working on a Hotwire Native iOS app, and I wanted the app to have that slick new Liquid Glass tab bar, which means that is is completely transparent and the content flows under and below the bottom tab bar. Here’s how I updated my existing tab bar to have the modern Liquid Glass UI look. This will most likely work on all iOS projects but I know this works in Hotwire Native…
Apple’s UITabBarAppearance API makes this surprisingly straightforward. Here’s how we implemented it in my TabBarController:
private func setupTabBarAppearance() {
// Add blur effect
appearance.backgroundEffect = UIBlurEffect(style: .systemMaterial)
// Configure icon and text colors
appearance.stackedLayoutAppearance.normal.iconColor = .systemGray
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
.foregroundColor: UIColor.systemGray
]
appearance.stackedLayoutAppearance.selected.iconColor = .label
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
.foregroundColor: UIColor.label
]
tabBar.standardAppearance = appearance
tabBar.scrollEdgeAppearance = appearance
}Notes etc…
Transparent Background: appearance.configureWithTransparentBackground() This removes the default opaque (normally black or white bar at the bottom of the app screen) background, setting the stage for the rest of the liquid glass effect.
The Liquid Glass Effect: appearance.backgroundEffect = UIBlurEffect(style: .systemMaterial) This single line is where the magic happens. UIBlurEffect with .systemMaterial creates that signature frosted glass look. The blur adapts automatically to light and dark mode!
Adaptive Colors: appearance.stackedLayoutAppearance.normal.iconColor = .systemGray appearance.stackedLayoutAppearance.selected.iconColor = .label We use system colors (.systemGray and .label) so our icons and text automatically adjust to the user’s appearance settings.
Apply to Both States: tabBar.standardAppearance = appearance tabBar.scrollEdgeAppearance = appearance
Setting both standardAppearance and scrollEdgeAppearance ensures the glass effect stays consistent when content scrolls behind the tab bar. The tab bar now has the translucent effect where you can see content blurring through it. It feels native, modern, and automatically supports both light and dark mode. Why This Matters for Hotwire Native Apps When building hybrid apps with Hotwire Native, small touches like this make a huge difference in perceived quality. Users shouldn’t be able to tell your app is web-based — these native UI flourishes help bridge that gap. The best part? This is pure UIKit, so it works seamlessly with Hotwire Native’s web view controllers. No conflicts, no complexity — just beautiful, native iOS design.
