@capgo/capacitor-native-navigation 8.2.1 → 8.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +44 -28
  2. package/android/src/main/java/app/capgo/nativenavigation/NativeNavigationPlugin.java +412 -15
  3. package/dist/docs.json +15 -1
  4. package/dist/esm/components.js +2 -0
  5. package/dist/esm/components.js.map +1 -1
  6. package/dist/esm/definitions.d.ts +14 -1
  7. package/dist/esm/definitions.js.map +1 -1
  8. package/dist/plugin.cjs.js +2 -0
  9. package/dist/plugin.cjs.js.map +1 -1
  10. package/dist/plugin.js +2 -0
  11. package/dist/plugin.js.map +1 -1
  12. package/ios/Sources/NativeNavigationPlugin/NativeNavigationPlugin.swift +234 -45
  13. package/package.json +1 -1
package/README.md CHANGED
@@ -85,6 +85,20 @@ Native navbar, tabbar, safe-area handling, and WebView snapshot transitions for
85
85
 
86
86
  ## Install
87
87
 
88
+ You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:
89
+
90
+ ```bash
91
+ npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins
92
+ ```
93
+
94
+ Then use the following prompt:
95
+
96
+ ```text
97
+ Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-native-navigation` plugin in my project.
98
+ ```
99
+
100
+ If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:
101
+
88
102
  ```bash
89
103
  npm install @capgo/capacitor-native-navigation
90
104
  npx cap sync
@@ -669,7 +683,7 @@ Native bar colors. Use CSS-style hex strings (`#RRGGBB` or `#AARRGGBB`).
669
683
  | --------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------- |
670
684
  | **`dynamic`** | <code>boolean</code> | When `true`, Android 12+ derives unspecified bar colors from Material You system palettes. Explicit color fields still win. |
671
685
  | **`tint`** | <code>string</code> | Tint color for active buttons/items. |
672
- | **`inactiveTint`** | <code>string</code> | Color for inactive tab items. |
686
+ | **`inactiveTint`** | <code>string</code> | Color for inactive tab items. Ignored on iOS 26+ unless `experimentalBakedTintColors` is enabled. |
673
687
  | **`background`** | <code>string</code> | Optional background tint. Ignored on iOS 26+ so UIKit can preserve the system Liquid Glass navigation appearance. |
674
688
  | **`foreground`** | <code>string</code> | Title and label text color where the native platform supports it. |
675
689
  | **`badgeBackground`** | <code>string</code> | Badge background color for native tab badges. |
@@ -751,39 +765,41 @@ because icons are rendered by native UI.
751
765
 
752
766
  Native tabbar state.
753
767
 
