Joe Masilotti

Opaque navigation and tab bars in Hotwire Native – iOS

iOS uses transparent native elements by default. Which means that a Hotwire Native app will render web content “through” the top bar (navigation bar) and bottom bar (tab bar).

This might not be apparent until your web content fill the screen, as shown in the screenshot on the right. But when it occurs it can look quite jarring!

Lucky for us the fix is quick. Add the following to AppDelegate.swift:

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions:
        [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        UINavigationBar.appearance().scrollEdgeAppearance = .init()
        UITabBar.appearance().scrollEdgeAppearance = .init()

        return true
    }

This sets an opaque navigation bar and tab bar, ensuring the web content won’t render through. When implemented, you’ll also get a nice light gray background on both bars. Which, personally, I think looks even better.

Read next