@capgo/capacitor-native-navigation 8.1.0 → 8.1.1

package/android/src/main/java/app/capgo/nativenavigation/NativeNavigationPlugin.java

@@ -112,6 +112,8 @@ public class NativeNavigationPlugin extends Plugin {
     private String activeTransitionDirection = "forward";
     private RectF activeZoomSourceFrame;
     private float activeZoomCornerRadius = 0f;
+    private Drawable activeTransitionRootBackground;
+    private boolean activeTransitionRootBackgroundCaptured = false;
     private final Map<Integer, String> menuActionIds = new HashMap<>();
     private final Map<Integer, String> menuActionTitles = new HashMap<>();
     private final Map<Integer, String> menuActionPlacements = new HashMap<>();
@@ -338,8 +340,11 @@ public class NativeNavigationPlugin extends Plugin {
 
             if (transitionSnapshot != null) {
                 root.removeView(transitionSnapshot);
+                restoreTransitionRootBackground();
             }
 
+            int transitionSurface = transitionSurfaceColor(webView);
+            prepareTransitionRootBackground(root, transitionSurface);
             Bitmap bitmap = Bitmap.createBitmap(webView.getWidth(), webView.getHeight(), Bitmap.Config.ARGB_8888);
             webView.draw(new Canvas(bitmap));
             if (zoomSourceRect != null) {
@@ -348,6 +353,7 @@ public class NativeNavigationPlugin extends Plugin {
             }
             transitionSnapshot = new ImageView(getContext());
             transitionSnapshot.setImageBitmap(bitmap);
+            transitionSnapshot.setBackgroundColor(transitionSurface);
             transitionSnapshot.setScaleType(ImageView.ScaleType.FIT_XY);
             FrameLayout.LayoutParams params =
                 activeZoomSourceFrame == null
@@ -415,8 +421,9 @@ public class NativeNavigationPlugin extends Plugin {
                 snapshotEndTranslation = -width * 0.3f;
             }
 
+            boolean stationaryTransition = isStationaryTransition(direction);
             webView.setTranslationX(startTranslation);
-            webView.setAlpha("none".equals(direction) ? 1f : 0.01f);
+            webView.setAlpha(stationaryTransition ? 1f : 0.01f);
             View snapshot = transitionSnapshot;
             JSObject event = transitionEvent(transitionId, direction, durationMs);
             Runnable finish = () -> {
@@ -424,6 +431,7 @@ public class NativeNavigationPlugin extends Plugin {
                 if (root != null && transitionSnapshot != null) {
                     root.removeView(transitionSnapshot);
                 }
+                restoreTransitionRootBackground();
                 transitionSnapshot = null;
                 activeTransitionId = null;
                 activeZoomSourceFrame = null;
@@ -443,7 +451,7 @@ public class NativeNavigationPlugin extends Plugin {
                 snapshot
                     .animate()
                     .translationX(snapshotEndTranslation)
-                    .alpha("none".equals(direction) ? 0f : 0.75f)
+                    .alpha(stationaryTransition ? 0f : 0.75f)
                     .setDuration(durationMs)
                     .withEndAction(finish)
                     .start();
@@ -480,6 +488,7 @@ public class NativeNavigationPlugin extends Plugin {
             if (root != null && transitionSnapshot != null) {
                 root.removeView(transitionSnapshot);
             }
+            restoreTransitionRootBackground();
             transitionSnapshot = null;
             activeTransitionId = null;
             activeZoomSourceFrame = null;
@@ -1498,6 +1507,52 @@ public class NativeNavigationPlugin extends Plugin {
         return event;
     }
 
+    private boolean isStationaryTransition(String direction) {
+        return "tab".equals(direction) || "root".equals(direction) || "none".equals(direction);
+    }
+
+    private void prepareTransitionRootBackground(FrameLayout root, int surfaceColor) {
+        activeTransitionRootBackground = root.getBackground();
+        activeTransitionRootBackgroundCaptured = true;
+        if (needsTransitionSurface(activeTransitionRootBackground)) {
+            root.setBackgroundColor(surfaceColor);
+        }
+    }
+
+    private void restoreTransitionRootBackground() {
+        if (!activeTransitionRootBackgroundCaptured) {
+            return;
+        }
+        FrameLayout root = contentRoot();
+        if (root != null) {
+            root.setBackground(activeTransitionRootBackground);
+        }
+        activeTransitionRootBackground = null;
+        activeTransitionRootBackgroundCaptured = false;
+    }
+
+    private boolean needsTransitionSurface(Drawable background) {
+        if (background == null) {
+            return true;
+        }
+        if (background instanceof ColorDrawable) {
+            return Color.alpha(((ColorDrawable) background).getColor()) < 255;
+        }
+        return false;
+    }
+
+    private int transitionSurfaceColor(View webView) {
+        Drawable background = webView.getBackground();
+        if (background instanceof ColorDrawable) {
+            int color = ((ColorDrawable) background).getColor();
+            if (Color.alpha(color) > 0) {
+                return withAlpha(color, 255);
+            }
+        }
+        int fallback = isNightMode() ? Color.rgb(18, 18, 18) : Color.WHITE;
+        return dynamicColor(isNightMode() ? "system_neutral1_900" : "system_neutral1_50", fallback);
+    }
+
     private FrameLayout contentRoot() {
         Activity activity = getActivity();
         return activity == null ? null : activity.findViewById(android.R.id.content);

package/ios/Sources/NativeNavigationPlugin/NativeNavigationPlugin.swift

@@ -70,6 +70,10 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
     private var activeTransitionDirection = "forward"
     private var activeZoomSourceFrame: CGRect?
     private var activeZoomCornerRadius: CGFloat = 0
+    private weak var activeTransitionContainer: UIView?
+    private var activeTransitionContainerBackgroundColor: UIColor?
+    private var activeTransitionContainerWasOpaque = false
+    private var activeTransitionContainerBackgroundCaptured = false
 
     private var usesSystemLiquidGlass: Bool {
         if #available(iOS 26.0, *) {
@@ -232,9 +236,14 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
             let cornerRadius = CGFloat(call.getDouble("cornerRadius") ?? 0)
 
             self.transitionSnapshot?.removeFromSuperview()
+            self.restoreTransitionContainerBackground()
+            let transitionSurface = nativeNavigationFallbackBackground(for: webView).withAlphaComponent(1.0)
+            self.prepareTransitionContainerBackground(transitionContainer, surface: transitionSurface)
             let snapshot = self.transitionSnapshotView(from: webView, sourceRect: zoomSourceRect)
             snapshot.frame = zoomSourceFrame ?? webView.frame
             snapshot.autoresizingMask = zoomSourceFrame == nil ? [.flexibleWidth, .flexibleHeight] : []
+            snapshot.backgroundColor = transitionSurface
+            snapshot.isOpaque = true
             snapshot.layer.cornerRadius = cornerRadius
             snapshot.clipsToBounds = cornerRadius > 0
             transitionContainer.insertSubview(snapshot, aboveSubview: webView)
@@ -292,8 +301,9 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
     private func finishStandardTransition(_ transition: NativeNavigationTransitionContext) {
         let width = transition.webView.bounds.width
         let transforms = standardTransitionTransforms(direction: transition.direction, width: width)
+        let usesStationaryCrossfade = nativeNavigationUsesStationaryTransitionCrossfade(direction: transition.direction)
         transition.webView.transform = transforms.start
-        transition.webView.alpha = transition.direction == "none" ? 1 : 0.01
+        transition.webView.alpha = usesStationaryCrossfade ? 1 : 0.01
 
         UIView.animate(
             withDuration: max(transition.duration, 0),
@@ -303,7 +313,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
                 transition.webView.transform = .identity
                 transition.webView.alpha = 1
                 transition.snapshot?.transform = transforms.snapshotEnd
-                transition.snapshot?.alpha = transition.direction == "none" ? 0 : 0.75
+                transition.snapshot?.alpha = usesStationaryCrossfade ? 0 : 0.75
             },
             completion: { _ in
                 self.finishTransitionCleanup(transition)
@@ -407,6 +417,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         transition.webView.layer.cornerRadius = 0
         transition.webView.clipsToBounds = false
         transitionSnapshot = nil
+        restoreTransitionContainerBackground()
         activeTransitionId = nil
         activeZoomSourceFrame = nil
         let event: [String: Any] = ["id": transition.id, "direction": transition.direction, "duration": transition.durationMs]
@@ -414,6 +425,29 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         transition.resolve(event)
     }
 
+    private func prepareTransitionContainerBackground(_ container: UIView, surface: UIColor) {
+        activeTransitionContainer = container
+        activeTransitionContainerBackgroundColor = container.backgroundColor
+        activeTransitionContainerWasOpaque = container.isOpaque
+        activeTransitionContainerBackgroundCaptured = true
+        if nativeNavigationNeedsTransitionSurface(container.backgroundColor) {
+            container.backgroundColor = surface
+            container.isOpaque = true
+        }
+    }
+
+    private func restoreTransitionContainerBackground() {
+        guard activeTransitionContainerBackgroundCaptured else {
+            return
+        }
+        activeTransitionContainer?.backgroundColor = activeTransitionContainerBackgroundColor
+        activeTransitionContainer?.isOpaque = activeTransitionContainerWasOpaque
+        activeTransitionContainer = nil
+        activeTransitionContainerBackgroundColor = nil
+        activeTransitionContainerWasOpaque = false
+        activeTransitionContainerBackgroundCaptured = false
+    }
+
     @objc func getPluginVersion(_ call: CAPPluginCall) {
         call.resolve([
             "version": implementation.getPluginVersion()
@@ -1611,9 +1645,20 @@ final class NativeNavigationTabContentController: UIViewController {
 private func nativeNavigationFallbackBackground(for view: UIView) -> UIColor {
     if let color = view.backgroundColor,
        color.cgColor.alpha > 0 {
-        return color
+        return color.withAlphaComponent(1)
+    }
+    return UIColor.systemBackground.withAlphaComponent(1.0)
+}
+
+func nativeNavigationUsesStationaryTransitionCrossfade(direction: String) -> Bool {
+    direction == "tab" || direction == "root" || direction == "none"
+}
+
+private func nativeNavigationNeedsTransitionSurface(_ color: UIColor?) -> Bool {
+    guard let color else {
+        return true
     }
-    return .systemBackground
+    return color.cgColor.alpha < 1
 }
 
 private func nativeNavigationSnapshotPlaceholder(for view: UIView) -> UIView {

package/ios/Tests/NativeNavigationPluginTests/NativeNavigationTests.swift

@@ -89,4 +89,12 @@ class NativeNavigationTests: XCTestCase {
         XCTAssertNil(webView.superview)
         XCTAssertEqual(controller.view.superview, webView)
     }
+
+    func testStationaryTransitionsCrossfadeSnapshotsAway() {
+        XCTAssertTrue(nativeNavigationUsesStationaryTransitionCrossfade(direction: "tab"))
+        XCTAssertTrue(nativeNavigationUsesStationaryTransitionCrossfade(direction: "root"))
+        XCTAssertTrue(nativeNavigationUsesStationaryTransitionCrossfade(direction: "none"))
+        XCTAssertFalse(nativeNavigationUsesStationaryTransitionCrossfade(direction: "forward"))
+        XCTAssertFalse(nativeNavigationUsesStationaryTransitionCrossfade(direction: "back"))
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capgo/capacitor-native-navigation",
-  "version": "8.1.0",
+  "version": "8.1.1",
   "description": "Capacitor plugin for native navbar, tabbar, safe-area handling, and WebView snapshot transitions.",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",
@@ -53,11 +53,12 @@
     "prepublishOnly": "bun run build",
     "check:wiring": "node scripts/check-capacitor-plugin-wiring.mjs",
     "demo:readme": "bun scripts/generate-readme-demos.mjs",
-    "example:build": "bun run build && cd example-app && bun install && bun run build",
+    "example:build": "bun run build && cd example-app && bun install --frozen-lockfile && bun run build",
     "example:capgo:deploy": "bun run example:build && bun scripts/deploy-example-capgo.mjs",
     "example:sync": "bun run example:build && cd example-app && bunx cap sync",
     "example:ios": "bun run example:build && cd example-app && ([ -d ios ] || bunx cap add ios) && bunx cap sync ios && bunx cap run ios",
-    "example:android": "bun run example:build && cd example-app && ([ -d android ] || bunx cap add android) && bunx cap sync android && bunx cap run android"
+    "example:android": "bun run example:build && cd example-app && ([ -d android ] || bunx cap add android) && bunx cap sync android && bunx cap run android",
+    "example:install": "cd example-app && bun install --frozen-lockfile"
   },
   "devDependencies": {
     "@capacitor/android": "^8.0.0",