@capgo/capacitor-native-navigation 8.0.24 → 8.1.0
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.
- package/README.md +63 -13
- package/android/src/main/java/app/capgo/nativenavigation/NativeNavigationPlugin.java +468 -36
- package/dist/docs.json +74 -0
- package/dist/esm/components.js +6 -1
- package/dist/esm/components.js.map +1 -1
- package/dist/esm/definitions.d.ts +38 -0
- package/dist/esm/definitions.js.map +1 -1
- package/dist/esm/web.js +3 -3
- package/dist/esm/web.js.map +1 -1
- package/dist/plugin.cjs.js +9 -4
- package/dist/plugin.cjs.js.map +1 -1
- package/dist/plugin.js +9 -4
- package/dist/plugin.js.map +1 -1
- package/docs/native-liquid-glass-android.webp +0 -0
- package/docs/native-liquid-glass-ios.webp +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -48,11 +48,18 @@ Native navbar, tabbar, safe-area handling, and WebView snapshot transitions for
|
|
|
48
48
|
width="320"
|
|
49
49
|
/>
|
|
50
50
|
|
|
51
|
+
### Native Liquid Glass screenshots
|
|
52
|
+
|
|
53
|
+
| iOS native Liquid Glass | Android Liquid Glass style |
|
|
54
|
+
| --- | --- |
|
|
55
|
+
| <img src="./docs/native-liquid-glass-ios.webp" alt="iOS native Liquid Glass navbar and tabbar screenshot" width="260" /> | <img src="./docs/native-liquid-glass-android.webp" alt="Android Liquid Glass-style native navbar and tabbar screenshot" width="260" /> |
|
|
56
|
+
|
|
51
57
|
## Features
|
|
52
58
|
|
|
53
59
|
- Drive native top navigation and bottom tabs from JavaScript state.
|
|
54
60
|
- Use system-owned iOS navigation bars, tab bars, tab gestures, and Liquid Glass rendering.
|
|
55
61
|
- Emit native intent events such as `navbarBack`, `navbarItemTap`, and `tabSelect`.
|
|
62
|
+
- Enable an optional Android Liquid Glass-style blurred backdrop for native bars on Android 12+.
|
|
56
63
|
- Capture WebView snapshots for native-feeling push, back, root, tab, and zoom transitions.
|
|
57
64
|
- Configure tab labels, selected icons, badges, indicators, ripples, tint colors, and dynamic colors.
|
|
58
65
|
- Write CSS inset variables so web content can scroll behind native bars without being hidden.
|
|
@@ -157,6 +164,28 @@ await NativeNavigation.setTabbar({
|
|
|
157
164
|
});
|
|
158
165
|
```
|
|
159
166
|
|
|
167
|
+
## Android Liquid Glass
|
|
168
|
+
|
|
169
|
+
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.
|
|
170
|
+
|
|
171
|
+
```typescript
|
|
172
|
+
await NativeNavigation.configure({
|
|
173
|
+
glass: {
|
|
174
|
+
effect: 'liquidGlass',
|
|
175
|
+
blurRadius: 18,
|
|
176
|
+
surfaceAlpha: 0.62,
|
|
177
|
+
},
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
await NativeNavigation.setTabbar({
|
|
181
|
+
selectedId: 'home',
|
|
182
|
+
tabs,
|
|
183
|
+
colors: {
|
|
184
|
+
background: '#F8FFFFFF',
|
|
185
|
+
},
|
|
186
|
+
});
|
|
187
|
+
```
|
|
188
|
+
|
|
160
189
|
## Transition Flow
|
|
161
190
|
|
|
162
191
|
```typescript
|
|
@@ -621,6 +650,7 @@ Global plugin configuration.
|
|
|
621
650
|
| **`contentInsetMode`** | <code><a href="#nativenavigationcontentinsetmode">NativeNavigationContentInsetMode</a></code> | When `css`, the plugin writes CSS variables on `document.documentElement`. |
|
|
622
651
|
| **`animationDuration`** | <code>number</code> | Default native transition duration in milliseconds. |
|
|
623
652
|
| **`colors`** | <code><a href="#nativenavigationcolors">NativeNavigationColors</a></code> | Shared color hints for native bars. |
|
|
653
|
+
| **`glass`** | <code><a href="#nativenavigationglassoptions">NativeNavigationGlassOptions</a></code> | Shared glass background defaults for native bars. |
|
|
624
654
|
|
|
625
655
|
|
|
626
656
|
#### NativeNavigationColors
|
|
@@ -640,23 +670,35 @@ Native bar colors. Use CSS-style hex strings (`#RRGGBB` or `#AARRGGBB`).
|
|
|
640
670
|
| **`ripple`** | <code>string</code> | Tab press ripple color on Android. |
|
|
641
671
|
|
|
642
672
|
|
|
673
|
+
#### NativeNavigationGlassOptions
|
|
674
|
+
|
|
675
|
+
Native glass background configuration.
|
|
676
|
+
|
|
677
|
+
| Prop | Type | Description |
|
|
678
|
+
| ------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
679
|
+
| **`effect`** | <code><a href="#nativenavigationglasseffect">NativeNavigationGlassEffect</a></code> | `liquidGlass` enables the Android 12+ live blurred WebView backdrop for native bars. Android 11 and older keep a translucent surface fallback. iOS uses the platform-owned Liquid Glass behavior. |
|
|
680
|
+
| **`blurRadius`** | <code>number</code> | Android blur radius in native dp for `liquidGlass`. Defaults to `18`. |
|
|
681
|
+
| **`surfaceAlpha`** | <code>number</code> | Alpha multiplier for the tint surface over the glass backdrop. Defaults to `0.62`. |
|
|
682
|
+
|
|
683
|
+
|
|
643
684
|
#### NativeNavigationNavbarOptions
|
|
644
685
|
|
|
645
686
|
Native navbar state.
|
|
646
687
|
|
|
647
|
-
| Prop | Type
|
|
648
|
-
| ----------------- |
|
|
649
|
-
| **`hidden`** | <code>boolean</code>
|
|
650
|
-
| **`title`** | <code>string</code>
|
|
651
|
-
| **`subtitle`** | <code>string</code>
|
|
652
|
-
| **`large`** | <code>boolean</code>
|
|
653
|
-
| **`transparent`** | <code>boolean</code>
|
|
654
|
-
| **`blurEffect`** | <code><a href="#nativenavigationblureffect">NativeNavigationBlurEffect</a></code>
|
|
655
|
-
| **`
|
|
656
|
-
| **`
|
|
657
|
-
| **`
|
|
658
|
-
| **`
|
|
659
|
-
| **`
|
|
688
|
+
| Prop | Type | Description |
|
|
689
|
+
| ----------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
|
690
|
+
| **`hidden`** | <code>boolean</code> | Hide the native navbar. |
|
|
691
|
+
| **`title`** | <code>string</code> | Main title. |
|
|
692
|
+
| **`subtitle`** | <code>string</code> | Secondary title where supported by the platform. |
|
|
693
|
+
| **`large`** | <code>boolean</code> | Prefer a large iOS title style. |
|
|
694
|
+
| **`transparent`** | <code>boolean</code> | Prefer transparent/scroll-edge style. |
|
|
695
|
+
| **`blurEffect`** | <code><a href="#nativenavigationblureffect">NativeNavigationBlurEffect</a></code> | iOS blur/material effect for the navbar background when glass is not available. Defaults to `systemChromeMaterial` for transparent bars. |
|
|
696
|
+
| **`glass`** | <code><a href="#nativenavigationglassoptions">NativeNavigationGlassOptions</a></code> | Optional glass background behavior. Overrides `configure({ glass })` for this navbar update. |
|
|
697
|
+
| **`backButton`** | <code><a href="#nativenavigationbackbutton">NativeNavigationBackButton</a></code> | Back button state. |
|
|
698
|
+
| **`leftItems`** | <code>NativeNavigationBarButton[]</code> | Left-side action buttons. |
|
|
699
|
+
| **`rightItems`** | <code>NativeNavigationBarButton[]</code> | Right-side action buttons. |
|
|
700
|
+
| **`colors`** | <code><a href="#nativenavigationcolors">NativeNavigationColors</a></code> | Navbar color hints. |
|
|
701
|
+
| **`animated`** | <code>boolean</code> | Animate native navbar changes. |
|
|
660
702
|
|
|
661
703
|
|
|
662
704
|
#### NativeNavigationBackButton
|
|
@@ -711,6 +753,7 @@ Native tabbar state.
|
|
|
711
753
|
| **`icons`** | <code>boolean</code> | Show icons. Defaults to `true`. |
|
|
712
754
|
| **`colors`** | <code><a href="#nativenavigationcolors">NativeNavigationColors</a></code> | Tabbar color hints. |
|
|
713
755
|
| **`blurEffect`** | <code><a href="#nativenavigationblureffect">NativeNavigationBlurEffect</a></code> | iOS blur/material effect for the tabbar background when glass is not available. |
|
|
756
|
+
| **`glass`** | <code><a href="#nativenavigationglassoptions">NativeNavigationGlassOptions</a></code> | Optional glass background behavior. Overrides `configure({ glass })` for this tabbar update. |
|
|
714
757
|
| **`disableTransparentOnScrollEdge`** | <code>boolean</code> | Keep the iOS scroll-edge tabbar appearance from becoming transparent. Mirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option. Defaults to `false`. |
|
|
715
758
|
| **`disableIndicator`** | <code>boolean</code> | Disable the Android active tab indicator. |
|
|
716
759
|
| **`indicatorColor`** | <code>string</code> | Active tab indicator color on Android. `colors.indicator` is also supported. |
|
|
@@ -859,6 +902,13 @@ How the plugin exposes native bar sizes to web content.
|
|
|
859
902
|
<code>'css' | 'none'</code>
|
|
860
903
|
|
|
861
904
|
|
|
905
|
+
#### NativeNavigationGlassEffect
|
|
906
|
+
|
|
907
|
+
Native glass background rendering preference.
|
|
908
|
+
|
|
909
|
+
<code>'none' | 'liquidGlass'</code>
|
|
910
|
+
|
|
911
|
+
|
|
862
912
|
#### NativeNavigationBlurEffect
|
|
863
913
|
|
|
864
914
|
Native material/blur effect preference.
|