@capgo/capacitor-native-navigation 8.1.1 → 8.2.1
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 +35 -0
- package/android/src/main/java/app/capgo/nativenavigation/NativeNavigationPlugin.java +454 -575
- package/dist/docs.json +112 -0
- package/dist/esm/definitions.d.ts +65 -0
- package/dist/esm/definitions.js.map +1 -1
- package/dist/esm/web.d.ts +1 -0
- package/dist/esm/web.js +16 -3
- package/dist/esm/web.js.map +1 -1
- package/dist/plugin.cjs.js +16 -3
- package/dist/plugin.cjs.js.map +1 -1
- package/dist/plugin.js +16 -3
- package/dist/plugin.js.map +1 -1
- package/docs/demo-curved-tabbar.png +0 -0
- package/docs/native-screenshots/android-curved-tabbar.png +0 -0
- package/ios/Sources/NativeNavigationPlugin/NativeNavigationPlugin.swift +612 -37
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -54,6 +54,14 @@ Native navbar, tabbar, safe-area handling, and WebView snapshot transitions for
|
|
|
54
54
|
| --- | --- |
|
|
55
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
56
|
|
|
57
|
+
### Curved native tabbar screenshot
|
|
58
|
+
|
|
59
|
+
<img
|
|
60
|
+
src="./docs/native-screenshots/android-curved-tabbar.png"
|
|
61
|
+
alt="Android native curved tabbar with raised center camera action and side margin"
|
|
62
|
+
width="300"
|
|
63
|
+
/>
|
|
64
|
+
|
|
57
65
|
## Features
|
|
58
66
|
|
|
59
67
|
- Drive native top navigation and bottom tabs from JavaScript state.
|
|
@@ -760,6 +768,7 @@ Native tabbar state.
|
|
|
760
768
|
| **`rippleColor`** | <code>string</code> | Tab press ripple color on Android. `colors.ripple` is also supported. |
|
|
761
769
|
| **`badgeBackgroundColor`** | <code>string</code> | Badge background color. `colors.badgeBackground` is also supported. |
|
|
762
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. |
|
|
763
772
|
| **`animated`** | <code>boolean</code> | Animate native tabbar changes. |
|
|
764
773
|
|
|
765
774
|
|
|
@@ -777,6 +786,25 @@ A native tab item.
|
|
|
777
786
|
| **`enabled`** | <code>boolean</code> | Whether the tab is enabled. Defaults to `true`. |
|
|
778
787
|
|
|
779
788
|
|
|
789
|
+
#### NativeNavigationTabbarStyle
|
|
790
|
+
|
|
791
|
+
Native tabbar layout and background shape options.
|
|
792
|
+
|
|
793
|
+
| Prop | Type | Description |
|
|
794
|
+
| --------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
795
|
+
| **`shape`** | <code><a href="#nativenavigationtabbarshape">NativeNavigationTabbarShape</a></code> | `floating` keeps the existing capsule tabbar. `curve` draws a full-width bar with a center notch and raised center tab. |
|
|
796
|
+
| **`height`** | <code>number</code> | Bar height in native points/dp. Defaults to `64` for `floating` and `76` for `curve`. |
|
|
797
|
+
| **`horizontalMargin`** | <code>number</code> | Horizontal margin in native points/dp. Defaults to `24` for `floating` and `0` for `curve`. |
|
|
798
|
+
| **`maxWidth`** | <code>number</code> | Maximum tabbar width in native points/dp. Defaults to `430` for `floating`; `curve` uses the available width unless this is set. |
|
|
799
|
+
| **`bottomGap`** | <code>number</code> | Bottom gap above the platform safe area in native points/dp. Defaults to `10` for `floating` and `0` for `curve`. |
|
|
800
|
+
| **`cornerRadius`** | <code>number</code> | Background corner radius in native points/dp. Defaults to a capsule radius for `floating` and `24` for `curve`. |
|
|
801
|
+
| **`centerItemId`** | <code>string</code> | Tab id promoted into the raised center button for `curve`. Defaults to the middle tab. |
|
|
802
|
+
| **`centerButtonDiameter`** | <code>number</code> | Raised center button diameter in native points/dp. Defaults to `76`. |
|
|
803
|
+
| **`centerButtonLift`** | <code>number</code> | Distance from the top of the center button to the top edge of the bar in native points/dp. Defaults to half of `centerButtonDiameter`. |
|
|
804
|
+
| **`centerButtonColor`** | <code>string</code> | Raised center button color. Defaults to the active tint color. |
|
|
805
|
+
| **`centerButtonIconColor`** | <code>string</code> | Raised center button icon color. Defaults to white. |
|
|
806
|
+
|
|
807
|
+
|
|
780
808
|
#### NativeNavigationTransitionResult
|
|
781
809
|
|
|
782
810
|
Native transition result.
|
|
@@ -923,6 +951,13 @@ Native tab label visibility behavior.
|
|
|
923
951
|
<code>'auto' | 'selected' | 'labeled' | 'unlabeled'</code>
|
|
924
952
|
|
|
925
953
|
|
|
954
|
+
#### NativeNavigationTabbarShape
|
|
955
|
+
|
|
956
|
+
Native tabbar background shape.
|
|
957
|
+
|
|
958
|
+
<code>'floating' | 'curve'</code>
|
|
959
|
+
|
|
960
|
+
|
|
926
961
|
#### NativeNavigationTransitionDirection
|
|
927
962
|
|
|
928
963
|
Navigation animation direction.
|