@capgo/capacitor-native-navigation 8.4.5 → 8.6.0

package/README.md

@@ -3,7 +3,7 @@
 <a href="https://capgo.app/?ref=plugin_native_navigation"><img src="https://capgo.app/readme-banner.svg?repo=Cap-go/capacitor-native-navigation" alt="Capgo - Instant updates for Capacitor" /></a>
 
 <div align="center">
-  <p><b>Capgo</b>: open-source live updates for Ionic and Capacitor apps. Ship OTA fixes and features instantly, without waiting for app store review.</p>
+  <p><b>Capgo</b>: push fixes to your Capacitor users in minutes, build signed iOS and Android apps without a Mac, and roll back in one click.</p>
   <h2><a href="https://capgo.app/register/?ref=plugin_native_navigation">➡️ Get started for free</a></h2>
   <p>14-day unlimited free trial. No credit card required</p>
   <p><a href="https://capgo.app/consulting/?ref=plugin_native_navigation">Missing a feature? We'll build the plugin for you 💪</a></p>
@@ -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

@@ -36,6 +36,7 @@ import androidx.annotation.RequiresApi;
 import androidx.appcompat.content.res.AppCompatResources;
 import androidx.appcompat.widget.Toolbar;
 import androidx.core.graphics.PathParser;
+import androidx.core.widget.TextViewCompat;
 import com.getcapacitor.JSArray;
 import com.getcapacitor.JSObject;
 import com.getcapacitor.Plugin;
@@ -61,6 +62,11 @@ public class NativeNavigationPlugin extends Plugin {
 
     private static final int DEFAULT_NAVBAR_DP = 56;
     private static final int DEFAULT_TABBAR_DP = 64;
+    private static final int TAB_LABEL_TEXT_SP = 12;
+    private static final int TAB_CONTENT_PADDING_DP = 4;
+    private static final int INDICATOR_HORIZONTAL_PADDING_DP = 12;
+    private static final int INDICATOR_VERTICAL_PADDING_DP = 6;
+    private static final int INDICATOR_SLOT_INSET_DP = 2;
     private static final int DEFAULT_TRANSITION_MS = 350;
     private static final int MENU_ITEM_BASE = 10_000;
     private static final int DEFAULT_TABBAR_BACKGROUND_COLOR = Color.WHITE;
@@ -81,6 +87,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 +112,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;
 
@@ -124,9 +132,11 @@ 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);
+            tabbarGlassOptions = resolveTabbarGlassOptions(call);
             Double duration = call.getDouble("animationDuration");
             if (duration != null) {
                 defaultTransitionMs = Math.max(0, duration.intValue());
@@ -218,17 +228,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;
@@ -246,7 +249,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);
@@ -276,6 +278,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.
@@ -317,14 +320,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());
         });
@@ -762,6 +759,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());
@@ -843,7 +844,7 @@ public class NativeNavigationPlugin extends Plugin {
     }
 
     private FrameLayout makeTabButton(NativeTabItem item, boolean selected, boolean showLabel, boolean icons, boolean center) {
-        FrameLayout button = new FrameLayout(getContext());
+        TabButton button = new TabButton(getContext());
         button.setClipChildren(false);
         button.setClipToPadding(false);
         button.setForeground(selectableItemBackground());
@@ -857,25 +858,33 @@ public class NativeNavigationPlugin extends Plugin {
             button.addView(centerFill, new FrameLayout.LayoutParams(centerFillDiameter, centerFillDiameter, Gravity.CENTER));
         }
 
+        Drawable currentIcon = selected && item.selectedIcon != null ? item.selectedIcon : item.icon;
+        boolean labelVisible = center ? showLabel && (currentIcon == null || !icons) : showLabel;
+        boolean iconVisible = icons && currentIcon != null;
+        // Measured with the bold selected style for every tab so the slots don't shift when the selection changes.
+        int contentWidth = indicatorContentWidth(item.title, labelVisible, iconVisible);
+        button.preferredWidth = contentWidth + dp(INDICATOR_HORIZONTAL_PADDING_DP + INDICATOR_SLOT_INSET_DP) * 2;
+
         if (!center && selected && !tabbarDisableIndicator) {
             GradientDrawable selectedBackground = new GradientDrawable();
-            selectedBackground.setShape(GradientDrawable.OVAL);
+            selectedBackground.setShape(GradientDrawable.RECTANGLE);
             selectedBackground.setColor(TabbarChromeSupport.resolveSelectedIndicatorColor(tabbarIndicatorColor, tintColor));
-            View selectedCircle = new View(getContext());
-            selectedCircle.setBackground(selectedBackground);
-            button.addView(selectedCircle, new FrameLayout.LayoutParams(dp(58), dp(58), Gravity.CENTER));
+            TabIndicatorView indicator = new TabIndicatorView(getContext(), contentWidth, indicatorContentHeight(labelVisible, iconVisible));
+            indicator.setBackground(selectedBackground);
+            button.addView(
+                indicator,
+                new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER)
+            );
         }
 
         LinearLayout content = new LinearLayout(getContext());
         content.setOrientation(LinearLayout.VERTICAL);
         content.setGravity(Gravity.CENTER);
