@capgo/capacitor-native-navigation 8.4.4 → 8.5.0

package/README.md

@@ -159,7 +159,7 @@ await NativeNavigation.setTabbar({
 
 ## Android Liquid Glass
 
-Enable `glass.effect: 'liquidGlass'` to draw a live blurred WebView backdrop behind Android native bars. Android 12+ uses a platform `RenderEffect` blur; older Android versions keep the translucent tint surface without live blur.
+On Android 12+, floating tabbars use `liquidGlass` automatically when `setTabbar` omits `glass` (pass `glass: { effect: 'none' }` for a flat fill). The live blur uses a platform `RenderEffect` behind the bar shape; older Android versions keep a translucent tint without live blur. Tune `colors.background` alpha and `glass.surfaceAlpha` (default `0.62`) together.
 
 ```typescript
 await NativeNavigation.configure({
@@ -650,17 +650,17 @@ Global plugin configuration.
 
 Native bar colors. Use CSS-style hex strings (`#RRGGBB` or `#AARRGGBB`).
 
-| Prop                  | Type                 | Description                                                                                                                 |
-| --------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| **`dynamic`**         | <code>boolean</code> | When `true`, Android 12+ derives unspecified bar colors from Material You system palettes. Explicit color fields still win. |
-| **`tint`**            | <code>string</code>  | Tint color for active buttons/items.                                                                                        |
-| **`inactiveTint`**    | <code>string</code>  | Color for inactive tab items. Ignored on iOS 26+ unless `experimentalBakedTintColors` is enabled.                           |
-| **`background`**      | <code>string</code>  | Optional background tint. Ignored on iOS 26+ so UIKit can preserve the system Liquid Glass navigation appearance.           |
-| **`foreground`**      | <code>string</code>  | Title and label text color where the native platform supports it.                                                           |
-| **`badgeBackground`** | <code>string</code>  | Badge background color for native tab badges.                                                                               |
-| **`badgeText`**       | <code>string</code>  | Badge text color for native tab badges.                                                                                     |
-| **`indicator`**       | <code>string</code>  | Active tab indicator color on Android.                                                                                      |
-| **`ripple`**          | <code>string</code>  | Tab press ripple color on Android.                                                                                          |
+| Prop                  | Type                 | Description                                                                                                                                                                                                                                                                                    |
+| --------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`dynamic`**         | <code>boolean</code> | When `true`, Android 12+ derives unspecified bar colors from Material You system palettes. Explicit color fields still win.                                                                                                                                                                    |
+| **`tint`**            | <code>string</code>  | Tint color for active buttons/items.                                                                                                                                                                                                                                                           |
+| **`inactiveTint`**    | <code>string</code>  | Color for inactive tab items. Ignored on iOS 26+ unless `experimentalBakedTintColors` is enabled.                                                                                                                                                                                              |
+| **`background`**      | <code>string</code>  | Optional background tint. Ignored on iOS 26+ so UIKit can preserve the system Liquid Glass navigation appearance. On Android, alpha is honored. When `glass.effect` is not `liquidGlass`, floating tabbars still apply `glass.surfaceAlpha` (from `configure` / `setTabbar`) to the fill tint. |
+| **`foreground`**      | <code>string</code>  | Title and label text color where the native platform supports it.                                                                                                                                                                                                                              |
+| **`badgeBackground`** | <code>string</code>  | Badge background color for native tab badges.                                                                                                                                                                                                                                                  |
+| **`badgeText`**       | <code>string</code>  | Badge text color for native tab badges.                                                                                                                                                                                                                                                        |
+| **`indicator`**       | <code>string</code>  | Active tab indicator color on Android.                                                                                                                                                                                                                                                         |
+| **`ripple`**          | <code>string</code>  | Tab press ripple color on Android.                                                                                                                                                                                                                                                             |
 
 
 #### NativeNavigationGlassOptions
@@ -736,26 +736,26 @@ because icons are rendered by native UI.
 
 Native tabbar state.
 
-| Prop                                 | Type                                                                                                      | Description                                                                                                                                                                                     |
-| ------------------------------------ | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`hidden`**                         | <code>boolean</code>                                                                                      | Hide the native tabbar.                                                                                                                                                                         |
-| **`tabs`**                           | <code>NativeNavigationTab[]</code>                                                                        | Tab definitions.                                                                                                                                                                                |
-| **`selectedId`**                     | <code>string</code>                                                                                       | Currently selected tab id.                                                                                                                                                                      |
-| **`labels`**                         | <code>boolean</code>                                                                                      | Show text labels. Defaults to `true`.                                                                                                                                                           |
-| **`labelVisibilityMode`**            | <code><a href="#nativenavigationtablabelvisibilitymode">NativeNavigationTabLabelVisibilityMode</a></code> | Native label visibility mode. Overrides `labels` when provided.                                                                                                                                 |
-| **`icons`**                          | <code>boolean</code>                                                                                      | Show icons. Defaults to `true`.                                                                                                                                                                 |
-| **`colors`**                         | <code><a href="#nativenavigationcolors">NativeNavigationColors</a></code>                                 | Tabbar color hints.                                                                                                                                                                             |
-| **`blurEffect`**                     | <code><a href="#nativenavigationblureffect">NativeNavigationBlurEffect</a></code>                         | iOS blur/material effect for the tabbar background when glass is not available.                                                                                                                 |
-| **`glass`**                          | <code><a href="#nativenavigationglassoptions">NativeNavigationGlassOptions</a></code>                     | Optional glass background behavior. Overrides `configure({ glass })` for this tabbar update.                                                                                                    |
-| **`experimentalBakedTintColors`**    | <code>boolean</code>                                                                                      | Opt into the iOS 26 Liquid Glass tint workaround that renders active and inactive tab items into baked images. This can affect badge positioning and icon sizing, so it is disabled by default. |
-| **`disableTransparentOnScrollEdge`** | <code>boolean</code>                                                                                      | Keep the iOS scroll-edge tabbar appearance from becoming transparent. Mirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option. Defaults to `false`.                            |
-| **`disableIndicator`**               | <code>boolean</code>                                                                                      | Disable the Android active tab indicator.                                                                                                                                                       |
-| **`indicatorColor`**                 | <code>string</code>                                                                                       | Active tab indicator color on Android. `colors.indicator` is also supported.                                                                                                                    |
-| **`rippleColor`**                    | <code>string</code>                                                                                       | Tab press ripple color on Android. `colors.ripple` is also supported.                                                                                                                           |
-| **`badgeBackgroundColor`**           | <code>string</code>                                                                                       | Badge background color. `colors.badgeBackground` is also supported.                                                                                                                             |
-| **`badgeTextColor`**                 | <code>string</code>                                                                                       | Badge text color. `colors.badgeText` is also supported.                                                                                                                                         |
-| **`style`**                          | <code><a href="#nativenavigationtabbarstyle">NativeNavigationTabbarStyle</a></code>                       | Optional native tabbar layout and shape customization.                                                                                                                                          |
-| **`animated`**                       | <code>boolean</code>                                                                                      | Animate native tabbar changes.                                                                                                                                                                  |
+| Prop                                 | Type                                                                                                      | Description                                                                                                                                                                                                                                                              |
+| ------------------------------------ | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **`hidden`**                         | <code>boolean</code>                                                                                      | Hide the native tabbar.                                                                                                                                                                                                                                                  |
+| **`tabs`**                           | <code>NativeNavigationTab[]</code>                                                                        | Tab definitions.                                                                                                                                                                                                                                                         |
+| **`selectedId`**                     | <code>string</code>                                                                                       | Currently selected tab id.                                                                                                                                                                                                                                               |
+| **`labels`**                         | <code>boolean</code>                                                                                      | Show text labels. Defaults to `true`.                                                                                                                                                                                                                                    |
+| **`labelVisibilityMode`**            | <code><a href="#nativenavigationtablabelvisibilitymode">NativeNavigationTabLabelVisibilityMode</a></code> | Native label visibility mode. Overrides `labels` when provided.                                                                                                                                                                                                          |
+| **`icons`**                          | <code>boolean</code>                                                                                      | Show icons. Defaults to `true`.                                                                                                                                                                                                                                          |
+| **`colors`**                         | <code><a href="#nativenavigationcolors">NativeNavigationColors</a></code>                                 | Tabbar color hints.                                                                                                                                                                                                                                                      |
+| **`blurEffect`**                     | <code><a href="#nativenavigationblureffect">NativeNavigationBlurEffect</a></code>                         | iOS blur/material effect for the tabbar background when glass is not available.                                                                                                                                                                                          |
+| **`glass`**                          | <code><a href="#nativenavigationglassoptions">NativeNavigationGlassOptions</a></code>                     | Optional glass background behavior. Overrides `configure({ glass })` for this tabbar update. On Android 12+, floating tabbars default to `liquidGlass` (live blur plus tint) when this field is omitted. Pass `effect: 'none'` for a flat translucent fill without blur. |
+| **`experimentalBakedTintColors`**    | <code>boolean</code>                                                                                      | Opt into the iOS 26 Liquid Glass tint workaround that renders active and inactive tab items into baked images. This can affect badge positioning and icon sizing, so it is disabled by default.                                                                          |
+| **`disableTransparentOnScrollEdge`** | <code>boolean</code>                                                                                      | Keep the iOS scroll-edge tabbar appearance from becoming transparent. Mirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option. Defaults to `false`.                                                                                                     |
+| **`disableIndicator`**               | <code>boolean</code>                                                                                      | Disable the Android active tab indicator.                                                                                                                                                                                                                                |
+| **`indicatorColor`**                 | <code>string</code>                                                                                       | Active tab indicator color on Android. `colors.indicator` is also supported.                                                                                                                                                                                             |
+| **`rippleColor`**                    | <code>string</code>                                                                                       | Tab press ripple color on Android. `colors.ripple` is also supported.                                                                                                                                                                                                    |
+| **`badgeBackgroundColor`**           | <code>string</code>                                                                                       | Badge background color. `colors.badgeBackground` is also supported.                                                                                                                                                                                                      |
+| **`badgeTextColor`**                 | <code>string</code>                                                                                       | Badge text color. `colors.badgeText` is also supported.                                                                                                                                                                                                                  |
+| **`style`**                          | <code><a href="#nativenavigationtabbarstyle">NativeNavigationTabbarStyle</a></code>                       | Optional native tabbar layout and shape customization.                                                                                                                                                                                                                   |
+| **`animated`**                       | <code>boolean</code>                                                                                      | Animate native tabbar changes.                                                                                                                                                                                                                                           |
 
 
 #### NativeNavigationTab

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

@@ -81,6 +81,7 @@ public class NativeNavigationPlugin extends Plugin {
     private boolean tabbarVisible = false;
     private String contentInsetMode = "css";
     private GlassOptions defaultGlassOptions = GlassOptions.defaults();
+    private boolean configureSpecifiedGlassEffect = false;
     private GlassOptions navbarGlassOptions = GlassOptions.defaults();
     private GlassOptions tabbarGlassOptions = GlassOptions.defaults();
     private JSObject navbarGlassConfig;
@@ -105,6 +106,7 @@ public class NativeNavigationPlugin extends Plugin {
     private final Map<Integer, String> menuActionPlacements = new HashMap<>();
     private final List<NativeTabItem> tabItems = new ArrayList<>();
     private int selectedTabIndex = 0;
+    private boolean tabbarChromeHideAnimating = false;
     private boolean tabbarDisableIndicator = false;
     private Integer tabbarIndicatorColor = null;
 
@@ -112,7 +114,10 @@ public class NativeNavigationPlugin extends Plugin {
     public void load() {
         Activity activity = getActivity();
         if (activity != null) {
-            activity.runOnUiThread(this::enableEdgeToEdge);
+            activity.runOnUiThread(() -> {
+                enableEdgeToEdge();
+                watchContentRootBounds();
+            });
         }
     }
 
@@ -121,7 +126,9 @@ public class NativeNavigationPlugin extends Plugin {
         runOnUiThread(() -> {
             enabled = call.getBoolean("enabled", true);
             contentInsetMode = call.getString("contentInsetMode", contentInsetMode);
-            defaultGlassOptions = GlassOptions.from(call.getObject("glass", null), defaultGlassOptions);
+            JSObject configureGlass = call.getObject("glass", null);
+            configureSpecifiedGlassEffect = configureGlass != null && configureGlass.has("effect");
+            defaultGlassOptions = GlassOptions.from(configureGlass, defaultGlassOptions);
             navbarGlassOptions = GlassOptions.from(navbarGlassConfig, defaultGlassOptions);
             tabbarGlassOptions = GlassOptions.from(tabbarGlassConfig, defaultGlassOptions);
             Double duration = call.getDouble("animationDuration");
@@ -215,17 +222,10 @@ public class NativeNavigationPlugin extends Plugin {
             }
 
             boolean hidden = call.getBoolean("hidden", false);
+            boolean animated = call.getBoolean("animated", false);
             tabbarVisible = !hidden;
             if (hidden) {
-                if (tabbar != null) {
-                    tabbar.setVisibility(View.GONE);
-                }
-                if (tabbarContainer != null) {
-                    tabbarContainer.setVisibility(View.GONE);
-                }
-                if (tabbarBackdrop != null) {
-                    tabbarBackdrop.setVisibility(View.GONE);
-                }
+                setTabbarChromeVisible(false, animated);
                 updateInsetsAndNotify();
                 call.resolve(insetsResult());
                 return;
@@ -243,7 +243,6 @@ public class NativeNavigationPlugin extends Plugin {
             String selectedId = call.getString("selectedId", null);
             JSObject colors = call.getObject("colors", new JSObject());
             tabbarGlassConfig = call.getObject("glass", null);
-            tabbarGlassOptions = GlassOptions.from(tabbarGlassConfig, defaultGlassOptions);
             badgeBackgroundColor = colorOption(call, colors, "badgeBackgroundColor", "badgeBackground", Color.rgb(255, 59, 48));
             badgeTextColor = colorOption(call, colors, "badgeTextColor", "badgeText", Color.WHITE);
             tabbarDisableIndicator = call.getBoolean("disableIndicator", false);
@@ -273,6 +272,7 @@ public class NativeNavigationPlugin extends Plugin {
 
             applyTabbarColors(call, colors);
             tabbarStyle = makeTabbarStyle(call.getObject("style", new JSObject()));
+            tabbarGlassOptions = resolveTabbarGlassOptions(call);
 
             // Keep at most one detached trailing action for floating bars.
             // Curve bars ignore role so tab order / center selection stay stable.
@@ -314,14 +314,8 @@ public class NativeNavigationPlugin extends Plugin {
 
             applyTabbarBackground(centerTabIndex());
             renderTabbarItems(labelVisibilityMode, icons);
-            if (tabbarContainer != null) {
-                tabbarContainer.setVisibility(View.VISIBLE);
-            }
-            if (tabbarBackdrop != null) {
-                tabbarBackdrop.setVisibility(View.VISIBLE);
-            }
-            nativeTabbar.setVisibility(View.VISIBLE);
             layoutChrome();
+            setTabbarChromeVisible(true, animated);
             updateInsetsAndNotify();
             call.resolve(insetsResult());
         });
@@ -759,6 +753,10 @@ public class NativeNavigationPlugin extends Plugin {
         tabbarContainer.setClipChildren(false);
         tabbarContainer.setClipToPadding(false);
         tabbarContainer.setElevation(dp(12));
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+            tabbarContainer.setOutlineAmbientShadowColor(0x33000000);
+            tabbarContainer.setOutlineSpotShadowColor(0x66000000);
+        }
 
         tabbarGlassBackdrop = new GlassBackdropView(getContext());
         tabbarGlassSurface = new View(getContext());
@@ -1668,15 +1666,36 @@ public class NativeNavigationPlugin extends Plugin {
             }
         }
 
-        tabbar.setTabbarStyle(tabbarStyle, drawColor, centerIndex);
+        boolean glassBlurActive =
+            resolvedGlassOptions.isLiquidGlass() && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S;
+        int tabbarFillColor = glassBlurActive ? Color.TRANSPARENT : drawColor;
+        tabbar.setTabbarStyle(tabbarStyle, tabbarFillColor, centerIndex);
         applyTabbarContainerOutline();
     }
 
+    private GlassOptions resolveTabbarGlassOptions(PluginCall call) {
+        if (tabbarGlassConfig != null) {
+            return GlassOptions.from(tabbarGlassConfig, defaultGlassOptions);
+        }
+        boolean apiAtLeastS = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S;
+        if (
+            TabbarChromeSupport.shouldEnableDefaultLiquidGlass(apiAtLeastS, tabbarStyle.isCurve(), false)
+            && (!configureSpecifiedGlassEffect || defaultGlassOptions.isLiquidGlass())
+        ) {
+            return GlassOptions.from(new JSObject().put("effect", "liquidGlass"), defaultGlassOptions);
+        }
+        return GlassOptions.from(null, defaultGlassOptions);
+    }
+
     private int resolvedTabbarSurfaceColor() {
         GlassOptions resolvedGlassOptions = tabbarGlassOptions == null ? GlassOptions.defaults() : tabbarGlassOptions;
-        return resolvedGlassOptions.isLiquidGlass()
-            ? glassSurfaceColor(tabbarBackgroundColor, resolvedGlassOptions)
-            : tabbarBackgroundColor;
+        if (resolvedGlassOptions.isLiquidGlass()) {
+            return glassSurfaceColor(tabbarBackgroundColor, resolvedGlassOptions);
+        }
+        if (!tabbarStyle.isCurve()) {
+            return glassSurfaceColor(tabbarBackgroundColor, resolvedGlassOptions);
+        }
+        return tabbarBackgroundColor;
     }
 
     private void reapplyVisibleChromeBackgrounds() {
@@ -1831,7 +1850,8 @@ public class NativeNavigationPlugin extends Plugin {
         int bottom = navigationBarInset();
         int navbarHeight = navbarVisible ? status + dp(DEFAULT_NAVBAR_DP) : 0;
         int tabbarHeight = dp(tabbarStyle.totalHeight());
-        int tabbarBottomMargin = tabbarVisible ? bottom + dp(tabbarStyle.bottomGap) : bottom;
+        boolean tabbarLayoutVisible = tabbarVisible || tabbarChromeHideAnimating;
+        int tabbarBottomMargin = tabbarLayoutVisible ? bottom + dp(tabbarStyle.bottomGap) : bottom;
 
         if (navbarContainer != null) {
             FrameLayout.LayoutParams containerParams = new FrameLayout.LayoutParams(
@@ -1854,7 +1874,7 @@ public class NativeNavigationPlugin extends Plugin {
         if (tabbarBackdrop != null) {
             // Only the edge-to-edge curve bar extends its surface under the gesture area. A floating
             // tabbar must leave the page visible below it, or it sits on a solid band.
-            int backdropHeight = tabbarVisible && tabbarStyle.isCurve() ? bottom + dp(tabbarStyle.bottomGap) : 0;
+            int backdropHeight = tabbarLayoutVisible && tabbarStyle.isCurve() ? bottom + dp(tabbarStyle.bottomGap) : 0;
             FrameLayout.LayoutParams backdropParams = new FrameLayout.LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT,
                 backdropHeight,
@@ -1862,7 +1882,7 @@ public class NativeNavigationPlugin extends Plugin {
             );
             tabbarBackdrop.setLayoutParams(backdropParams);
             tabbarBackdrop.setBackgroundColor(resolvedTabbarSurfaceColor());
-            tabbarBackdrop.setVisibility(tabbarVisible && backdropHeight > 0 ? View.VISIBLE : View.GONE);
+            tabbarBackdrop.setVisibility(tabbarLayoutVisible && backdropHeight > 0 ? View.VISIBLE : View.GONE);
         }
         if (tabbarContainer != null) {
             int rootWidth = root.getWidth() > 0 ? root.getWidth() : Resources.getSystem().getDisplayMetrics().widthPixels;
@@ -1904,6 +1924,97 @@ public class NativeNavigationPlugin extends Plugin {
         bringChromeToFront();
     }
 
+    private void setTabbarChromeVisible(boolean visible, boolean animated) {
+        if (!animated) {
+            tabbarChromeHideAnimating = false;
+            int visibility = visible ? View.VISIBLE : View.GONE;
+            if (tabbar != null) {
+                tabbar.setVisibility(visibility);
+            }
+            if (tabbarContainer != null) {
+                tabbarContainer.animate().cancel();
+                tabbarContainer.setTranslationY(0f);
+                tabbarContainer.setAlpha(1f);
+                tabbarContainer.setVisibility(visibility);
+            }
+            if (tabbarBackdrop != null) {
+                tabbarBackdrop.animate().cancel();
+                tabbarBackdrop.setAlpha(1f);
+                tabbarBackdrop.setVisibility(visible && tabbarVisible ? View.VISIBLE : View.GONE);
+            }
+            return;
+        }
+
+        if (tabbarContainer == null) {
+            setTabbarChromeVisible(visible, false);
+            return;
+        }
+
+        float slideDistance = tabbarSlideDistance();
+        tabbarContainer.animate().cancel();
+        if (tabbarBackdrop != null) {
+            tabbarBackdrop.animate().cancel();
+        }
+
+        if (!visible) {
+            tabbarChromeHideAnimating = true;
+            tabbarContainer
+                .animate()
+                .translationY(slideDistance)
+                .alpha(0f)
+                .setDuration(TabbarChromeSupport.TABBAR_VISIBILITY_ANIMATION_MS)
+                .withEndAction(() -> {
+                    tabbarChromeHideAnimating = false;
+                    if (tabbar != null) {
+                        tabbar.setVisibility(View.GONE);
+                    }
+                    tabbarContainer.setVisibility(View.GONE);
+                    if (tabbarBackdrop != null) {
+                        tabbarBackdrop.setVisibility(View.GONE);
+                    }
+                })
+                .start();
+            if (tabbarBackdrop != null) {
+                tabbarBackdrop.animate().alpha(0f).setDuration(TabbarChromeSupport.TABBAR_VISIBILITY_ANIMATION_MS).start();
+            }
+            return;
+        }
+
+        tabbarChromeHideAnimating = false;
+        tabbarContainer.setVisibility(View.VISIBLE);
+        tabbarContainer.setAlpha(0f);
+        tabbarContainer.setTranslationY(slideDistance);
+        if (tabbarBackdrop != null) {
+            tabbarBackdrop.setVisibility(View.VISIBLE);
+            tabbarBackdrop.setAlpha(0f);
+        }
+        if (tabbar != null) {
+            tabbar.setVisibility(View.VISIBLE);
+        }
+        tabbarContainer
+            .animate()
+            .translationY(0f)
+            .alpha(1f)
+            .setDuration(TabbarChromeSupport.TABBAR_VISIBILITY_ANIMATION_MS)
+            .start();
+        if (tabbarBackdrop != null) {
+            tabbarBackdrop.animate().alpha(1f).setDuration(TabbarChromeSupport.TABBAR_VISIBILITY_ANIMATION_MS).start();
+        }
+    }
+
+    private float tabbarSlideDistance() {
+        if (tabbarContainer == null) {
+            return dp(tabbarStyle.totalHeight() + tabbarStyle.bottomGap);
+        }
+        ViewGroup.LayoutParams params = tabbarContainer.getLayoutParams();
+        int bottomMargin = params instanceof ViewGroup.MarginLayoutParams ? ((ViewGroup.MarginLayoutParams) params).bottomMargin : 0;
+        return TabbarChromeSupport.tabbarSlideDistancePx(
+            tabbarContainer.getHeight(),
+            bottomMargin,
+            dp(tabbarStyle.totalHeight() + tabbarStyle.bottomGap)
+        );
+    }
+
     private void bringChromeToFront() {
         if (navbarContainer != null) {
             navbarContainer.bringToFront();
@@ -2062,7 +2173,21 @@ public class NativeNavigationPlugin extends Plugin {
         }
     }
 
+    /**
+     * The chrome is laid out inside {@code android.R.id.content}, so it only needs to clear the part of a
+     * system bar that actually overlaps that view. Capacitor's SystemBars plugin (default
+     * {@code insetsHandling: 'css'} without {@code viewport-fit=cover}) pads the decor view by the system bars,
+     * which already moves the content root clear of them; adding the full inset again doubled the gap.
+     */
     private int statusBarInset() {
+        return Math.max(0, rawStatusBarInset() - contentRootTopOffset());
+    }
+
+    private int navigationBarInset() {
+        return Math.max(0, rawNavigationBarInset() - contentRootBottomOffset());
+    }
+
+    private int rawStatusBarInset() {
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
             WindowInsets insets = getActivity().getWindow().getDecorView().getRootWindowInsets();
             if (insets != null) {
@@ -2072,7 +2197,7 @@ public class NativeNavigationPlugin extends Plugin {
         return systemDimension("status_bar_height");
     }
 
-    private int navigationBarInset() {
+    private int rawNavigationBarInset() {
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
             WindowInsets insets = getActivity().getWindow().getDecorView().getRootWindowInsets();
             if (insets != null) {
@@ -2082,6 +2207,45 @@ public class NativeNavigationPlugin extends Plugin {
         return systemDimension("navigation_bar_height");
     }
 
+    private int contentRootTopOffset() {
+        FrameLayout root = contentRoot();
+        if (root == null || !root.isLaidOut()) {
+            return 0;
+        }
+        int[] location = new int[2];
+        root.getLocationInWindow(location);
+        return Math.max(0, location[1]);
+    }
+
+    private int contentRootBottomOffset() {
+        FrameLayout root = contentRoot();
+        Activity activity = getActivity();
+        if (root == null || activity == null || !root.isLaidOut()) {
+            return 0;
+        }
+        View decor = activity.getWindow().getDecorView();
+        int[] location = new int[2];
+        root.getLocationInWindow(location);
+        return Math.max(0, decor.getHeight() - (location[1] + root.getHeight()));
+    }
+
+    private void watchContentRootBounds() {
+        FrameLayout root = contentRoot();
+        if (root == null) {
+            return;
+        }
+        // SystemBars can add or drop its decor padding after load (for example once viewport-fit=cover is
+        // detected), which moves the content root without a call into this plugin. Re-run layout when it moves.
+        root.addOnLayoutChangeListener((view, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom) -> {
+            if (top == oldTop && bottom == oldBottom && left == oldLeft && right == oldRight) {
+                return;
+            }
+            if (navbarVisible || tabbarVisible) {
+                view.post(this::updateInsetsAndNotify);
+            }
+        });
+    }
+
     private int systemDimension(String name) {
         int id = getContext().getResources().getIdentifier(name, "dimen", "android");
         return id == 0 ? 0 : getContext().getResources().getDimensionPixelSize(id);

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

@@ -6,6 +6,8 @@ import android.os.Build;
 
 public final class TabbarChromeSupport {
 
+    public static final int TABBAR_VISIBILITY_ANIMATION_MS = 200;
+
     public enum TabbarOutlineMode {
         FLOATING_SHAPE,
         CURVE_DEFAULT
@@ -13,6 +15,13 @@ public final class TabbarChromeSupport {
 
     private TabbarChromeSupport() {}
 
+    public static float tabbarSlideDistancePx(int containerHeight, int bottomMargin, int fallbackDistance) {
+        if (containerHeight > 0) {
+            return (float) containerHeight + (float) bottomMargin;
+        }
+        return (float) fallbackDistance;
+    }
+
     public static int resolveSelectedIndicatorColor(Integer explicitColor, int tintColor) {
         if (explicitColor != null) {
             return explicitColor;
@@ -28,6 +37,10 @@ public final class TabbarChromeSupport {
         return mode == TabbarOutlineMode.FLOATING_SHAPE;
     }
 
+    public static boolean shouldEnableDefaultLiquidGlass(boolean apiAtLeastS, boolean isCurve, boolean glassSpecified) {
+        return !glassSpecified && !isCurve && apiAtLeastS;
+    }
+
     public static int floatingCapsuleWidth(int totalWidth, int barHeightPx, int trailingGapPx, boolean hasDetachedTrailing) {
         if (!hasDetachedTrailing) {
             return totalWidth;

package/dist/docs.json

@@ -419,7 +419,7 @@
         {
           "name": "background",
           "tags": [],
-          "docs": "Optional background tint. Ignored on iOS 26+ so UIKit can preserve the\nsystem Liquid Glass navigation appearance.",
+          "docs": "Optional background tint. Ignored on iOS 26+ so UIKit can preserve the\nsystem Liquid Glass navigation appearance. On Android, alpha is honored.\nWhen `glass.effect` is not `liquidGlass`, floating tabbars still apply\n`glass.surfaceAlpha` (from `configure` / `setTabbar`) to the fill tint.",
           "complexTypes": [],
           "type": "string | undefined"
         },
@@ -791,7 +791,7 @@
         {
           "name": "glass",
           "tags": [],
-          "docs": "Optional glass background behavior. Overrides `configure({ glass })` for\nthis tabbar update.",
+          "docs": "Optional glass background behavior. Overrides `configure({ glass })` for\nthis tabbar update. On Android 12+, floating tabbars default to\n`liquidGlass` (live blur plus tint) when this field is omitted. Pass\n`effect: 'none'` for a flat translucent fill without blur.",
           "complexTypes": [
             "NativeNavigationGlassOptions"
           ],

package/dist/esm/definitions.d.ts

@@ -150,7 +150,9 @@ export interface NativeNavigationColors {
     inactiveTint?: string;
     /**
      * Optional background tint. Ignored on iOS 26+ so UIKit can preserve the
-     * system Liquid Glass navigation appearance.
+     * system Liquid Glass navigation appearance. On Android, alpha is honored.
+     * When `glass.effect` is not `liquidGlass`, floating tabbars still apply
+     * `glass.surfaceAlpha` (from `configure` / `setTabbar`) to the fill tint.
      */
     background?: string;
     /**
@@ -439,7 +441,9 @@ export interface NativeNavigationTabbarOptions {
     blurEffect?: NativeNavigationBlurEffect;
     /**
      * Optional glass background behavior. Overrides `configure({ glass })` for
-     * this tabbar update.
+     * this tabbar update. On Android 12+, floating tabbars default to
+     * `liquidGlass` (live blur plus tint) when this field is omitted. Pass
+     * `effect: 'none'` for a flat translucent fill without blur.
      */
     glass?: NativeNavigationGlassOptions;
     /**

package/dist/esm/definitions.js.map

@@ -1 +1 @@
-{"version":3,"file":"definitions.js","sourceRoot":"","sources":["../../src/definitions.ts"],"names":[],"mappings":"","sourcesContent":["import type { PluginListenerHandle } from '@capacitor/core';\n\n/**\n * Platform rendering preference for the native bars.\n */\nexport type NativeNavigationPlatformStyle = 'auto' | 'ios' | 'android';\n\n/**\n * How the plugin exposes native bar sizes to web content.\n */\nexport type NativeNavigationContentInsetMode = 'css' | 'none';\n\n/**\n * Navigation animation direction.\n */\nexport type NativeNavigationTransitionDirection = 'forward' | 'back' | 'root' | 'tab' | 'zoom' | 'none';\n\n/**\n * Native material/blur effect preference.\n */\nexport type NativeNavigationBlurEffect =\n  | 'none'\n  | 'systemDefault'\n  | 'extraLight'\n  | 'light'\n  | 'dark'\n  | 'regular'\n  | 'prominent'\n  | 'systemUltraThinMaterial'\n  | 'systemThinMaterial'\n  | 'systemMaterial'\n  | 'systemThickMaterial'\n  | 'systemChromeMaterial'\n  | 'systemUltraThinMaterialLight'\n  | 'systemThinMaterialLight'\n  | 'systemMaterialLight'\n  | 'systemThickMaterialLight'\n  | 'systemChromeMaterialLight'\n  | 'systemUltraThinMaterialDark'\n  | 'systemThinMaterialDark'\n  | 'systemMaterialDark'\n  | 'systemThickMaterialDark'\n  | 'systemChromeMaterialDark';\n\n/**\n * Native glass background rendering preference.\n */\nexport type NativeNavigationGlassEffect = 'none' | 'liquidGlass';\n\n/**\n * Native glass background configuration.\n */\nexport interface NativeNavigationGlassOptions {\n  /**\n   * `liquidGlass` enables the Android 12+ live blurred WebView backdrop for\n   * native bars. Android 11 and older keep a translucent surface fallback. iOS\n   * uses the platform-owned Liquid Glass behavior.\n   */\n  effect?: NativeNavigationGlassEffect;\n\n  /**\n   * Android blur radius in native dp for `liquidGlass`. Defaults to `18`.\n   */\n  blurRadius?: number;\n\n  /**\n   * Alpha multiplier for the tint surface over the glass backdrop. Defaults to\n   * `0.62`.\n   */\n  surfaceAlpha?: number;\n}\n\n/**\n * Native tab label visibility behavior.\n */\nexport type NativeNavigationTabLabelVisibilityMode = 'auto' | 'selected' | 'labeled' | 'unlabeled';\n\n/**\n * A rectangle in WebView viewport coordinates, expressed in native points/dp.\n */\nexport interface NativeNavigationRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Native tabbar background shape.\n */\nexport type NativeNavigationTabbarShape = 'floating' | 'curve';\n\n/**\n * Native tab role for Liquid Glass tab bars.\n *\n * `search` (and `prominent` when the OS supports it) renders as a detached\n * trailing circular action beside the floating tab capsule — the Apple News /\n * Photos pattern. Only one detached trailing role is used; if multiple tabs\n * set `search` or `prominent`, the last one wins. Curve-shaped bars ignore\n * `role` and keep using the included center action instead.\n */\nexport type NativeNavigationTabRole = 'normal' | 'search' | 'prominent';\n\n/**\n * A serializable icon descriptor. Framework nodes are intentionally not accepted\n * because icons are rendered by native UI.\n */\nexport interface NativeNavigationIcon {\n  /**\n   * Cross-platform asset path or URL fallback.\n   */\n  src?: string;\n\n  /**\n   * Cross-platform inline SVG markup. The native renderers support common icon\n   * shapes such as path, line, polyline, polygon, circle, and rect. SVG icons\n   * are rendered as template images by default so native tint colors still\n   * apply.\n   */\n  svg?: string;\n\n  /**\n   * Preferred rendered icon width in native points/dp. Defaults to `24`.\n   */\n  width?: number;\n\n  /**\n   * Preferred rendered icon height in native points/dp. Defaults to `24`.\n   */\n  height?: number;\n\n  /**\n   * When `true`, native tint colors are applied to the rendered SVG/image.\n   * Defaults to `true`.\n   */\n  template?: boolean;\n\n  /**\n   * iOS-specific SF Symbol, bundled image name, or inline SVG.\n   */\n  ios?: {\n    /**\n     * SF Symbol name, for example `house.fill`.\n     */\n    sfSymbol?: string;\n\n    /**\n     * Bundled image name from the app asset catalog.\n     */\n    image?: string;\n\n    /**\n     * iOS-specific inline SVG markup.\n     */\n    svg?: string;\n  };\n\n  /**\n   * Android-specific drawable resource, asset name, or inline SVG.\n   */\n  android?: {\n    /**\n     * Drawable resource name without the `R.drawable.` prefix.\n     */\n    resource?: string;\n\n    /**\n     * Bundled image asset name.\n     */\n    image?: string;\n\n    /**\n     * Android-specific inline SVG markup.\n     */\n    svg?: string;\n  };\n}\n\n/**\n * Native bar colors. Use CSS-style hex strings (`#RRGGBB` or `#AARRGGBB`).\n */\nexport interface NativeNavigationColors {\n  /**\n   * When `true`, Android 12+ derives unspecified bar colors from Material You\n   * system palettes. Explicit color fields still win.\n   */\n  dynamic?: boolean;\n\n  /**\n   * Tint color for active buttons/items.\n   */\n  tint?: string;\n\n  /**\n   * Color for inactive tab items. Ignored on iOS 26+ unless\n   * `experimentalBakedTintColors` is enabled.\n   */\n  inactiveTint?: string;\n\n  /**\n   * Optional background tint. Ignored on iOS 26+ so UIKit can preserve the\n   * system Liquid Glass navigation appearance.\n   */\n  background?: string;\n\n  /**\n   * Title and label text color where the native platform supports it.\n   */\n  foreground?: string;\n\n  /**\n   * Badge background color for native tab badges.\n   */\n  badgeBackground?: string;\n\n  /**\n   * Badge text color for native tab badges.\n   */\n  badgeText?: string;\n\n  /**\n   * Active tab indicator color on Android.\n   */\n  indicator?: string;\n\n  /**\n   * Tab press ripple color on Android.\n   */\n  ripple?: string;\n}\n\n/**\n * Global plugin configuration.\n */\nexport interface NativeNavigationConfigureOptions {\n  /**\n   * Enables or disables the native chrome host.\n   */\n  enabled?: boolean;\n\n  /**\n   * Native style preference. `auto` uses the current platform.\n   */\n  platformStyle?: NativeNavigationPlatformStyle;\n\n  /**\n   * When `css`, the plugin writes CSS variables on `document.documentElement`.\n   */\n  contentInsetMode?: NativeNavigationContentInsetMode;\n\n  /**\n   * Default native transition duration in milliseconds.\n   */\n  animationDuration?: number;\n\n  /**\n   * Shared color hints for native bars.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * Shared glass background defaults for native bars.\n   */\n  glass?: NativeNavigationGlassOptions;\n}\n\n/**\n * A button shown in the native navbar.\n */\nexport interface NativeNavigationBarButton {\n  /**\n   * Stable id returned in `navbarItemTap`.\n   */\n  id: string;\n\n  /**\n   * Visible text label.\n   */\n  title?: string;\n\n  /**\n   * Native icon descriptor.\n   */\n  icon?: NativeNavigationIcon;\n\n  /**\n   * Whether the action is enabled. Defaults to `true`.\n   */\n  enabled?: boolean;\n}\n\n/**\n * Native back button configuration.\n */\nexport interface NativeNavigationBackButton {\n  /**\n   * Show the native back affordance.\n   */\n  visible?: boolean;\n\n  /**\n   * Optional back title.\n   */\n  title?: string;\n}\n\n/**\n * Native navbar state.\n */\nexport interface NativeNavigationNavbarOptions {\n  /**\n   * Hide the native navbar.\n   */\n  hidden?: boolean;\n\n  /**\n   * Main title.\n   */\n  title?: string;\n\n  /**\n   * Secondary title where supported by the platform.\n   */\n  subtitle?: string;\n\n  /**\n   * Prefer a large iOS title style.\n   */\n  large?: boolean;\n\n  /**\n   * Prefer transparent/scroll-edge style.\n   */\n  transparent?: boolean;\n\n  /**\n   * iOS blur/material effect for the navbar background when glass is not\n   * available. Defaults to `systemChromeMaterial` for transparent bars.\n   */\n  blurEffect?: NativeNavigationBlurEffect;\n\n  /**\n   * Optional glass background behavior. Overrides `configure({ glass })` for\n   * this navbar update.\n   */\n  glass?: NativeNavigationGlassOptions;\n\n  /**\n   * Back button state.\n   */\n  backButton?: NativeNavigationBackButton;\n\n  /**\n   * Left-side action buttons.\n   */\n  leftItems?: NativeNavigationBarButton[];\n\n  /**\n   * Right-side action buttons.\n   */\n  rightItems?: NativeNavigationBarButton[];\n\n  /**\n   * Navbar color hints.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * Animate native navbar changes.\n   */\n  animated?: boolean;\n}\n\n/**\n * A native tab item.\n */\nexport interface NativeNavigationTab {\n  /**\n   * Stable tab id returned in `tabSelect`.\n   */\n  id: string;\n\n  /**\n   * Visible tab label.\n   */\n  title?: string;\n\n  /**\n   * Native icon descriptor.\n   */\n  icon?: NativeNavigationIcon;\n\n  /**\n   * Optional selected-state icon.\n   */\n  selectedIcon?: NativeNavigationIcon;\n\n  /**\n   * Optional badge. Numeric badges are supported on both platforms; text badge\n   * support depends on platform capabilities.\n   */\n  badge?: string | number;\n\n  /**\n   * Whether the tab is enabled. Defaults to `true`.\n   */\n  enabled?: boolean;\n\n  /**\n   * Hide the tab item from the native tabbar. When the hidden tab is selected,\n   * native platform constraints may keep it visible until another tab is\n   * selected.\n   */\n  hidden?: boolean;\n\n  /**\n   * Optional tab role. On floating tabbars, `search` (or `prominent` when\n   * available) becomes a detached trailing circular action beside the capsule\n   * — including the iOS 26+ system Liquid Glass tab bar, Android floating\n   * layout, and the custom floating capsule path. Only one detached trailing\n   * role is used; if multiple tabs set `search` or `prominent`, the last one\n   * wins. Curve-shaped bars ignore `role` and keep using the included center\n   * action. Defaults to `normal`.\n   */\n  role?: NativeNavigationTabRole;\n}\n\n/**\n * Native tabbar layout and background shape options.\n */\nexport interface NativeNavigationTabbarStyle {\n  /**\n   * `floating` keeps the capsule tabbar. On iOS 26+ this uses the\n   * system-owned Liquid Glass `UITabBarController` unless a custom capsule\n   * path is required; earlier iOS and the custom capsule path use\n   * `UIGlassEffect` on iOS 26+ (blur material fallback otherwise). `curve`\n   * draws a full-width bar with an included center action.\n   */\n  shape?: NativeNavigationTabbarShape;\n\n  /**\n   * Bar height in native points/dp, not including the system bottom inset.\n   * Curve defaults to `49` on iOS (83pt once the home indicator is added) and\n   * `80` on Android (Material navigation bar). Floating defaults to `64`.\n   * Pass `height` to override either platform.\n   */\n  height?: number;\n\n  /**\n   * Horizontal margin in native points/dp. Defaults to `24` for `floating` and\n   * `0` for `curve`.\n   */\n  horizontalMargin?: number;\n\n  /**\n   * Maximum tabbar width in native points/dp. Defaults to `430` for `floating`;\n   * `curve` uses the available width unless this is set.\n   */\n  maxWidth?: number;\n\n  /**\n   * Bottom gap above the platform safe area in native points/dp. Defaults to\n   * `10` for `floating` and `0` for `curve`.\n   */\n  bottomGap?: number;\n\n  /**\n   * Background corner radius in native points/dp. Defaults to a capsule radius\n   * for `floating` and `0` for `curve`.\n   */\n  cornerRadius?: number;\n\n  /**\n   * Tab id promoted into the included center button for `curve`. Defaults to\n   * the middle tab.\n   */\n  centerItemId?: string;\n\n  /**\n   * Included center button diameter in native points/dp. Defaults to `56`.\n   */\n  centerButtonDiameter?: number;\n\n  /**\n   * Distance from the top of the center button to the top edge of the bar in\n   * native points/dp. Defaults to half of `centerButtonDiameter`.\n   */\n  centerButtonLift?: number;\n\n  /**\n   * Included center button color. Defaults to the active tint color.\n   */\n  centerButtonColor?: string;\n\n  /**\n   * Included center button icon color. Defaults to white.\n   */\n  centerButtonIconColor?: string;\n}\n\n/**\n * Native tabbar state.\n */\nexport interface NativeNavigationTabbarOptions {\n  /**\n   * Hide the native tabbar.\n   */\n  hidden?: boolean;\n\n  /**\n   * Tab definitions.\n   */\n  tabs?: NativeNavigationTab[];\n\n  /**\n   * Currently selected tab id.\n   */\n  selectedId?: string;\n\n  /**\n   * Show text labels. Defaults to `true`.\n   */\n  labels?: boolean;\n\n  /**\n   * Native label visibility mode. Overrides `labels` when provided.\n   */\n  labelVisibilityMode?: NativeNavigationTabLabelVisibilityMode;\n\n  /**\n   * Show icons. Defaults to `true`.\n   */\n  icons?: boolean;\n\n  /**\n   * Tabbar color hints.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * iOS blur/material effect for the tabbar background when glass is not\n   * available.\n   */\n  blurEffect?: NativeNavigationBlurEffect;\n\n  /**\n   * Optional glass background behavior. Overrides `configure({ glass })` for\n   * this tabbar update.\n   */\n  glass?: NativeNavigationGlassOptions;\n\n  /**\n   * Opt into the iOS 26 Liquid Glass tint workaround that renders active and\n   * inactive tab items into baked images. This can affect badge positioning\n   * and icon sizing, so it is disabled by default.\n   */\n  experimentalBakedTintColors?: boolean;\n\n  /**\n   * Keep the iOS scroll-edge tabbar appearance from becoming transparent.\n   * Mirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option.\n   * Defaults to `false`.\n   */\n  disableTransparentOnScrollEdge?: boolean;\n\n  /**\n   * Disable the Android active tab indicator.\n   */\n  disableIndicator?: boolean;\n\n  /**\n   * Active tab indicator color on Android. `colors.indicator` is also\n   * supported.\n   */\n  indicatorColor?: string;\n\n  /**\n   * Tab press ripple color on Android. `colors.ripple` is also supported.\n   */\n  rippleColor?: string;\n\n  /**\n   * Badge background color. `colors.badgeBackground` is also supported.\n   */\n  badgeBackgroundColor?: string;\n\n  /**\n   * Badge text color. `colors.badgeText` is also supported.\n   */\n  badgeTextColor?: string;\n\n  /**\n   * Optional native tabbar layout and shape customization.\n   */\n  style?: NativeNavigationTabbarStyle;\n\n  /**\n   * Animate native tabbar changes.\n   */\n  animated?: boolean;\n}\n\n/**\n * Insets exposed to web content.\n */\nexport interface NativeNavigationInsets {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n  navbarHeight: number;\n  tabbarHeight: number;\n}\n\n/**\n * Returned by methods that may change safe content bounds.\n */\nexport interface NativeNavigationInsetsResult {\n  insets: NativeNavigationInsets;\n}\n\n/**\n * Begin a native transition transaction before JS changes route content.\n */\nexport interface NativeNavigationBeginTransitionOptions {\n  id?: string;\n  direction?: NativeNavigationTransitionDirection;\n  duration?: number;\n  /**\n   * Source rectangle for `zoom` transitions. Use viewport coordinates such as\n   * those returned by `Element.getBoundingClientRect()`.\n   */\n  sourceRect?: NativeNavigationRect;\n  /**\n   * Destination rectangle for shared-element-style `zoom` transitions.\n   */\n  targetRect?: NativeNavigationRect;\n  /**\n   * Corner radius used while animating a `zoom` transition.\n   */\n  cornerRadius?: number;\n}\n\n/**\n * Finish a native transition transaction after JS has changed route content.\n */\nexport interface NativeNavigationFinishTransitionOptions {\n  id?: string;\n  direction?: NativeNavigationTransitionDirection;\n  duration?: number;\n  /**\n   * Source rectangle for `zoom` transitions when no active source was recorded.\n   */\n  sourceRect?: NativeNavigationRect;\n  /**\n   * Destination rectangle for shared-element-style `zoom` transitions.\n   */\n  targetRect?: NativeNavigationRect;\n  /**\n   * Corner radius used while animating a `zoom` transition.\n   */\n  cornerRadius?: number;\n}\n\n/**\n * Native transition result.\n */\nexport interface NativeNavigationTransitionResult {\n  id: string;\n  direction: NativeNavigationTransitionDirection;\n  duration: number;\n}\n\n/**\n * Plugin version payload.\n */\nexport interface PluginVersionResult {\n  /**\n   * Version identifier returned by the platform implementation.\n   */\n  version: string;\n}\n\nexport interface NativeNavigationBackEvent {\n  source: 'navbar';\n}\n\nexport interface NativeNavigationBarItemTapEvent {\n  id: string;\n  title?: string;\n  placement: 'left' | 'right';\n}\n\nexport interface NativeNavigationTabSelectEvent {\n  id: string;\n  index: number;\n  title?: string;\n}\n\nexport interface NativeNavigationSafeAreaChangedEvent {\n  insets: NativeNavigationInsets;\n}\n\nexport interface NativeNavigationTransitionEvent {\n  id: string;\n  direction: NativeNavigationTransitionDirection;\n  duration: number;\n}\n\n/**\n * Framework-agnostic native navigation chrome API.\n */\nexport interface NativeNavigationPlugin {\n  /**\n   * Configure the native chrome host and content inset behavior.\n   */\n  configure(options?: NativeNavigationConfigureOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Render or update the native navbar.\n   */\n  setNavbar(options: NativeNavigationNavbarOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Render or update the native tabbar.\n   */\n  setTabbar(options: NativeNavigationTabbarOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Capture the current WebView and prepare a native transition.\n   */\n  beginTransition(options?: NativeNavigationBeginTransitionOptions): Promise<NativeNavigationTransitionResult>;\n\n  /**\n   * Animate from the captured WebView snapshot to the current live WebView.\n   */\n  finishTransition(options?: NativeNavigationFinishTransitionOptions): Promise<NativeNavigationTransitionResult>;\n\n  /**\n   * Returns the platform implementation version marker.\n   */\n  getPluginVersion(): Promise<PluginVersionResult>;\n\n  addListener(\n    eventName: 'navbarBack',\n    listenerFunc: (event: NativeNavigationBackEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'navbarItemTap',\n    listenerFunc: (event: NativeNavigationBarItemTapEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'tabSelect',\n    listenerFunc: (event: NativeNavigationTabSelectEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'safeAreaChanged',\n    listenerFunc: (event: NativeNavigationSafeAreaChangedEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'transitionStart',\n    listenerFunc: (event: NativeNavigationTransitionEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'transitionEnd',\n    listenerFunc: (event: NativeNavigationTransitionEvent) => void,\n  ): Promise<PluginListenerHandle>;\n}\n"]}
+{"version":3,"file":"definitions.js","sourceRoot":"","sources":["../../src/definitions.ts"],"names":[],"mappings":"","sourcesContent":["import type { PluginListenerHandle } from '@capacitor/core';\n\n/**\n * Platform rendering preference for the native bars.\n */\nexport type NativeNavigationPlatformStyle = 'auto' | 'ios' | 'android';\n\n/**\n * How the plugin exposes native bar sizes to web content.\n */\nexport type NativeNavigationContentInsetMode = 'css' | 'none';\n\n/**\n * Navigation animation direction.\n */\nexport type NativeNavigationTransitionDirection = 'forward' | 'back' | 'root' | 'tab' | 'zoom' | 'none';\n\n/**\n * Native material/blur effect preference.\n */\nexport type NativeNavigationBlurEffect =\n  | 'none'\n  | 'systemDefault'\n  | 'extraLight'\n  | 'light'\n  | 'dark'\n  | 'regular'\n  | 'prominent'\n  | 'systemUltraThinMaterial'\n  | 'systemThinMaterial'\n  | 'systemMaterial'\n  | 'systemThickMaterial'\n  | 'systemChromeMaterial'\n  | 'systemUltraThinMaterialLight'\n  | 'systemThinMaterialLight'\n  | 'systemMaterialLight'\n  | 'systemThickMaterialLight'\n  | 'systemChromeMaterialLight'\n  | 'systemUltraThinMaterialDark'\n  | 'systemThinMaterialDark'\n  | 'systemMaterialDark'\n  | 'systemThickMaterialDark'\n  | 'systemChromeMaterialDark';\n\n/**\n * Native glass background rendering preference.\n */\nexport type NativeNavigationGlassEffect = 'none' | 'liquidGlass';\n\n/**\n * Native glass background configuration.\n */\nexport interface NativeNavigationGlassOptions {\n  /**\n   * `liquidGlass` enables the Android 12+ live blurred WebView backdrop for\n   * native bars. Android 11 and older keep a translucent surface fallback. iOS\n   * uses the platform-owned Liquid Glass behavior.\n   */\n  effect?: NativeNavigationGlassEffect;\n\n  /**\n   * Android blur radius in native dp for `liquidGlass`. Defaults to `18`.\n   */\n  blurRadius?: number;\n\n  /**\n   * Alpha multiplier for the tint surface over the glass backdrop. Defaults to\n   * `0.62`.\n   */\n  surfaceAlpha?: number;\n}\n\n/**\n * Native tab label visibility behavior.\n */\nexport type NativeNavigationTabLabelVisibilityMode = 'auto' | 'selected' | 'labeled' | 'unlabeled';\n\n/**\n * A rectangle in WebView viewport coordinates, expressed in native points/dp.\n */\nexport interface NativeNavigationRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Native tabbar background shape.\n */\nexport type NativeNavigationTabbarShape = 'floating' | 'curve';\n\n/**\n * Native tab role for Liquid Glass tab bars.\n *\n * `search` (and `prominent` when the OS supports it) renders as a detached\n * trailing circular action beside the floating tab capsule — the Apple News /\n * Photos pattern. Only one detached trailing role is used; if multiple tabs\n * set `search` or `prominent`, the last one wins. Curve-shaped bars ignore\n * `role` and keep using the included center action instead.\n */\nexport type NativeNavigationTabRole = 'normal' | 'search' | 'prominent';\n\n/**\n * A serializable icon descriptor. Framework nodes are intentionally not accepted\n * because icons are rendered by native UI.\n */\nexport interface NativeNavigationIcon {\n  /**\n   * Cross-platform asset path or URL fallback.\n   */\n  src?: string;\n\n  /**\n   * Cross-platform inline SVG markup. The native renderers support common icon\n   * shapes such as path, line, polyline, polygon, circle, and rect. SVG icons\n   * are rendered as template images by default so native tint colors still\n   * apply.\n   */\n  svg?: string;\n\n  /**\n   * Preferred rendered icon width in native points/dp. Defaults to `24`.\n   */\n  width?: number;\n\n  /**\n   * Preferred rendered icon height in native points/dp. Defaults to `24`.\n   */\n  height?: number;\n\n  /**\n   * When `true`, native tint colors are applied to the rendered SVG/image.\n   * Defaults to `true`.\n   */\n  template?: boolean;\n\n  /**\n   * iOS-specific SF Symbol, bundled image name, or inline SVG.\n   */\n  ios?: {\n    /**\n     * SF Symbol name, for example `house.fill`.\n     */\n    sfSymbol?: string;\n\n    /**\n     * Bundled image name from the app asset catalog.\n     */\n    image?: string;\n\n    /**\n     * iOS-specific inline SVG markup.\n     */\n    svg?: string;\n  };\n\n  /**\n   * Android-specific drawable resource, asset name, or inline SVG.\n   */\n  android?: {\n    /**\n     * Drawable resource name without the `R.drawable.` prefix.\n     */\n    resource?: string;\n\n    /**\n     * Bundled image asset name.\n     */\n    image?: string;\n\n    /**\n     * Android-specific inline SVG markup.\n     */\n    svg?: string;\n  };\n}\n\n/**\n * Native bar colors. Use CSS-style hex strings (`#RRGGBB` or `#AARRGGBB`).\n */\nexport interface NativeNavigationColors {\n  /**\n   * When `true`, Android 12+ derives unspecified bar colors from Material You\n   * system palettes. Explicit color fields still win.\n   */\n  dynamic?: boolean;\n\n  /**\n   * Tint color for active buttons/items.\n   */\n  tint?: string;\n\n  /**\n   * Color for inactive tab items. Ignored on iOS 26+ unless\n   * `experimentalBakedTintColors` is enabled.\n   */\n  inactiveTint?: string;\n\n  /**\n   * Optional background tint. Ignored on iOS 26+ so UIKit can preserve the\n   * system Liquid Glass navigation appearance. On Android, alpha is honored.\n   * When `glass.effect` is not `liquidGlass`, floating tabbars still apply\n   * `glass.surfaceAlpha` (from `configure` / `setTabbar`) to the fill tint.\n   */\n  background?: string;\n\n  /**\n   * Title and label text color where the native platform supports it.\n   */\n  foreground?: string;\n\n  /**\n   * Badge background color for native tab badges.\n   */\n  badgeBackground?: string;\n\n  /**\n   * Badge text color for native tab badges.\n   */\n  badgeText?: string;\n\n  /**\n   * Active tab indicator color on Android.\n   */\n  indicator?: string;\n\n  /**\n   * Tab press ripple color on Android.\n   */\n  ripple?: string;\n}\n\n/**\n * Global plugin configuration.\n */\nexport interface NativeNavigationConfigureOptions {\n  /**\n   * Enables or disables the native chrome host.\n   */\n  enabled?: boolean;\n\n  /**\n   * Native style preference. `auto` uses the current platform.\n   */\n  platformStyle?: NativeNavigationPlatformStyle;\n\n  /**\n   * When `css`, the plugin writes CSS variables on `document.documentElement`.\n   */\n  contentInsetMode?: NativeNavigationContentInsetMode;\n\n  /**\n   * Default native transition duration in milliseconds.\n   */\n  animationDuration?: number;\n\n  /**\n   * Shared color hints for native bars.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * Shared glass background defaults for native bars.\n   */\n  glass?: NativeNavigationGlassOptions;\n}\n\n/**\n * A button shown in the native navbar.\n */\nexport interface NativeNavigationBarButton {\n  /**\n   * Stable id returned in `navbarItemTap`.\n   */\n  id: string;\n\n  /**\n   * Visible text label.\n   */\n  title?: string;\n\n  /**\n   * Native icon descriptor.\n   */\n  icon?: NativeNavigationIcon;\n\n  /**\n   * Whether the action is enabled. Defaults to `true`.\n   */\n  enabled?: boolean;\n}\n\n/**\n * Native back button configuration.\n */\nexport interface NativeNavigationBackButton {\n  /**\n   * Show the native back affordance.\n   */\n  visible?: boolean;\n\n  /**\n   * Optional back title.\n   */\n  title?: string;\n}\n\n/**\n * Native navbar state.\n */\nexport interface NativeNavigationNavbarOptions {\n  /**\n   * Hide the native navbar.\n   */\n  hidden?: boolean;\n\n  /**\n   * Main title.\n   */\n  title?: string;\n\n  /**\n   * Secondary title where supported by the platform.\n   */\n  subtitle?: string;\n\n  /**\n   * Prefer a large iOS title style.\n   */\n  large?: boolean;\n\n  /**\n   * Prefer transparent/scroll-edge style.\n   */\n  transparent?: boolean;\n\n  /**\n   * iOS blur/material effect for the navbar background when glass is not\n   * available. Defaults to `systemChromeMaterial` for transparent bars.\n   */\n  blurEffect?: NativeNavigationBlurEffect;\n\n  /**\n   * Optional glass background behavior. Overrides `configure({ glass })` for\n   * this navbar update.\n   */\n  glass?: NativeNavigationGlassOptions;\n\n  /**\n   * Back button state.\n   */\n  backButton?: NativeNavigationBackButton;\n\n  /**\n   * Left-side action buttons.\n   */\n  leftItems?: NativeNavigationBarButton[];\n\n  /**\n   * Right-side action buttons.\n   */\n  rightItems?: NativeNavigationBarButton[];\n\n  /**\n   * Navbar color hints.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * Animate native navbar changes.\n   */\n  animated?: boolean;\n}\n\n/**\n * A native tab item.\n */\nexport interface NativeNavigationTab {\n  /**\n   * Stable tab id returned in `tabSelect`.\n   */\n  id: string;\n\n  /**\n   * Visible tab label.\n   */\n  title?: string;\n\n  /**\n   * Native icon descriptor.\n   */\n  icon?: NativeNavigationIcon;\n\n  /**\n   * Optional selected-state icon.\n   */\n  selectedIcon?: NativeNavigationIcon;\n\n  /**\n   * Optional badge. Numeric badges are supported on both platforms; text badge\n   * support depends on platform capabilities.\n   */\n  badge?: string | number;\n\n  /**\n   * Whether the tab is enabled. Defaults to `true`.\n   */\n  enabled?: boolean;\n\n  /**\n   * Hide the tab item from the native tabbar. When the hidden tab is selected,\n   * native platform constraints may keep it visible until another tab is\n   * selected.\n   */\n  hidden?: boolean;\n\n  /**\n   * Optional tab role. On floating tabbars, `search` (or `prominent` when\n   * available) becomes a detached trailing circular action beside the capsule\n   * — including the iOS 26+ system Liquid Glass tab bar, Android floating\n   * layout, and the custom floating capsule path. Only one detached trailing\n   * role is used; if multiple tabs set `search` or `prominent`, the last one\n   * wins. Curve-shaped bars ignore `role` and keep using the included center\n   * action. Defaults to `normal`.\n   */\n  role?: NativeNavigationTabRole;\n}\n\n/**\n * Native tabbar layout and background shape options.\n */\nexport interface NativeNavigationTabbarStyle {\n  /**\n   * `floating` keeps the capsule tabbar. On iOS 26+ this uses the\n   * system-owned Liquid Glass `UITabBarController` unless a custom capsule\n   * path is required; earlier iOS and the custom capsule path use\n   * `UIGlassEffect` on iOS 26+ (blur material fallback otherwise). `curve`\n   * draws a full-width bar with an included center action.\n   */\n  shape?: NativeNavigationTabbarShape;\n\n  /**\n   * Bar height in native points/dp, not including the system bottom inset.\n   * Curve defaults to `49` on iOS (83pt once the home indicator is added) and\n   * `80` on Android (Material navigation bar). Floating defaults to `64`.\n   * Pass `height` to override either platform.\n   */\n  height?: number;\n\n  /**\n   * Horizontal margin in native points/dp. Defaults to `24` for `floating` and\n   * `0` for `curve`.\n   */\n  horizontalMargin?: number;\n\n  /**\n   * Maximum tabbar width in native points/dp. Defaults to `430` for `floating`;\n   * `curve` uses the available width unless this is set.\n   */\n  maxWidth?: number;\n\n  /**\n   * Bottom gap above the platform safe area in native points/dp. Defaults to\n   * `10` for `floating` and `0` for `curve`.\n   */\n  bottomGap?: number;\n\n  /**\n   * Background corner radius in native points/dp. Defaults to a capsule radius\n   * for `floating` and `0` for `curve`.\n   */\n  cornerRadius?: number;\n\n  /**\n   * Tab id promoted into the included center button for `curve`. Defaults to\n   * the middle tab.\n   */\n  centerItemId?: string;\n\n  /**\n   * Included center button diameter in native points/dp. Defaults to `56`.\n   */\n  centerButtonDiameter?: number;\n\n  /**\n   * Distance from the top of the center button to the top edge of the bar in\n   * native points/dp. Defaults to half of `centerButtonDiameter`.\n   */\n  centerButtonLift?: number;\n\n  /**\n   * Included center button color. Defaults to the active tint color.\n   */\n  centerButtonColor?: string;\n\n  /**\n   * Included center button icon color. Defaults to white.\n   */\n  centerButtonIconColor?: string;\n}\n\n/**\n * Native tabbar state.\n */\nexport interface NativeNavigationTabbarOptions {\n  /**\n   * Hide the native tabbar.\n   */\n  hidden?: boolean;\n\n  /**\n   * Tab definitions.\n   */\n  tabs?: NativeNavigationTab[];\n\n  /**\n   * Currently selected tab id.\n   */\n  selectedId?: string;\n\n  /**\n   * Show text labels. Defaults to `true`.\n   */\n  labels?: boolean;\n\n  /**\n   * Native label visibility mode. Overrides `labels` when provided.\n   */\n  labelVisibilityMode?: NativeNavigationTabLabelVisibilityMode;\n\n  /**\n   * Show icons. Defaults to `true`.\n   */\n  icons?: boolean;\n\n  /**\n   * Tabbar color hints.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * iOS blur/material effect for the tabbar background when glass is not\n   * available.\n   */\n  blurEffect?: NativeNavigationBlurEffect;\n\n  /**\n   * Optional glass background behavior. Overrides `configure({ glass })` for\n   * this tabbar update. On Android 12+, floating tabbars default to\n   * `liquidGlass` (live blur plus tint) when this field is omitted. Pass\n   * `effect: 'none'` for a flat translucent fill without blur.\n   */\n  glass?: NativeNavigationGlassOptions;\n\n  /**\n   * Opt into the iOS 26 Liquid Glass tint workaround that renders active and\n   * inactive tab items into baked images. This can affect badge positioning\n   * and icon sizing, so it is disabled by default.\n   */\n  experimentalBakedTintColors?: boolean;\n\n  /**\n   * Keep the iOS scroll-edge tabbar appearance from becoming transparent.\n   * Mirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option.\n   * Defaults to `false`.\n   */\n  disableTransparentOnScrollEdge?: boolean;\n\n  /**\n   * Disable the Android active tab indicator.\n   */\n  disableIndicator?: boolean;\n\n  /**\n   * Active tab indicator color on Android. `colors.indicator` is also\n   * supported.\n   */\n  indicatorColor?: string;\n\n  /**\n   * Tab press ripple color on Android. `colors.ripple` is also supported.\n   */\n  rippleColor?: string;\n\n  /**\n   * Badge background color. `colors.badgeBackground` is also supported.\n   */\n  badgeBackgroundColor?: string;\n\n  /**\n   * Badge text color. `colors.badgeText` is also supported.\n   */\n  badgeTextColor?: string;\n\n  /**\n   * Optional native tabbar layout and shape customization.\n   */\n  style?: NativeNavigationTabbarStyle;\n\n  /**\n   * Animate native tabbar changes.\n   */\n  animated?: boolean;\n}\n\n/**\n * Insets exposed to web content.\n */\nexport interface NativeNavigationInsets {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n  navbarHeight: number;\n  tabbarHeight: number;\n}\n\n/**\n * Returned by methods that may change safe content bounds.\n */\nexport interface NativeNavigationInsetsResult {\n  insets: NativeNavigationInsets;\n}\n\n/**\n * Begin a native transition transaction before JS changes route content.\n */\nexport interface NativeNavigationBeginTransitionOptions {\n  id?: string;\n  direction?: NativeNavigationTransitionDirection;\n  duration?: number;\n  /**\n   * Source rectangle for `zoom` transitions. Use viewport coordinates such as\n   * those returned by `Element.getBoundingClientRect()`.\n   */\n  sourceRect?: NativeNavigationRect;\n  /**\n   * Destination rectangle for shared-element-style `zoom` transitions.\n   */\n  targetRect?: NativeNavigationRect;\n  /**\n   * Corner radius used while animating a `zoom` transition.\n   */\n  cornerRadius?: number;\n}\n\n/**\n * Finish a native transition transaction after JS has changed route content.\n */\nexport interface NativeNavigationFinishTransitionOptions {\n  id?: string;\n  direction?: NativeNavigationTransitionDirection;\n  duration?: number;\n  /**\n   * Source rectangle for `zoom` transitions when no active source was recorded.\n   */\n  sourceRect?: NativeNavigationRect;\n  /**\n   * Destination rectangle for shared-element-style `zoom` transitions.\n   */\n  targetRect?: NativeNavigationRect;\n  /**\n   * Corner radius used while animating a `zoom` transition.\n   */\n  cornerRadius?: number;\n}\n\n/**\n * Native transition result.\n */\nexport interface NativeNavigationTransitionResult {\n  id: string;\n  direction: NativeNavigationTransitionDirection;\n  duration: number;\n}\n\n/**\n * Plugin version payload.\n */\nexport interface PluginVersionResult {\n  /**\n   * Version identifier returned by the platform implementation.\n   */\n  version: string;\n}\n\nexport interface NativeNavigationBackEvent {\n  source: 'navbar';\n}\n\nexport interface NativeNavigationBarItemTapEvent {\n  id: string;\n  title?: string;\n  placement: 'left' | 'right';\n}\n\nexport interface NativeNavigationTabSelectEvent {\n  id: string;\n  index: number;\n  title?: string;\n}\n\nexport interface NativeNavigationSafeAreaChangedEvent {\n  insets: NativeNavigationInsets;\n}\n\nexport interface NativeNavigationTransitionEvent {\n  id: string;\n  direction: NativeNavigationTransitionDirection;\n  duration: number;\n}\n\n/**\n * Framework-agnostic native navigation chrome API.\n */\nexport interface NativeNavigationPlugin {\n  /**\n   * Configure the native chrome host and content inset behavior.\n   */\n  configure(options?: NativeNavigationConfigureOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Render or update the native navbar.\n   */\n  setNavbar(options: NativeNavigationNavbarOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Render or update the native tabbar.\n   */\n  setTabbar(options: NativeNavigationTabbarOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Capture the current WebView and prepare a native transition.\n   */\n  beginTransition(options?: NativeNavigationBeginTransitionOptions): Promise<NativeNavigationTransitionResult>;\n\n  /**\n   * Animate from the captured WebView snapshot to the current live WebView.\n   */\n  finishTransition(options?: NativeNavigationFinishTransitionOptions): Promise<NativeNavigationTransitionResult>;\n\n  /**\n   * Returns the platform implementation version marker.\n   */\n  getPluginVersion(): Promise<PluginVersionResult>;\n\n  addListener(\n    eventName: 'navbarBack',\n    listenerFunc: (event: NativeNavigationBackEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'navbarItemTap',\n    listenerFunc: (event: NativeNavigationBarItemTapEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'tabSelect',\n    listenerFunc: (event: NativeNavigationTabSelectEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'safeAreaChanged',\n    listenerFunc: (event: NativeNavigationSafeAreaChangedEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'transitionStart',\n    listenerFunc: (event: NativeNavigationTransitionEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'transitionEnd',\n    listenerFunc: (event: NativeNavigationTransitionEvent) => void,\n  ): Promise<PluginListenerHandle>;\n}\n"]}

package/ios/Sources/NativeNavigationPlugin/NativeNavigationPlugin.swift

@@ -58,6 +58,9 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
     private var tabbarHeight: CGFloat = NativeNavigationTabbarStyleConfig().totalHeight
     private var navbarVisible = false
     private var tabbarVisible = false
+    private var tabbarSoftHidden = false
+    private var tabbarSkipImmediateSystemReveal = false
+    private var floatingTabBarWantsHidden = false
     private var contentInsetMode = "css"
     private var isEnabled = true
     private var defaultTransitionDuration: TimeInterval = 0.35
@@ -203,15 +206,36 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
             }
 
             let hidden = call.getBool("hidden", false)
+            let animated = call.getBool("animated", false)
             self.tabbarVisible = !hidden
 
             guard !hidden else {
-                self.hideTabBarChrome()
+                self.hideTabBarChrome(animated: animated)
                 self.updateInsetsAndNotify()
                 call.resolve(self.insetsResult())
                 return
             }
 
+            if self.tabbarSoftHidden {
+                self.tabbarSoftHidden = false
+                if animated {
+                    if nativeNavigationPrefersAnimatedSystemTabbarVisibility(
+                        animated: true,
+                        usesSystemLiquidGlass: self.usesSystemLiquidGlass,
+                        shape: self.tabbarStyle.shape == .curve ? "curve" : "floating"
+                    ) {
+                        self.tabbarSkipImmediateSystemReveal = true
+                        self.setSystemTabBarHidden(false, animated: true, syncSubviewState: false)
+                    } else {
+                        self.setFloatingTabBarVisibility(hidden: false, animated: true)
+                    }
+                } else if self.usesSystemLiquidGlass && self.tabbarStyle.shape != .curve {
+                    self.setSystemTabBarHidden(false, animated: false, syncSubviewState: true)
+                } else {
+                    self.setFloatingTabBarVisibility(hidden: false, animated: false)
+                }
+            }
+
             self.tabbarStyle = self.makeTabbarStyle(from: call)
             self.tabbarHeight = self.tabbarStyle.totalHeight
 
@@ -241,6 +265,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
                 self.applyTabBarAppearance(tabBar: tabBar, options: call)
                 if items.isEmpty {
                     self.tabbarVisible = false
+                    self.tabbarSkipImmediateSystemReveal = false
                     self.hideSystemTabBarChromeCompletely()
                 } else {
                     self.showTabBarChrome(tabBar)
@@ -904,18 +929,22 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         }
     }
 
-    private func setSystemTabBarHidden(_ hidden: Bool) {
+    private func setSystemTabBarHidden(_ hidden: Bool, animated: Bool = false, syncSubviewState: Bool = true) {
         guard let tabBarController = tabBarController else {
             return
         }
 
         let tabBar = tabBarController.tabBar
         if #available(iOS 18.0, *) {
-            tabBarController.setTabBarHidden(hidden, animated: false)
+            tabBarController.setTabBarHidden(hidden, animated: animated)
         } else {
             tabBar.isHidden = hidden
         }
 
+        guard syncSubviewState else {
+            return
+        }
+
         if hidden {
             setTabBarBackgroundSubviewsHidden(true, on: tabBar)
         } else {
@@ -943,7 +972,24 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         floatingTabBar?.isHidden = true
     }
 
-    private func hideTabBarChrome() {
+    private func hideTabBarChrome(animated: Bool = false) {
+        if nativeNavigationPrefersAnimatedSystemTabbarVisibility(
+            animated: animated,
+            usesSystemLiquidGlass: usesSystemLiquidGlass,
+            shape: tabbarStyle.shape == .curve ? "curve" : "floating"
+        ) {
+            tabbarSoftHidden = true
+            setSystemTabBarHidden(true, animated: true, syncSubviewState: false)
+            return
+        }
+
+        if animated {
+            tabbarSoftHidden = true
+            setFloatingTabBarVisibility(hidden: true, animated: true)
+            return
+        }
+
+        tabbarSoftHidden = false
         if usesSystemLiquidGlass && tabbarStyle.shape != .curve {
             hideSystemTabBarChromeCompletely()
         } else {
@@ -953,12 +999,51 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         }
     }
 
+    private func setFloatingTabBarVisibility(hidden: Bool, animated: Bool) {
+        floatingTabBarWantsHidden = hidden
+        let targets = [tabContainer, floatingTabBar].compactMap { $0 }
+        guard !targets.isEmpty else {
+            return
+        }
+
+        if !animated {
+            targets.forEach { view in
+                view.isHidden = hidden
+                view.alpha = hidden ? 0 : 1
+            }
+            return
+        }
+
+        if hidden {
+            UIView.animate(withDuration: 0.2, animations: {
+                targets.forEach { $0.alpha = 0 }
+            }, completion: { finished in
+                guard finished, self.floatingTabBarWantsHidden else {
+                    return
+                }
+                targets.forEach { $0.isHidden = true }
+            })
+            return
+        }
+
+        targets.forEach { view in
+            view.isHidden = false
+            view.alpha = 0
+        }
+        UIView.animate(withDuration: 0.2) {
+            targets.forEach { $0.alpha = 1 }
+        }
+    }
+
     private func showTabBarChrome(_ tabBar: UITabBar) {
         tabContainer?.isHidden = true
         floatingTabBar?.isHidden = true
         tabBarController?.view.isHidden = false
         if usesSystemLiquidGlass && tabbarStyle.shape != .curve {
-            setSystemTabBarHidden(false)
+            if !tabbarSkipImmediateSystemReveal {
+                setSystemTabBarHidden(false)
+            }
+            tabbarSkipImmediateSystemReveal = false
             liftWebViewOverlaysAboveSystemTabs()
             hostWebViewInSelectedSystemTab()
         } else {
@@ -2780,6 +2865,14 @@ func nativeNavigationUsesStationaryTransitionCrossfade(direction: String) -> Boo
     direction == "tab" || direction == "root" || direction == "none"
 }
 
+func nativeNavigationPrefersAnimatedSystemTabbarVisibility(
+    animated: Bool,
+    usesSystemLiquidGlass: Bool,
+    shape: String
+) -> Bool {
+    animated && usesSystemLiquidGlass && shape != "curve"
+}
+
 private func nativeNavigationNeedsTransitionSurface(_ color: UIColor?) -> Bool {
     guard let color else {
         return true

package/ios/Tests/NativeNavigationPluginTests/NativeNavigationTests.swift

@@ -97,4 +97,28 @@ class NativeNavigationTests: XCTestCase {
         XCTAssertFalse(nativeNavigationUsesStationaryTransitionCrossfade(direction: "forward"))
         XCTAssertFalse(nativeNavigationUsesStationaryTransitionCrossfade(direction: "back"))
     }
+
+    func testAnimatedSystemTabbarVisibilityUsesSoftHide() {
+        XCTAssertTrue(
+            nativeNavigationPrefersAnimatedSystemTabbarVisibility(
+                animated: true,
+                usesSystemLiquidGlass: true,
+                shape: "floating"
+            )
+        )
+        XCTAssertFalse(
+            nativeNavigationPrefersAnimatedSystemTabbarVisibility(
+                animated: false,
+                usesSystemLiquidGlass: true,
+                shape: "floating"
+            )
+        )
+        XCTAssertFalse(
+            nativeNavigationPrefersAnimatedSystemTabbarVisibility(
+                animated: true,
+                usesSystemLiquidGlass: true,
+                shape: "curve"
+            )
+        )
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capgo/capacitor-native-navigation",
-  "version": "8.4.4",
+  "version": "8.5.0",
   "description": "Capacitor plugin for native navbar, tabbar, safe-area handling, and WebView snapshot transitions.",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",