@capgo/capacitor-native-navigation 8.4.2 → 8.4.3

package/README.md

@@ -1,21 +1,12 @@
 # @capgo/capacitor-native-navigation
 
-<a href="https://capgo.app/">
-  <img
-    src="https://capgo.app/readme-banner.svg?repo=Cap-go/capacitor-native-navigation"
-    alt="Capgo - Instant updates for Capacitor"
-  />
-</a>
+<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">
-  <h2>
-    <a href="https://capgo.app/?ref=plugin_native_navigation">Get instant updates for your app with Capgo</a>
-  </h2>
-  <h2>
-    <a href="https://capgo.app/consulting/?ref=plugin_native_navigation">
-      Missing a feature? We can build the plugin for you
-    </a>
-  </h2>
+  <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>
+  <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>
 </div>
 
 Native navbar, tabbar, safe-area handling, and WebView snapshot transitions for Capacitor apps. Your web framework keeps routing and page rendering while this plugin owns the platform surfaces users expect to feel native.

package/android/src/main/java/app/capgo/nativenavigation/NativeNavigationPlugin.java

@@ -105,6 +105,8 @@ 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 tabbarDisableIndicator = false;
+    private Integer tabbarIndicatorColor = null;
 
     @Override
     public void load() {
@@ -244,6 +246,8 @@ public class NativeNavigationPlugin extends Plugin {
             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);
+            tabbarIndicatorColor = colorOption(call, colors, "indicatorColor", "indicator", null);
 
             for (int sourceIndex = 0; sourceIndex < tabs.length(); sourceIndex++) {
                 JSONObject tab = tabs.optJSONObject(sourceIndex);
@@ -644,6 +648,68 @@ public class NativeNavigationPlugin extends Plugin {
         };
     }
 
+    private void applyTabbarContainerOutline() {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP || tabbarContainer == null) {
+            return;
+        }
+
+        if (tabbarStyle.isCurve()) {
+            tabbarContainer.setClipToOutline(false);
+            tabbarContainer.setOutlineProvider(ViewOutlineProvider.BACKGROUND);
+            if (tabbarGlassBackdrop != null) {
+                tabbarGlassBackdrop.setClipToOutline(false);
+                tabbarGlassBackdrop.setOutlineProvider(ViewOutlineProvider.BACKGROUND);
+            }
+            if (tabbarGlassSurface != null) {
+                tabbarGlassSurface.setClipToOutline(false);
+                tabbarGlassSurface.setOutlineProvider(ViewOutlineProvider.BACKGROUND);
+            }
+            return;
+        }
+
+        ViewOutlineProvider floatingOutlineProvider = floatingTabbarOutlineProvider();
+        tabbarContainer.setClipToOutline(false);
+        tabbarContainer.setOutlineProvider(floatingOutlineProvider);
+        if (tabbarGlassBackdrop != null) {
+            tabbarGlassBackdrop.setClipToOutline(true);
+            tabbarGlassBackdrop.setOutlineProvider(floatingOutlineProvider);
+        }
+        if (tabbarGlassSurface != null) {
+            tabbarGlassSurface.setClipToOutline(true);
+            tabbarGlassSurface.setOutlineProvider(floatingOutlineProvider);
+        }
+    }
+
+    private ViewOutlineProvider floatingTabbarOutlineProvider() {
+        return new ViewOutlineProvider() {
+            @Override
+            public void getOutline(View view, Outline outline) {
+                int width = view.getWidth();
+                int height = view.getHeight();
+                if (width <= 0 || height <= 0 || tabbar == null) {
+                    outline.setEmpty();
+                    return;
+                }
+
+                Path path = tabbar.chromeBackgroundPath(width, height);
+                if (TabbarChromeSupport.canApplyPathOutline()) {
+                    outline.setPath(path);
+                    return;
+                }
+
+                boolean hasDetachedTrailing = tabItems.stream().anyMatch((item) -> item.detachedTrailing);
+                int capsuleWidth = TabbarChromeSupport.floatingCapsuleWidth(
+                    width,
+                    dp(tabbarStyle.height),
+                    dp(10),
+                    hasDetachedTrailing
+                );
+                float radius = Math.min(dp(tabbarStyle.cornerRadius), height / 2f);
+                outline.setRoundRect(0, 0, capsuleWidth, height, radius);
+            }
+        };
+    }
+
     private Toolbar ensureToolbar() {
         if (toolbar != null) {
             return toolbar;
@@ -698,7 +764,6 @@ public class NativeNavigationPlugin extends Plugin {
         tabbarGlassSurface = new View(getContext());
         tabbarGlassBackdrop.setVisibility(View.GONE);
         tabbarGlassSurface.setVisibility(View.GONE);
-
         tabbar = new NativeTabbarLayout(getContext());
         tabbar.setClipChildren(false);
         tabbar.setClipToPadding(false);
@@ -722,6 +787,7 @@ public class NativeNavigationPlugin extends Plugin {
                 new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dp(DEFAULT_TABBAR_DP))
             );
         }
+        applyTabbarContainerOutline();
         return tabbar;
     }
 
@@ -788,10 +854,10 @@ public class NativeNavigationPlugin extends Plugin {
             button.addView(centerFill, new FrameLayout.LayoutParams(centerFillDiameter, centerFillDiameter, Gravity.CENTER));
         }
 
