@capgo/capacitor-native-navigation 8.0.15 → 8.0.17

package/ios/Sources/NativeNavigationPlugin/NativeNavigationPlugin.swift

@@ -44,9 +44,11 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
     private var tabBar: UITabBar?
     private var tabBarController: NativeNavigationTabController?
     private var tabViewControllers: [UIViewController] = []
+    private weak var systemTabRootContainer: UIView?
     private weak var originalWebViewSuperview: UIView?
     private var originalWebViewIndex: Int?
     private var originalWebViewAutoresizingMask: UIView.AutoresizingMask?
+    private var liftedWebViewOverlays: [NativeNavigationWeakView] = []
     private var isWebViewHostedInSystemTabController = false
     private var navbarHeight: CGFloat = 44
     private var tabbarHeight: CGFloat = 64
@@ -437,6 +439,13 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         notifyTabSelect(index: item.tag)
     }
 
+    public func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool {
+        if usesSystemLiquidGlass {
+            hostWebView(in: viewController)
+        }
+        return true
+    }
+
     public func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
         guard !suppressTabSelectEvent else {
             hostWebViewInSelectedSystemTab()
@@ -552,43 +561,108 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         controller.view.isHidden = !tabbarVisible
 
         if let parent = bridge?.viewController {
+            let containerView = systemTabHostingContainerView(in: parent)
             parent.addChild(controller)
-            insertSystemTabControllerView(controller.view, in: parent.view)
+            insertSystemTabControllerView(controller.view, in: containerView)
             controller.didMove(toParent: parent)
         }
 
         self.tabBarController = controller
         self.tabBar = controller.tabBar
+        liftWebViewOverlaysAboveSystemTabs()
         hostWebViewInSelectedSystemTab()
         return controller.tabBar
     }
 
+    private func systemTabHostingContainerView(in parent: UIViewController) -> UIView {
+        if let systemTabRootContainer = systemTabRootContainer {
+            return systemTabRootContainer
+        }
+
+        guard let webView = webView,
+              parent.view === webView else {
+            return parent.view
+        }
+
+        let previousSuperview = webView.superview
+        let previousIndex = previousSuperview?.subviews.firstIndex(of: webView)
+        let previousFrame = webView.frame
+        let previousAutoresizingMask = webView.autoresizingMask
+        let container = UIView(frame: previousFrame)
+        container.backgroundColor = nativeNavigationFallbackBackground(for: webView)
+        container.isOpaque = true
+        container.autoresizingMask = previousAutoresizingMask.isEmpty ? [.flexibleWidth, .flexibleHeight] : previousAutoresizingMask
+
+        if let previousSuperview = previousSuperview {
+            previousSuperview.insertSubview(container, at: min(previousIndex ?? previousSuperview.subviews.count, previousSuperview.subviews.count))
+        }
+
+        parent.view = container
+        container.addSubview(webView)
+        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        webView.frame = container.bounds
+        moveNativeChrome(from: webView, to: container)
+
+        systemTabRootContainer = container
+        originalWebViewSuperview = container
+        originalWebViewIndex = 0
+        originalWebViewAutoresizingMask = webView.autoresizingMask
+        liftWebViewOverlaysAboveSystemTabs()
+        return container
+    }
+
+    private func moveNativeChrome(from webView: UIView, to container: UIView) {
+        if let navContainer = navContainer,
+           navContainer.superview === webView {
+            container.addSubview(navContainer)
+        }
+    }
+
     private func applySystemTabBarItems(_ items: [UITabBarItem], selectedIndex: Int?, animated: Bool) {
         guard let tabBarController = tabBarController else {
             return
         }
 
         let previousSelectedIndex = tabBarController.selectedIndex
-        let controllers = items.map { item -> UIViewController in
-            let controller = NativeNavigationTabContentController()
-            controller.tabBarItem = item
-            return controller
-        }
+        let controllers = systemTabContentControllers(for: items)
+        let currentControllers = tabBarController.viewControllers ?? []
+        let shouldUpdateControllers = currentControllers.count != controllers.count
+            || zip(currentControllers, controllers).contains { currentController, nextController in
+                currentController !== nextController
+            }
         let shouldAnimate = animated && tabBarController.viewControllers?.count == controllers.count
 
         suppressTabSelectEvent = true
-        tabBarController.setViewControllers(controllers, animated: shouldAnimate)
+        if shouldUpdateControllers {
+            tabBarController.setViewControllers(controllers, animated: shouldAnimate)
+        }
         if !controllers.isEmpty {
             let fallbackIndex = selectedIndex ?? previousSelectedIndex
             let index = min(max(fallbackIndex, 0), controllers.count - 1)
+            hostWebView(in: controllers[index])
             tabBarController.selectedIndex = index
         }
-        hostWebViewInSelectedSystemTab()
         suppressTabSelectEvent = false
 
         tabViewControllers = controllers
     }
 