754
- | Prop | Type | Description |
755
- | ------------------------------------ | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
756
- | **`hidden`** | <code>boolean</code> | Hide the native tabbar. |
757
- | **`tabs`** | <code>NativeNavigationTab[]</code> | Tab definitions. |
758
- | **`selectedId`** | <code>string</code> | Currently selected tab id. |
759
- | **`labels`** | <code>boolean</code> | Show text labels. Defaults to `true`. |
760
- | **`labelVisibilityMode`** | <code><a href="#nativenavigationtablabelvisibilitymode">NativeNavigationTabLabelVisibilityMode</a></code> | Native label visibility mode. Overrides `labels` when provided. |
761
- | **`icons`** | <code>boolean</code> | Show icons. Defaults to `true`. |
762
- | **`colors`** | <code><a href="#nativenavigationcolors">NativeNavigationColors</a></code> | Tabbar color hints. |
763
- | **`blurEffect`** | <code><a href="#nativenavigationblureffect">NativeNavigationBlurEffect</a></code> | iOS blur/material effect for the tabbar background when glass is not available. |
764
- | **`glass`** | <code><a href="#nativenavigationglassoptions">NativeNavigationGlassOptions</a></code> | Optional glass background behavior. Overrides `configure({ glass })` for this tabbar update. |
765
- | **`disableTransparentOnScrollEdge`** | <code>boolean</code> | Keep the iOS scroll-edge tabbar appearance from becoming transparent. Mirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option. Defaults to `false`. |
766
- | **`disableIndicator`** | <code>boolean</code> | Disable the Android active tab indicator. |
767
- | **`indicatorColor`** | <code>string</code> | Active tab indicator color on Android. `colors.indicator` is also supported. |
768
- | **`rippleColor`** | <code>string</code> | Tab press ripple color on Android. `colors.ripple` is also supported. |
769
- | **`badgeBackgroundColor`** | <code>string</code> | Badge background color. `colors.badgeBackground` is also supported. |
770
- | **`badgeTextColor`** | <code>string</code> | Badge text color. `colors.badgeText` is also supported. |
771
- | **`style`** | <code><a href="#nativenavigationtabbarstyle">NativeNavigationTabbarStyle</a></code> | Optional native tabbar layout and shape customization. |
772
- | **`animated`** | <code>boolean</code> | Animate native tabbar changes. |
768
+ | Prop | Type | Description |
769
+ | ------------------------------------ | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
770
+ | **`hidden`** | <code>boolean</code> | Hide the native tabbar. |
771
+ | **`tabs`** | <code>NativeNavigationTab[]</code> | Tab definitions. |
772
+ | **`selectedId`** | <code>string</code> | Currently selected tab id. |
773
+ | **`labels`** | <code>boolean</code> | Show text labels. Defaults to `true`. |
774
+ | **`labelVisibilityMode`** | <code><a href="#nativenavigationtablabelvisibilitymode">NativeNavigationTabLabelVisibilityMode</a></code> | Native label visibility mode. Overrides `labels` when provided. |
775
+ | **`icons`** | <code>boolean</code> | Show icons. Defaults to `true`. |
776
+ | **`colors`** | <code><a href="#nativenavigationcolors">NativeNavigationColors</a></code> | Tabbar color hints. |
777
+ | **`blurEffect`** | <code><a href="#nativenavigationblureffect">NativeNavigationBlurEffect</a></code> | iOS blur/material effect for the tabbar background when glass is not available. |
778
+ | **`glass`** | <code><a href="#nativenavigationglassoptions">NativeNavigationGlassOptions</a></code> | Optional glass background behavior. Overrides `configure({ glass })` for this tabbar update. |
779
+ | **`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. |
780
+ | **`disableTransparentOnScrollEdge`** | <code>boolean</code> | Keep the iOS scroll-edge tabbar appearance from becoming transparent. Mirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option. Defaults to `false`. |
781
+ | **`disableIndicator`** | <code>boolean</code> | Disable the Android active tab indicator. |
782
+ | **`indicatorColor`** | <code>string</code> | Active tab indicator color on Android. `colors.indicator` is also supported. |
783
+ | **`rippleColor`** | <code>string</code> | Tab press ripple color on Android. `colors.ripple` is also supported. |
784
+ | **`badgeBackgroundColor`** | <code>string</code> | Badge background color. `colors.badgeBackground` is also supported. |
785
+ | **`badgeTextColor`** | <code>string</code> | Badge text color. `colors.badgeText` is also supported. |
786
+ | **`style`** | <code><a href="#nativenavigationtabbarstyle">NativeNavigationTabbarStyle</a></code> | Optional native tabbar layout and shape customization. |
787
+ | **`animated`** | <code>boolean</code> | Animate native tabbar changes. |
773
788
 
774
789
 
775
790
  #### NativeNavigationTab
776
791
 
777
792
  A native tab item.
778
793
 
779
- | Prop | Type | Description |
780
- | ------------------ | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
781
- | **`id`** | <code>string</code> | Stable tab id returned in `tabSelect`. |
782
- | **`title`** | <code>string</code> | Visible tab label. |
783
- | **`icon`** | <code><a href="#nativenavigationicon">NativeNavigationIcon</a></code> | Native icon descriptor. |
784
- | **`selectedIcon`** | <code><a href="#nativenavigationicon">NativeNavigationIcon</a></code> | Optional selected-state icon. |
785
- | **`badge`** | <code>string \| number</code> | Optional badge. Numeric badges are supported on both platforms; text badge support depends on platform capabilities. |
786
- | **`enabled`** | <code>boolean</code> | Whether the tab is enabled. Defaults to `true`. |
794
+ | Prop | Type | Description |
795
+ | ------------------ | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
796
+ | **`id`** | <code>string</code> | Stable tab id returned in `tabSelect`. |
797
+ | **`title`** | <code>string</code> | Visible tab label. |
798
+ | **`icon`** | <code><a href="#nativenavigationicon">NativeNavigationIcon</a></code> | Native icon descriptor. |
799
+ | **`selectedIcon`** | <code><a href="#nativenavigationicon">NativeNavigationIcon</a></code> | Optional selected-state icon. |
800
+ | **`badge`** | <code>string \| number</code> | Optional badge. Numeric badges are supported on both platforms; text badge support depends on platform capabilities. |
801
+ | **`enabled`** | <code>boolean</code> | Whether the tab is enabled. Defaults to `true`. |
802
+ | **`hidden`** | <code>boolean</code> | Hide the tab item from the native tabbar. When the hidden tab is selected, native platform constraints may keep it visible until another tab is selected. |
787
803
 
788
804
 
789
805
  #### NativeNavigationTabbarStyle