-        if (!center && selected) {
+        if (!center && selected && !tabbarDisableIndicator) {
             GradientDrawable selectedBackground = new GradientDrawable();
             selectedBackground.setShape(GradientDrawable.OVAL);
-            selectedBackground.setColor(withAlpha(tintColor, 34));
+            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));
@@ -1245,25 +1311,21 @@ public class NativeNavigationPlugin extends Plugin {
             );
         }
 
+        Path chromeBackgroundPath(int width, int height) {
+            return backgroundPath(width, height);
+        }
+
         private Path backgroundPath(int width, int height) {
             Path path = new Path();
             if (!style.isCurve()) {
-                float radius = dp(style.cornerRadius);
-                int capsuleWidth = capsuleWidth(width);
-                path.addRoundRect(new RectF(0, 0, capsuleWidth, height), radius, radius, Path.Direction.CW);
-                int trailingIndex = detachedTrailingIndex();
-                if (trailingIndex >= 0) {
-                    float diameter = dp(style.height);
-                    float left = width - diameter;
-                    float top = (height - diameter) / 2f;
-                    path.addRoundRect(
-                        new RectF(left, top, left + diameter, top + diameter),
-                        diameter / 2f,
-                        diameter / 2f,
-                        Path.Direction.CW
-                    );
-                }
-                return path;
+                return TabbarChromeSupport.buildFloatingTabbarPath(
+                    width,
+                    height,
+                    dp(style.cornerRadius),
+                    dp(style.height),
+                    dp(10),
+                    detachedTrailingIndex() >= 0
+                );
             }
             float barTop = dp(style.barTop());
             float barHeight = dp(style.height);
@@ -1607,6 +1669,7 @@ public class NativeNavigationPlugin extends Plugin {
         }
 
         tabbar.setTabbarStyle(tabbarStyle, drawColor, centerIndex);
+        applyTabbarContainerOutline();
     }
 
     private int resolvedTabbarSurfaceColor() {
@@ -1815,6 +1878,15 @@ public class NativeNavigationPlugin extends Plugin {
             tabbarContainer.setLayoutParams(tabbarContainerParams);
             fillContainer(tabbarGlassBackdrop);
             fillContainer(tabbarGlassSurface);
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+                tabbarContainer.invalidateOutline();
+                if (tabbarGlassBackdrop != null) {
+                    tabbarGlassBackdrop.invalidateOutline();
+                }
+                if (tabbarGlassSurface != null) {
+                    tabbarGlassSurface.invalidateOutline();
+                }
+            }
         }
 
         if (tabbar != null) {

package/android/src/main/java/app/capgo/nativenavigation/TabbarChromeSupport.java

@@ -0,0 +1,66 @@
+package app.capgo.nativenavigation;
+
+import android.graphics.Path;
+import android.graphics.RectF;
+import android.os.Build;
+
+public final class TabbarChromeSupport {
+
+    public enum TabbarOutlineMode {
+        FLOATING_SHAPE,
+        CURVE_DEFAULT
+    }
+
+    private TabbarChromeSupport() {}
+
+    public static int resolveSelectedIndicatorColor(Integer explicitColor, int tintColor) {
+        if (explicitColor != null) {
+            return explicitColor;
+        }
+        return (34 << 24) | (tintColor & 0x00FFFFFF);
+    }
+
+    public static TabbarOutlineMode outlineModeForShape(String shape) {
+        return "curve".equals(shape) ? TabbarOutlineMode.CURVE_DEFAULT : TabbarOutlineMode.FLOATING_SHAPE;
+    }
+
+    public static boolean shouldClipGlassToOutline(TabbarOutlineMode mode) {
+        return mode == TabbarOutlineMode.FLOATING_SHAPE;
+    }
+
+    public static int floatingCapsuleWidth(int totalWidth, int barHeightPx, int trailingGapPx, boolean hasDetachedTrailing) {
+        if (!hasDetachedTrailing) {
+            return totalWidth;
+        }
+        return Math.max(0, totalWidth - barHeightPx - trailingGapPx);
+    }
+
+    public static Path buildFloatingTabbarPath(
+        int width,
+        int height,
+        float cornerRadiusPx,
+        float barHeightPx,
+        float trailingGapPx,
+        boolean hasDetachedTrailing
+    ) {
+        Path path = new Path();
+        int capsuleWidth = floatingCapsuleWidth(width, (int) barHeightPx, (int) trailingGapPx, hasDetachedTrailing);
+        path.addRoundRect(new RectF(0, 0, capsuleWidth, height), cornerRadiusPx, cornerRadiusPx, Path.Direction.CW);
+        if (hasDetachedTrailing) {
+            float diameter = barHeightPx;
+            float left = width - diameter;
+            float top = (height - diameter) / 2f;
+            path.addRoundRect(
+                new RectF(left, top, left + diameter, top + diameter),
+                diameter / 2f,
+                diameter / 2f,
+                Path.Direction.CW
+            );
+        }
+        return path;
+    }
+
+    public static boolean canApplyPathOutline() {
+        return Build.VERSION.SDK_INT >= Build.VERSION_CODES.R;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capgo/capacitor-native-navigation",
-  "version": "8.4.2",
+  "version": "8.4.3",
   "description": "Capacitor plugin for native navbar, tabbar, safe-area handling, and WebView snapshot transitions.",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",