+    private func systemTabContentControllers(for items: [UITabBarItem]) -> [UIViewController] {
+        let existingControllers = tabViewControllers.compactMap { $0 as? NativeNavigationTabContentController }
+        if existingControllers.count == items.count {
+            zip(existingControllers, items).forEach { controller, item in
+                controller.tabBarItem = item
+            }
+            return existingControllers
+        }
+
+        return items.map { item -> UIViewController in
+            let controller = NativeNavigationTabContentController()
+            controller.tabBarItem = item
+            return controller
+        }
+    }
+
     private func setSystemTabBarHidden(_ hidden: Bool) {
         guard let tabBarController = tabBarController else {
             return
@@ -617,6 +691,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         tabBarController?.view.isHidden = false
         if usesSystemLiquidGlass {
             setSystemTabBarHidden(false)
+            liftWebViewOverlaysAboveSystemTabs()
             hostWebViewInSelectedSystemTab()
         } else {
             tabBar.isHidden = false
@@ -671,17 +746,53 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
     }
 
     private func hostWebViewInSelectedSystemTab() {
+        hostWebView(in: tabBarController?.selectedViewController)
+    }
+
+    private func hostWebView(in viewController: UIViewController?) {
         guard usesSystemLiquidGlass,
               let webView = webView,
-              let selectedController = tabBarController?.selectedViewController as? NativeNavigationTabContentController else {
+              let selectedController = viewController as? NativeNavigationTabContentController else {
             return
         }
 
+        liftWebViewOverlaysAboveSystemTabs()
         captureOriginalWebViewPlacementIfNeeded(webView)
-        clearHostedWebViews(matching: webView, except: selectedController)
-        selectedController.host(webView: webView)
+        clearHostedWebViews(matching: webView, except: selectedController, preservingSnapshots: true)
+        guard selectedController.host(webView: webView) else {
+            isWebViewHostedInSystemTabController = false
+            return
+        }
         clearHostedWebViews(matching: webView, except: selectedController)
         isWebViewHostedInSystemTabController = true
+        bringLiftedWebViewOverlaysToFront()
+    }
+
+    private func liftWebViewOverlaysAboveSystemTabs() {
+        guard usesSystemLiquidGlass,
+              let webView = webView,
+              let container = systemTabRootContainer else {
+            return
+        }
+
+        nativeNavigationLiftWebViewOverlaySubviews(
+            from: webView,
+            to: container,
+            tracking: &liftedWebViewOverlays,
+            excluding: [navContainer, tabContainer, tabBarController?.view]
+        )
+    }
+
+    private func bringLiftedWebViewOverlaysToFront() {
+        guard let container = systemTabRootContainer else {
+            return
+        }
+
+        liftedWebViewOverlays = liftedWebViewOverlays.filter { $0.value != nil }
+        liftedWebViewOverlays
+            .compactMap(\.value)
+            .filter { $0.superview === container }
+            .forEach { container.bringSubviewToFront($0) }
     }
 
     private func restoreWebViewFromSystemTabController() {
@@ -700,11 +811,15 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         isWebViewHostedInSystemTabController = false
     }
 
-    private func clearHostedWebViews(matching webView: UIView, except owner: NativeNavigationTabContentController? = nil) {
+    private func clearHostedWebViews(
+        matching webView: UIView,
+        except owner: NativeNavigationTabContentController? = nil,
+        preservingSnapshots: Bool = false
+    ) {
         tabViewControllers
             .compactMap { $0 as? NativeNavigationTabContentController }
             .filter { $0 !== owner }
-            .forEach { $0.clearHostedWebView(ifMatching: webView) }
+            .forEach { $0.clearHostedWebView(ifMatching: webView, preservingSnapshot: preservingSnapshots) }
     }
 
     private func makeBarButtonItems(_ rawItems: [[String: Any]], placement: String) -> [UIBarButtonItem] {
@@ -900,12 +1015,12 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
 
     private func transitionSnapshotView(from webView: UIView, sourceRect: CGRect?) -> UIView {
         guard let sourceRect = sourceRect else {
-            return webView.snapshotView(afterScreenUpdates: false) ?? UIView(frame: webView.frame)
+            return webView.snapshotView(afterScreenUpdates: false) ?? nativeNavigationSnapshotPlaceholder(for: webView)
         }
 
         let cropRect = sourceRect.intersection(webView.bounds)
         guard cropRect.width > 0, cropRect.height > 0 else {
-            return webView.snapshotView(afterScreenUpdates: false) ?? UIView(frame: webView.frame)
+            return webView.snapshotView(afterScreenUpdates: false) ?? nativeNavigationSnapshotPlaceholder(for: webView)
         }
 
         let renderer = UIGraphicsImageRenderer(bounds: webView.bounds)
@@ -921,7 +1036,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         ).integral
 
         guard let croppedImage = image.cgImage?.cropping(to: scaledCropRect) else {
-            return webView.snapshotView(afterScreenUpdates: false) ?? UIView(frame: webView.frame)
+            return webView.snapshotView(afterScreenUpdates: false) ?? nativeNavigationSnapshotPlaceholder(for: webView)
         }
 
         let imageView = UIImageView(image: UIImage(cgImage: croppedImage, scale: scale, orientation: image.imageOrientation))
@@ -1142,6 +1257,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
             if let navContainer = navContainer {
                 bridge?.viewController?.view.bringSubviewToFront(navContainer)
             }
+            bringLiftedWebViewOverlaysToFront()
             return
         }
 
@@ -1367,22 +1483,82 @@ private final class NativeNavigationBar: UINavigationBar {
     }
 }
 
-private final class NativeNavigationTabController: UITabBarController {
+final class NativeNavigationWeakView {
+    weak var value: UIView?
+
+    init(_ value: UIView) {
+        self.value = value
+    }
+}
+
+func nativeNavigationLiftWebViewOverlaySubviews(
+    from webView: UIView,
+    to container: UIView,
+    tracking liftedOverlays: inout [NativeNavigationWeakView],
+    excluding excludedViews: [UIView?] = []
+) {
+    webView.subviews
+        .filter { nativeNavigationShouldLiftWebViewOverlay($0, excluding: excludedViews) }
+        .forEach { overlay in
+            let frame = overlay.convert(overlay.bounds, to: container)
+            let hadParentConstraints = nativeNavigationDeactivateParentConstraints(in: webView, involving: overlay)
+            overlay.removeFromSuperview()
+            overlay.frame = frame
+            if hadParentConstraints {
+                overlay.translatesAutoresizingMaskIntoConstraints = true
+            }
+            overlay.autoresizingMask = overlay.autoresizingMask.isEmpty
+                ? [.flexibleWidth, .flexibleHeight]
+                : overlay.autoresizingMask
+            container.addSubview(overlay)
+            liftedOverlays.append(NativeNavigationWeakView(overlay))
+        }
+
+    liftedOverlays = liftedOverlays.filter { $0.value != nil }
+    liftedOverlays
+        .compactMap(\.value)
+        .filter { $0.superview === container }
+        .forEach { container.bringSubviewToFront($0) }
+}
+
+func nativeNavigationShouldLiftWebViewOverlay(_ view: UIView, excluding excludedViews: [UIView?] = []) -> Bool {
+    if excludedViews.contains(where: { $0 === view }) {
+        return false
+    }
+
+    if view is UIScrollView {
+        return false
+    }
+
+    let className = NSStringFromClass(type(of: view))
+    return !className.contains("WK")
+}
+
+private func nativeNavigationDeactivateParentConstraints(in parent: UIView, involving view: UIView) -> Bool {
+    let constraints = parent.constraints.filter { constraint in
+        constraint.firstItem === view || constraint.secondItem === view
+    }
+    NSLayoutConstraint.deactivate(constraints)
+    return !constraints.isEmpty
+}
+
+final class NativeNavigationTabController: UITabBarController {
     override func viewDidLoad() {
         super.viewDidLoad()
-        view.backgroundColor = .clear
-        view.isOpaque = false
+        view.backgroundColor = .systemBackground
+        view.isOpaque = true
         tabBar.isTranslucent = true
     }
 }
 
-private final class NativeNavigationTabContentController: UIViewController {
+final class NativeNavigationTabContentController: UIViewController {
     private weak var hostedWebView: UIView?
+    private var snapshotPlaceholder: UIView?
 
     override func loadView() {
         let view = UIView()
-        view.backgroundColor = .clear
-        view.isOpaque = false
+        view.backgroundColor = .systemBackground
+        view.isOpaque = true
         self.view = view
     }
 
@@ -1395,26 +1571,58 @@ private final class NativeNavigationTabContentController: UIViewController {
         hostedWebView?.frame = view.bounds
     }
 
-    func clearHostedWebView(ifMatching webView: UIView? = nil) {
+    func clearHostedWebView(ifMatching webView: UIView? = nil, preservingSnapshot: Bool = false) {
         guard webView == nil || hostedWebView === webView else {
             return
         }
+
+        if preservingSnapshot, let hostedWebView = hostedWebView, hostedWebView.superview === view {
+            let placeholder = hostedWebView.snapshotView(afterScreenUpdates: false) ?? nativeNavigationSnapshotPlaceholder(for: hostedWebView)
+            placeholder.frame = hostedWebView.frame
+            placeholder.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+            snapshotPlaceholder?.removeFromSuperview()
+            view.insertSubview(placeholder, belowSubview: hostedWebView)
+            snapshotPlaceholder = placeholder
+        }
+
         hostedWebView = nil
     }
 
-    func host(webView: UIView) {
-        if hostedWebView !== webView {
-            hostedWebView = webView
+    @discardableResult
+    func host(webView: UIView) -> Bool {
+        guard view !== webView, !view.isDescendant(of: webView) else {
+            hostedWebView = nil
+            return false
         }
+
+        snapshotPlaceholder?.removeFromSuperview()
+        snapshotPlaceholder = nil
+        hostedWebView = webView
         if webView.superview !== view {
             webView.removeFromSuperview()
             view.addSubview(webView)
         }
         webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
         webView.frame = view.bounds
+        return true
     }
 }
 
+private func nativeNavigationFallbackBackground(for view: UIView) -> UIColor {
+    if let color = view.backgroundColor,
+       color.cgColor.alpha > 0 {
+        return color
+    }
+    return .systemBackground
+}
+
+private func nativeNavigationSnapshotPlaceholder(for view: UIView) -> UIView {
+    let placeholder = UIView(frame: view.frame)
+    placeholder.backgroundColor = nativeNavigationFallbackBackground(for: view)
+    placeholder.isOpaque = true
+    return placeholder
+}
+
 private final class SVGIconRenderer: NSObject, XMLParserDelegate {
     private let context: CGContext
     private var styleStack = [SVGRenderStyle()]

package/ios/Tests/NativeNavigationPluginTests/NativeNavigationTests.swift

@@ -1,19 +1,92 @@
 import XCTest
+import UIKit
 @testable import NativeNavigationPlugin
 
 class NativeNavigationTests: XCTestCase {
-    func testEcho() {
-        let implementation = NativeNavigation()
-        let value = "Hello, World!"
-        let result = implementation.echo(value)
-
-        XCTAssertEqual(value, result)
-    }
-
     func testGetPluginVersion() {
         let implementation = NativeNavigation()
         let result = implementation.getPluginVersion()
 
         XCTAssertEqual("native", result)
     }
+
+    func testTabContentControllerHostsWebView() {
+        let webView = UIView()
+        let originalContainer = UIView()
+        let controller = NativeNavigationTabContentController()
+        _ = controller.view
+
+        originalContainer.addSubview(webView)
+
+        XCTAssertTrue(controller.host(webView: webView))
+        XCTAssertEqual(webView.superview, controller.view)
+        XCTAssertEqual(webView.frame, controller.view.bounds)
+    }
+
+    func testTabContentControllerKeepsSnapshotPlaceholderWhenWebViewMoves() {
+        let webView = UIView()
+        let firstController = NativeNavigationTabContentController()
+        let secondController = NativeNavigationTabContentController()
+        _ = firstController.view
+        _ = secondController.view
+
+        firstController.view.frame = CGRect(x: 0, y: 0, width: 320, height: 480)
+        secondController.view.frame = CGRect(x: 0, y: 0, width: 320, height: 480)
+        webView.backgroundColor = .systemBackground
+
+        XCTAssertTrue(firstController.host(webView: webView))
+        XCTAssertEqual(firstController.view.subviews.count, 1)
+
+        firstController.clearHostedWebView(ifMatching: webView, preservingSnapshot: true)
+        XCTAssertEqual(firstController.view.subviews.count, 2)
+
+        XCTAssertTrue(secondController.host(webView: webView))
+        XCTAssertEqual(webView.superview, secondController.view)
+        XCTAssertEqual(firstController.view.subviews.count, 1)
+        XCTAssertFalse(firstController.view.subviews.contains(webView))
+
+        XCTAssertTrue(firstController.host(webView: webView))
+        XCTAssertEqual(webView.superview, firstController.view)
+        XCTAssertEqual(firstController.view.subviews.count, 1)
+        XCTAssertTrue(firstController.view.subviews.first === webView)
+    }
+
+    func testLiftWebViewOverlaySubviewsMovesSplashOverlayAboveContainerContent() {
+        let webView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))
+        let container = UIView(frame: webView.frame)
+        let tabControllerView = UIView(frame: webView.frame)
+        let scrollView = UIScrollView(frame: webView.bounds)
+        let splashOverlay = UIView(frame: webView.bounds)
+        var liftedOverlays: [NativeNavigationWeakView] = []
+
+        container.addSubview(webView)
+        container.addSubview(tabControllerView)
+        webView.addSubview(scrollView)
+        webView.addSubview(splashOverlay)
+
+        nativeNavigationLiftWebViewOverlaySubviews(
+            from: webView,
+            to: container,
+            tracking: &liftedOverlays,
+            excluding: [tabControllerView]
+        )
+
+        XCTAssertEqual(scrollView.superview, webView)
+        XCTAssertEqual(splashOverlay.superview, container)
+        XCTAssertTrue(container.subviews.last === splashOverlay)
+        XCTAssertEqual(liftedOverlays.count, 1)
+        XCTAssertTrue(liftedOverlays.first?.value === splashOverlay)
+    }
+
+    func testTabContentControllerRejectsLayerCycle() {
+        let webView = UIView()
+        let controller = NativeNavigationTabContentController()
+        _ = controller.view
+
+        webView.addSubview(controller.view)
+
+        XCTAssertFalse(controller.host(webView: webView))
+        XCTAssertNil(webView.superview)
+        XCTAssertEqual(controller.view.superview, webView)
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capgo/capacitor-native-navigation",
-  "version": "8.0.15",
+  "version": "8.0.17",
   "description": "Capacitor plugin for native navbar, tabbar, and route transition chrome over a WebView.",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",
@@ -26,6 +26,9 @@
     "url": "https://github.com/Cap-go/capacitor-native-navigation/issues"
   },
   "homepage": "https://capgo.app/docs/plugins/native-navigation/",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "keywords": [
     "capacitor",
     "native-navigation",