-        content.setPadding(dp(4), dp(4), dp(4), dp(4));
+        content.setPadding(dp(TAB_CONTENT_PADDING_DP), dp(TAB_CONTENT_PADDING_DP), dp(TAB_CONTENT_PADDING_DP), dp(TAB_CONTENT_PADDING_DP));
         button.addView(content, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
 
-        Drawable currentIcon = selected && item.selectedIcon != null ? item.selectedIcon : item.icon;
-        boolean labelVisible = center ? showLabel && (currentIcon == null || !icons) : showLabel;
         int itemColor = center ? tabbarStyle.centerButtonIconColor : (selected ? tintColor : inactiveTintColor);
-        if (icons && currentIcon != null) {
+        if (iconVisible) {
             Drawable icon = currentIcon.mutate();
             icon.setTint(itemColor);
             ImageView image = new ImageView(getContext());
@@ -891,10 +900,13 @@ public class NativeNavigationPlugin extends Plugin {
             TextView label = new TextView(getContext());
             label.setText(item.title);
             label.setTextColor(itemColor);
-            label.setTextSize(12);
+            label.setTextSize(TAB_LABEL_TEXT_SP);
             label.setTypeface(Typeface.DEFAULT, selected ? Typeface.BOLD : Typeface.NORMAL);
             label.setGravity(Gravity.CENTER);
-            label.setSingleLine(true);
+            // maxLines rather than singleLine: autosize is ignored on a single-line (horizontally scrolling) TextView.
+            label.setMaxLines(1);
+            // Shrink long titles to fit the tab instead of cutting them off.
+            TextViewCompat.setAutoSizeTextTypeUniformWithConfiguration(label, 9, TAB_LABEL_TEXT_SP, 1, TypedValue.COMPLEX_UNIT_SP);
             content.addView(label, new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dp(18)));
         }
 
@@ -924,6 +936,75 @@ public class NativeNavigationPlugin extends Plugin {
         return button;
     }
 
+    /** Width of the selected item's icon or label (whichever is wider), before the indicator padding. */
+    private int indicatorContentWidth(String title, boolean labelVisible, boolean iconVisible) {
+        int width = iconVisible ? dp(24) : 0;
+        if (labelVisible && title != null) {
+            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
+            paint.setTypeface(Typeface.DEFAULT_BOLD);
+            paint.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, TAB_LABEL_TEXT_SP, getContext().getResources().getDisplayMetrics()));
+            width = Math.max(width, (int) Math.ceil(paint.measureText(title)));
+        }
+        return width;
+    }
+
+    private int indicatorContentHeight(boolean labelVisible, boolean iconVisible) {
+        int height = 0;
+        if (iconVisible) {
+            height += dp(24);
+        }
+        if (labelVisible) {
+            height += dp(18) + (iconVisible ? dp(2) : 0);
+        }
+        return height;
+    }
+
+    /** Tab item that reports how wide it wants to be, so the tabbar can size slots to their content. */
+    private static final class TabButton extends FrameLayout {
+
+        int preferredWidth = 0;
+
+        TabButton(Context context) {
+            super(context);
+        }
+    }
+
+    /** Selected-tab capsule that wraps the item's icon and label with padding, kept inside its tab slot. */
+    private static final class TabIndicatorView extends View {
+
+        private final int contentWidth;
+        private final int contentHeight;
+
+        TabIndicatorView(Context context, int contentWidth, int contentHeight) {
+            super(context);
+            this.contentWidth = contentWidth;
+            this.contentHeight = contentHeight;
+        }
+
+        @Override
+        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+            int slotWidth = MeasureSpec.getSize(widthMeasureSpec);
+            int slotHeight = MeasureSpec.getSize(heightMeasureSpec);
+            int height = contentHeight + dp(INDICATOR_VERTICAL_PADDING_DP) * 2;
+            if (slotHeight > 0) {
+                height = Math.min(height, slotHeight);
+            }
+            int width = Math.max(height, contentWidth + dp(INDICATOR_HORIZONTAL_PADDING_DP) * 2);
+            if (slotWidth > 0) {
+                width = Math.min(width, slotWidth - dp(INDICATOR_SLOT_INSET_DP) * 2);
+            }
+            setMeasuredDimension(width, height);
+            Drawable background = getBackground();
+            if (background instanceof GradientDrawable) {
+                ((GradientDrawable) background).setCornerRadius(height / 2f);
+            }
+        }
+
+        private int dp(int value) {
+            return Math.round(value * getResources().getDisplayMetrics().density);
+        }
+    }
+
     private Drawable iconFrom(JSONObject descriptor) {
         if (descriptor == null) {
             return null;
@@ -1218,11 +1299,7 @@ public class NativeNavigationPlugin extends Plugin {
                 return;
             }
 
-            int count = Math.max(getChildCount(), 1);
-            int childWidth = width / count;
-            for (int index = 0; index < getChildCount(); index++) {
-                measureChildExact(getChildAt(index), childWidth, height);
-            }
+            measureRange(0, getChildCount(), width, height);
             setMeasuredDimension(width, height);
         }
 
@@ -1285,28 +1362,56 @@ public class NativeNavigationPlugin extends Plugin {
         }
 
         private void measureRange(int start, int end, int width, int height) {
-            int count = Math.max(0, end - start);
-            if (count == 0) {
-                return;
-            }
-            int childWidth = Math.max(0, width / count);
+            int[] widths = slotWidths(start, end, width);
             for (int index = start; index < end; index++) {
-                measureChildExact(getChildAt(index), childWidth, height);
+                measureChildExact(getChildAt(index), widths[index - start], height);
             }
         }
 
         private void layoutRange(int start, int end, int left, int top, int width, int height) {
-            int count = Math.max(0, end - start);
-            if (count == 0) {
-                return;
-            }
-            int childWidth = Math.max(0, width / count);
+            int[] widths = slotWidths(start, end, width);
+            int childLeft = left;
             for (int index = start; index < end; index++) {
-                int childLeft = left + (index - start) * childWidth;
+                int childWidth = widths[index - start];
                 getChildAt(index).layout(childLeft, top, childLeft + childWidth, top + height);
+                childLeft += childWidth;
             }
         }
 
+        /**
+         * Each tab gets the width its content needs; leftover space is shared equally so the gaps stay even. When the
+         * bar is too narrow, slots shrink in proportion and long labels autosize down.
+         */
+        private int[] slotWidths(int start, int end, int width) {
+            int count = Math.max(0, end - start);
+            int[] widths = new int[count];
+            if (count == 0) {
+                return widths;
+            }
+            int total = 0;
+            for (int index = 0; index < count; index++) {
+                View child = getChildAt(start + index);
+                int preferred = child instanceof TabButton ? ((TabButton) child).preferredWidth : 0;
+                widths[index] = Math.max(preferred, 0);
+                total += widths[index];
+            }
+            if (total <= 0) {
+                for (int index = 0; index < count; index++) {
+                    widths[index] = width / count;
+                }
+            } else if (total <= width) {
+                int extra = (width - total) / count;
+                for (int index = 0; index < count; index++) {
+                    widths[index] += extra;
+                }
+            } else {
+                for (int index = 0; index < count; index++) {
+                    widths[index] = (int) ((long) widths[index] * width / total);
+                }
+            }
+            return widths;
+        }
+
         private void measureChildExact(View child, int width, int height) {
             child.measure(
                 MeasureSpec.makeMeasureSpec(Math.max(0, width), MeasureSpec.EXACTLY),
@@ -1650,11 +1755,14 @@ public class NativeNavigationPlugin extends Plugin {
             if (tabbarContainer != null) {
                 tabbarContainer.setBackgroundColor(Color.TRANSPARENT);
             }
-            hideGlassBackground(null, tabbarGlassSurface);
+            if (tabbarGlassSurface != null) {
+                tabbarGlassSurface.setBackground(chromeBackgroundDrawable(drawColor, 0f));
+                tabbarGlassSurface.setVisibility(View.VISIBLE);
+            }
             if (tabbarGlassBackdrop != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
                 View webView = getBridge() == null ? null : getBridge().getWebView();
                 tabbarGlassBackdrop.setClipPathProvider((width, height) -> tabbar.backgroundPath(width, height));
-                tabbarGlassBackdrop.configure(webView, dp(resolvedGlassOptions.blurRadiusDp), drawColor);
+                tabbarGlassBackdrop.configure(webView, dp(resolvedGlassOptions.blurRadiusDp), Color.TRANSPARENT);
                 tabbarGlassBackdrop.setVisibility(View.VISIBLE);
             } else if (tabbarGlassBackdrop != null) {
                 tabbarGlassBackdrop.setClipPathProvider((width, height) -> tabbar.backgroundPath(width, height));
@@ -1671,15 +1779,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() {
@@ -1834,7 +1963,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(
@@ -1857,7 +1987,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,
@@ -1865,7 +1995,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;
@@ -1907,6 +2037,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();
@@ -2079,26 +2300,37 @@ public class NativeNavigationPlugin extends Plugin {
         return Math.max(0, rawNavigationBarInset() - contentRootBottomOffset());
     }
 
+    // API 30+ reads the currently visible bars so a hidden navigation bar (immersive mode) gives the space back.
     private int rawStatusBarInset() {
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-            WindowInsets insets = getActivity().getWindow().getDecorView().getRootWindowInsets();
-            if (insets != null) {
-                return insets.getStableInsetTop();
+        WindowInsets insets = rootWindowInsets();
+        if (insets != null) {
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+                return insets.getInsets(WindowInsets.Type.statusBars() | WindowInsets.Type.displayCutout()).top;
             }
+            return insets.getStableInsetTop();
         }
         return systemDimension("status_bar_height");
     }
 
     private int rawNavigationBarInset() {
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-            WindowInsets insets = getActivity().getWindow().getDecorView().getRootWindowInsets();
-            if (insets != null) {
-                return insets.getStableInsetBottom();
+        WindowInsets insets = rootWindowInsets();
+        if (insets != null) {
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+                return insets.getInsets(WindowInsets.Type.navigationBars()).bottom;
             }
+            return insets.getStableInsetBottom();
         }
         return systemDimension("navigation_bar_height");
     }
 
+    private WindowInsets rootWindowInsets() {
+        Activity activity = getActivity();
+        if (activity == null || Build.VERSION.SDK_INT < Build.VERSION_CODES.M) {
+            return null;
+        }
+        return activity.getWindow().getDecorView().getRootWindowInsets();
+    }
+
     private int contentRootTopOffset() {
         FrameLayout root = contentRoot();
         if (root == null || !root.isLaidOut()) {
@@ -2136,6 +2368,16 @@ public class NativeNavigationPlugin extends Plugin {
                 view.post(this::updateInsetsAndNotify);
             }
         });
+        // Showing or hiding a system bar changes the insets without necessarily moving the content root
+        // (edge-to-edge apps). A zero-size probe hears every inset dispatch without replacing anyone's listener.
+        View insetsProbe = new View(getContext());
+        insetsProbe.setOnApplyWindowInsetsListener((view, insets) -> {
+            if (navbarVisible || tabbarVisible) {
+                view.post(this::updateInsetsAndNotify);
+            }
+            return insets;
+        });
+        root.addView(insetsProbe, new FrameLayout.LayoutParams(0, 0));
     }
 
     private int systemDimension(String name) {

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

@@ -2,7 +2,6 @@
 
 import Foundation
 import Capacitor
-import ObjectiveC
 import UIKit
 
 private struct NativeNavigationTransitionContext {
@@ -58,6 +57,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 +205,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 +264,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 +928,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 +971,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 +998,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 {
@@ -1967,44 +2051,25 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
     }
 
     private func liquidGlassEffect() -> UIVisualEffect? {
-        guard usesSystemLiquidGlass,
-              let effectClass = NSClassFromString("UIGlassEffect") else {
+        guard usesSystemLiquidGlass else {
             return nil
         }
-
-        let styleSelector = NSSelectorFromString("effectWithStyle:")
-        if let method = class_getClassMethod(effectClass, styleSelector) {
-            typealias EffectWithStyle = @convention(c) (AnyClass, Selector, Int) -> AnyObject?
-            let factory = unsafeBitCast(method_getImplementation(method), to: EffectWithStyle.self)
-            if let effect = factory(effectClass, styleSelector, 0) as? UIVisualEffect {
-                return effect
-            }
-        }
-
-        if let objectType = effectClass as? NSObject.Type {
-            return objectType.init() as? UIVisualEffect
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) {
+            return UIGlassEffect(style: .regular)
         }
-
+        #endif
         return nil
     }
 
     private func configureGlassBarButtonItem(_ item: UIBarButtonItem, id: String) {
-        guard #available(iOS 26.0, *) else {
-            return
-        }
-
-        // Keep older SDK builds working while adopting the native iOS 26 bar
-        // button Liquid Glass grouping APIs when the runtime exposes them.
-        let object = item as NSObject
-        if object.responds(to: NSSelectorFromString("setIdentifier:")) {
-            object.setValue(id, forKey: "identifier")
-        }
-        if object.responds(to: NSSelectorFromString("setSharesBackground:")) {
-            object.setValue(true, forKey: "sharesBackground")
-        }
-        if object.responds(to: NSSelectorFromString("setHidesSharedBackground:")) {
-            object.setValue(false, forKey: "hidesSharedBackground")
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) {
+            item.identifier = id
+            item.sharesBackground = true
+            item.hidesSharedBackground = false
         }
+        #endif
     }
 
     private func currentInsets() -> [String: Any] {
@@ -2780,6 +2845,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.5",
+  "version": "8.6.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",