@capgo/capacitor-native-navigation 8.0.9 → 8.0.11

package/README.md

@@ -324,7 +324,7 @@ Inline SVG supports the icon-focused subset used by common sets such as Lucide a
 
 ## Platform Notes
 
-- iOS uses UIKit `UINavigationBar` and `UITabBar`. iOS 26+ leaves bar backgrounds to Apple's system Liquid Glass; earlier versions use native translucent/material fallback styling.
+- iOS uses UIKit `UINavigationBar` and `UITabBar`. iOS 26+ hosts the tabbar in a real `UITabBarController` so Apple owns the system Liquid Glass background; earlier versions use native translucent/material fallback styling.
 - Android uses an AppCompat `Toolbar` and a floating native tab capsule with edge-to-edge placement.
 - Web fallback does not draw native bars; it mirrors inset variables and events for development.
 
@@ -678,22 +678,23 @@ 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. |
-| **`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.                         |
-| **`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.                                                                                      |
+| **`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.                                                                                                              |
+| **`animated`**                       | <code>boolean</code>                                                                                      | Animate native tabbar changes.                                                                                                                                       |
 
 
 #### NativeNavigationTab

package/dist/docs.json

@@ -738,6 +738,13 @@
           ],
           "type": "NativeNavigationBlurEffect"
         },
+        {
+          "name": "disableTransparentOnScrollEdge",
+          "tags": [],
+          "docs": "Keep the iOS scroll-edge tabbar appearance from becoming transparent.\nMirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option.\nDefaults to `false`.",
+          "complexTypes": [],
+          "type": "boolean | undefined"
+        },
         {
           "name": "disableIndicator",
           "tags": [],

package/dist/esm/definitions.d.ts

@@ -311,6 +311,12 @@ export interface NativeNavigationTabbarOptions {
      * available.
      */
     blurEffect?: NativeNavigationBlurEffect;
+    /**
+     * Keep the iOS scroll-edge tabbar appearance from becoming transparent.
+     * Mirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option.
+     * Defaults to `false`.
+     */
+    disableTransparentOnScrollEdge?: boolean;
     /**
      * Disable the Android active tab indicator.
      */

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 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 * 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.\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/**\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   * 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/**\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   * 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   * 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 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 * 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.\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/**\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   * 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/**\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   * 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   * 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

@@ -23,7 +23,7 @@ private struct NativeNavigationZoomTransitionContext {
 
 // swiftlint:disable type_body_length
 @objc(NativeNavigationPlugin)
-public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelegate {
+public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarControllerDelegate, UITabBarDelegate {
     public let identifier = "NativeNavigationPlugin"
     public let jsName = "NativeNavigation"
     public let pluginMethods: [CAPPluginMethod] = [
@@ -42,6 +42,8 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
     private var tabContainer: UIView?
     private var tabEffectView: UIVisualEffectView?
     private var tabBar: UITabBar?
+    private var tabBarController: NativeNavigationTabController?
+    private var tabViewControllers: [UIViewController] = []
     private var navbarHeight: CGFloat = 44
     private var tabbarHeight: CGFloat = 64
     private let floatingTabbarHorizontalMargin: CGFloat = 24
@@ -56,6 +58,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
     private var navbarItemTitle: [String: String] = [:]
     private var tabIds: [String] = []
     private var tabTitles: [String] = []
+    private var suppressTabSelectEvent = false
     private var transitionSnapshot: UIView?
     private var activeTransitionId: String?
     private var activeTransitionDirection = "forward"
@@ -93,6 +96,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
             if !self.isEnabled {
                 self.navContainer?.isHidden = true
                 self.tabContainer?.isHidden = true
+                self.tabBarController?.view.isHidden = true
                 self.tabBar?.isHidden = true
             }
 
@@ -167,6 +171,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
 
             guard !hidden else {
                 self.tabContainer?.isHidden = true
+                self.tabBarController?.view.isHidden = true
                 self.tabBar?.isHidden = true
                 self.updateInsetsAndNotify()
                 call.resolve(self.insetsResult())
@@ -187,15 +192,20 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
                 icons: icons
             )
 
-            tabBar.items = items
-            if let selectedIndex = selectedIndex, selectedIndex < items.count {
-                tabBar.selectedItem = items[selectedIndex]
-            } else if tabBar.selectedItem == nil {
-                tabBar.selectedItem = items.first
+            if self.usesSystemLiquidGlass {
+                self.applySystemTabBarItems(items, selectedIndex: selectedIndex, animated: call.getBool("animated", false))
+            } else {
+                tabBar.items = items
+                if let selectedIndex = selectedIndex, selectedIndex < items.count {
+                    tabBar.selectedItem = items[selectedIndex]
+                } else if tabBar.selectedItem == nil {
+                    tabBar.selectedItem = items.first
+                }
             }
 
             self.applyTabBarAppearance(tabBar: tabBar, options: call)
             self.tabContainer?.isHidden = false
+            self.tabBarController?.view.isHidden = false
             tabBar.isHidden = false
             self.layoutChrome()
             self.updateInsetsAndNotify()
@@ -422,7 +432,18 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
     }
 
     public func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
-        let index = item.tag
+        notifyTabSelect(index: item.tag)
+    }
+
+    public func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
+        guard !suppressTabSelectEvent else {
+            return
+        }
+        let index = tabBarController.viewControllers?.firstIndex(of: viewController) ?? viewController.tabBarItem.tag
+        notifyTabSelect(index: index)
+    }
+
+    private func notifyTabSelect(index: Int) {
         guard index >= 0 && index < tabIds.count else {
             return
         }
@@ -474,6 +495,10 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
     }
 
     private func ensureTabBar() -> UITabBar {
+        if usesSystemLiquidGlass {
+            return ensureSystemTabBar()
+        }
+
         if let tabBar = tabBar {
             return tabBar
         }
@@ -484,28 +509,24 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
         container.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
         container.backgroundColor = .clear
 
-        if !usesSystemLiquidGlass {
-            container.layer.shadowColor = UIColor.black.cgColor
-            container.layer.shadowOpacity = 0.14
-            container.layer.shadowRadius = 18
-            container.layer.shadowOffset = CGSize(width: 0, height: 10)
+        container.layer.shadowColor = UIColor.black.cgColor
+        container.layer.shadowOpacity = 0.14
+        container.layer.shadowRadius = 18
+        container.layer.shadowOffset = CGSize(width: 0, height: 10)
 
-            let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .systemChromeMaterial))
-            effectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
-            effectView.isUserInteractionEnabled = false
-            effectView.clipsToBounds = true
-            container.addSubview(effectView)
-            self.tabEffectView = effectView
-        }
+        let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .systemChromeMaterial))
+        effectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        effectView.isUserInteractionEnabled = false
+        effectView.clipsToBounds = true
+        container.addSubview(effectView)
+        self.tabEffectView = effectView
 
         let bar = UITabBar()
         bar.isTranslucent = true
-        if !usesSystemLiquidGlass {
-            bar.backgroundColor = .clear
-            bar.backgroundImage = UIImage()
-            bar.shadowImage = UIImage()
-            bar.clipsToBounds = true
-        }
+        bar.backgroundColor = .clear
+        bar.backgroundImage = UIImage()
+        bar.shadowImage = UIImage()
+        bar.clipsToBounds = true
         bar.delegate = self
         bar.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
         container.addSubview(bar)
@@ -515,6 +536,52 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
         return bar
     }
 
+    private func ensureSystemTabBar() -> UITabBar {
+        if let tabBarController = tabBarController {
+            return tabBarController.tabBar
+        }
+
+        let controller = NativeNavigationTabController()
+        controller.delegate = self
+        controller.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        controller.view.isHidden = !tabbarVisible
+
+        if let parent = bridge?.viewController {
+            parent.addChild(controller)
+            parent.view.addSubview(controller.view)
+            controller.didMove(toParent: parent)
+        }
+
+        self.tabBarController = controller
+        self.tabBar = controller.tabBar
+        return controller.tabBar
+    }
+
+    private func applySystemTabBarItems(_ items: [UITabBarItem], selectedIndex: Int?, animated: Bool) {
+        guard let tabBarController = tabBarController else {
+            return
+        }
+
+        let previousSelectedIndex = tabBarController.selectedIndex
+        let controllers = items.map { item -> UIViewController in
+            let controller = NativeNavigationTabContentController()
+            controller.tabBarItem = item
+            return controller
+        }
+        let shouldAnimate = animated && tabBarController.viewControllers?.count == controllers.count
+
+        suppressTabSelectEvent = true
+        tabBarController.setViewControllers(controllers, animated: shouldAnimate)
+        if !controllers.isEmpty {
+            let fallbackIndex = selectedIndex ?? previousSelectedIndex
+            let index = min(max(fallbackIndex, 0), controllers.count - 1)
+            tabBarController.selectedIndex = index
+        }
+        suppressTabSelectEvent = false
+
+        tabViewControllers = controllers
+    }
+
     private func makeBarButtonItems(_ rawItems: [[String: Any]], placement: String) -> [UIBarButtonItem] {
         return rawItems.map { rawItem in
             let id = rawItem["id"] as? String ?? UUID().uuidString
@@ -780,6 +847,30 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
     }
 
     private func applyTabBarAppearance(tabBar: UITabBar, options call: CAPPluginCall) {
+        if usesSystemLiquidGlass {
+            let standardAppearance = UITabBarAppearance()
+            configureSystemTabBarStandardBackground(standardAppearance)
+            applyTabBarColorOptions(standardAppearance, tabBar: tabBar, options: call)
+            applyTabBarBadgeOptions(standardAppearance, options: call)
+
+            let scrollEdgeAppearance = UITabBarAppearance()
+            configureSystemTabBarScrollEdgeBackground(scrollEdgeAppearance, options: call)
+            applyTabBarColorOptions(scrollEdgeAppearance, tabBar: tabBar, options: call)
+            applyTabBarBadgeOptions(scrollEdgeAppearance, options: call)
+
+            tabBar.standardAppearance = standardAppearance
+            if #available(iOS 15.0, *) {
+                tabBar.scrollEdgeAppearance = scrollEdgeAppearance
+            }
+            tabBar.items?.forEach { item in
+                item.standardAppearance = standardAppearance
+                if #available(iOS 15.0, *) {
+                    item.scrollEdgeAppearance = scrollEdgeAppearance
+                }
+            }
+            return
+        }
+
         let appearance = UITabBarAppearance()
         configureTabBarBackground(appearance, options: call)
         applyTabBarColorOptions(appearance, tabBar: tabBar, options: call)
@@ -792,19 +883,27 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
     }
 
     private func configureTabBarBackground(_ appearance: UITabBarAppearance, options call: CAPPluginCall) {
-        if usesSystemLiquidGlass {
-            appearance.configureWithDefaultBackground()
+        appearance.configureWithDefaultBackground()
+        if let effect = blurEffect(from: call.getString("blurEffect"), fallback: nil) {
+            appearance.configureWithTransparentBackground()
+            appearance.backgroundColor = .clear
+            tabEffectView?.effect = effect
+            tabEffectView?.isHidden = false
+        } else {
             tabEffectView?.isHidden = true
+        }
+    }
+
+    private func configureSystemTabBarStandardBackground(_ appearance: UITabBarAppearance) {
+        appearance.configureWithDefaultBackground()
+    }
+
+    private func configureSystemTabBarScrollEdgeBackground(_ appearance: UITabBarAppearance, options call: CAPPluginCall) {
+        if call.getBool("disableTransparentOnScrollEdge", false) {
+            configureSystemTabBarStandardBackground(appearance)
         } else {
-            appearance.configureWithDefaultBackground()
-            if let effect = blurEffect(from: call.getString("blurEffect"), fallback: nil) {
-                appearance.configureWithTransparentBackground()
-                appearance.backgroundColor = .clear
-                tabEffectView?.effect = effect
-                tabEffectView?.isHidden = false
-            } else {
-                tabEffectView?.isHidden = true
-            }
+            appearance.configureWithTransparentBackground()
+            appearance.shadowColor = .clear
         }
     }
 
@@ -888,32 +987,23 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
         }
 
         if let container = tabContainer {
-            if usesSystemLiquidGlass {
-                container.frame = CGRect(
-                    x: 0,
-                    y: height - safeInsets.bottom - tabbarHeight,
-                    width: width,
-                    height: tabbarHeight + safeInsets.bottom
-                )
-                container.layer.cornerRadius = 0
-                container.layer.shadowOpacity = 0
-                container.layer.shadowPath = nil
-                tabEffectView?.isHidden = true
-                tabBar?.frame = container.bounds
-                tabBar?.layer.cornerRadius = 0
-            } else {
-                let availableWidth = max(0, width - (floatingTabbarHorizontalMargin * 2))
-                let tabbarWidth = min(availableWidth, floatingTabbarMaxWidth)
-                let originX = (width - tabbarWidth) / 2
-                let originY = height - safeInsets.bottom - floatingTabbarBottomGap - tabbarHeight
-                container.frame = CGRect(x: originX, y: originY, width: tabbarWidth, height: tabbarHeight)
-                container.layer.cornerRadius = tabbarHeight / 2
-                container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: tabbarHeight / 2).cgPath
-                tabEffectView?.frame = container.bounds
-                tabEffectView?.layer.cornerRadius = tabbarHeight / 2
-                tabBar?.frame = container.bounds
-                tabBar?.layer.cornerRadius = tabbarHeight / 2
-            }
+            let availableWidth = max(0, width - (floatingTabbarHorizontalMargin * 2))
+            let tabbarWidth = min(availableWidth, floatingTabbarMaxWidth)
+            let originX = (width - tabbarWidth) / 2
+            let originY = height - safeInsets.bottom - floatingTabbarBottomGap - tabbarHeight
+            container.frame = CGRect(x: originX, y: originY, width: tabbarWidth, height: tabbarHeight)
+            container.layer.cornerRadius = tabbarHeight / 2
+            container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: tabbarHeight / 2).cgPath
+            tabEffectView?.frame = container.bounds
+            tabEffectView?.layer.cornerRadius = tabbarHeight / 2
+            tabBar?.frame = container.bounds
+            tabBar?.layer.cornerRadius = tabbarHeight / 2
+        }
+
+        if let tabBarController = tabBarController {
+            tabBarController.view.frame = CGRect(x: 0, y: 0, width: width, height: height)
+            tabBarController.view.setNeedsLayout()
+            tabBarController.view.layoutIfNeeded()
         }
 
         bringChromeToFront()
@@ -926,6 +1016,9 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
         if let tabContainer = tabContainer {
             bridge?.viewController?.view.bringSubviewToFront(tabContainer)
         }
+        if let tabBarController = tabBarController {
+            bridge?.viewController?.view.bringSubviewToFront(tabBarController.view)
+        }
     }
 
     private func colorValue(_ value: Any?) -> UIColor? {
@@ -1007,9 +1100,11 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDelega
 
     private func currentInsets() -> [String: Any] {
         let safeInsets = bridge?.viewController?.view.safeAreaInsets ?? .zero
-        let navHeight = navbarVisible ? navbarHeight + safeInsets.top : 0
-        let tabbarGap = usesSystemLiquidGlass ? 0 : floatingTabbarBottomGap
-        let tabHeight = tabbarVisible ? tabbarHeight + safeInsets.bottom + tabbarGap : 0
+        let navHeight = isEnabled && navbarVisible ? navbarHeight + safeInsets.top : 0
+        let nativeTabHeight = max(tabBar?.frame.height ?? 0, 49 + safeInsets.bottom)
+        let tabHeight = isEnabled && tabbarVisible
+            ? (usesSystemLiquidGlass ? nativeTabHeight : tabbarHeight + safeInsets.bottom + floatingTabbarBottomGap)
+            : 0
         return [
             "top": navHeight,
             "right": safeInsets.right,
@@ -1137,6 +1232,44 @@ private final class NativeNavigationBar: UINavigationBar {
     }
 }
 
+private final class NativeNavigationTabController: UITabBarController {
+    override func loadView() {
+        let view = NativeNavigationTabControllerView()
+        view.backgroundColor = .clear
+        view.isOpaque = false
+        self.view = view
+    }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        view.backgroundColor = .clear
+        view.isOpaque = false
+        tabBar.isTranslucent = true
+        (view as? NativeNavigationTabControllerView)?.tabBar = tabBar
+    }
+}
+
+private final class NativeNavigationTabControllerView: UIView {
+    weak var tabBar: UITabBar?
+
+    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
+        guard let tabBar = tabBar, !tabBar.isHidden, tabBar.alpha > 0.01 else {
+            return false
+        }
+        let tabPoint = convert(point, to: tabBar)
+        return tabBar.point(inside: tabPoint, with: event)
+    }
+}
+
+private final class NativeNavigationTabContentController: UIViewController {
+    override func loadView() {
+        let view = UIView()
+        view.backgroundColor = .clear
+        view.isOpaque = false
+        self.view = view
+    }
+}
+
 private final class SVGIconRenderer: NSObject, XMLParserDelegate {
     private let context: CGContext
     private var styleStack = [SVGRenderStyle()]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capgo/capacitor-native-navigation",
-  "version": "8.0.9",
+  "version": "8.0.11",
   "description": "Capacitor plugin for native navbar, tabbar, and route transition chrome over a WebView.",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",