@expokit/cli 0.4.1 → 0.4.2

package/README.md

@@ -9,6 +9,23 @@
 The CLI for **[ExpoKit](https://expokit.in)** — animated UI components for Expo and React Native. It copies
 the component source into your app (like shadcn/ui), so you own the code.
 
+<p align="center">
+  <a href="https://expokit.in/showcase"><img src="https://expokit.in/readme/charts.gif" alt="ExpoKit charts on iPhone: scrubbing an area chart and a bar chart, dragging a gauge, tapping through a donut" width="720"></a>
+</p>
+
+<p align="center">
+  <a href="https://expokit.in/docs/components"><img src="https://expokit.in/readme/screens.jpg" alt="ExpoKit on iPhone in dark and light mode: payment card, flip card, dashboard block and checkout block" width="720"></a>
+  <br>
+  <sub>Payment card and flip card are free; the dashboard and checkout screens are <a href="https://expokit.in/pricing">Pro</a> blocks.</sub>
+</p>
+
+- **Buttons, inputs, cards, sheets, tabs, charts and full screens**, all animated, with light and dark mode
+- **Built for touch**: springs, drag gestures and haptics, on iOS, Android, web and in Expo Go
+- **You own the code**: plain typed files in your app, with no runtime library to lock you in
+
+**[Browse every component with live previews →](https://expokit.in/docs/components)** ·
+**[Try them on your phone in Expo Go →](https://expokit.in/docs/run-on-your-phone)**
+
 ## Usage
 
 In your Expo app's folder:

package/bin/liquidglass.mjs

@@ -0,0 +1,281 @@
+/**
+ * Pure helpers for the liquidglass-tab template (no I/O): which Expo Router API shape to write for
+ * the installed SDK, starter-app detection, and tabs.ts generation for an existing app.
+ */
+
+import { CliError } from './lib.mjs';
+
+// ---------------------------------------------------------------------------
+// Expo SDK → API shape
+// ---------------------------------------------------------------------------
+
+/** Newest SDK this CLI knows the API of; also assumed when neither expo nor expo-router is installed. */
+export const LATEST_KNOWN_SDK = 58;
+export const MIN_SDK = 54;
+
+/** "~6.0.24", "^54.0.0", "6.0.24", "54" → [6, 0, 24]; "latest", "*", "file:…" → null. */
+export function parseVersion(spec) {
+  const m = /^(?:[\^~]|>=?|=)?\s*v?(\d+)(?:\.(\d+))?(?:\.(\d+))?/.exec(String(spec ?? '').trim());
+  return m ? [Number(m[1]), Number(m[2] ?? 0), Number(m[3] ?? 0)] : null;
+}
+
+/** expo-router majors before it switched to SDK numbering (55.x = SDK 55). */
+const ROUTER_TO_SDK = { 6: 54, 5: 53, 4: 52, 3: 50, 2: 49 };
+
+/**
+ * What to write for an installed expo / expo-router (versions or package.json ranges):
+ *   SDK 54     NativeTabs + standalone Icon/Label/Badge/VectorIcon; Tabs from 'expo-router'
+ *   SDK 55     NativeTabs.Trigger.*; Tabs from 'expo-router'
+ *   SDK 56–57  NativeTabs.Trigger.*; Tabs from 'expo-router/js-tabs'; themes from 'expo-router'
+ *   SDK 58+    as 56–57, NativeTabs from 'expo-router/native-tabs'
+ */
+export function routerTarget({ router, expo } = {}) {
+  const r = parseVersion(router);
+  const e = parseVersion(expo);
+  let sdk = null;
+  let source = null;
+  if (r) {
+    sdk = r[0] >= 50 ? r[0] : (ROUTER_TO_SDK[r[0]] ?? (r[0] < 2 ? 48 : null));
+    source = `expo-router ${r.join('.')}`;
+  }
+  if (sdk === null && e) {
+    sdk = e[0];
+    source = `expo ${e.join('.')}`;
+  }
+  const assumed = sdk === null;
+  if (assumed) sdk = LATEST_KNOWN_SDK;
+  if (sdk < MIN_SDK) return { sdk, source, unsupported: true };
+  const legacyNav = sdk <= 55;
+  return {
+    sdk,
+    source: source ?? `assumed SDK ${sdk}`,
+    assumed,
+    icons: sdk === 54 ? 'standalone' : 'trigger',
+    nativeTabs: sdk >= 58 ? 'expo-router/native-tabs' : 'expo-router/unstable-native-tabs',
+    tabs: legacyNav ? 'expo-router' : 'expo-router/js-tabs',
+    tabBarProps: legacyNav ? '@react-navigation/bottom-tabs' : 'expo-router/js-tabs',
+    themes: legacyNav ? '@react-navigation/native' : 'expo-router',
+    /** Imported directly on SDK 54–55 (expo-router depends on them; strict installers need them listed). */
+    deps: legacyNav ? ['@react-navigation/bottom-tabs', '@react-navigation/native'] : [],
+  };
+}
+
+function replaceOnce(text, re, replacement, what) {
+  if (!re.test(text)) throw new CliError(`liquidglass-tab template changed shape (${what}) — update the CLI: npx @expokit/cli@latest`);
+  return text.replace(re, replacement);
+}
+
+/** Registry `src/`-relative paths in comments ("src/app/(tabs)", "src/lib/tabs.ts") → the project's folders. */
+export function localizePaths(text, paths = {}) {
+  const map = { app: paths.app, components: paths.components, lib: paths.lib };
+  return text.replace(/\bsrc\/(app|components|lib)\//g, (all, folder) => (map[folder] ? `${map[folder].replace(/\/+$/, '')}/` : all));
+}
+
+/** A template file rewritten for `target` (from routerTarget). Files without SDK-specific imports come back unchanged. */
+export function adaptLiquidGlassFile(rel, text, target) {
+  if (rel === 'components/LiquidGlassTabs.tsx') {
+    const standalone = target.icons === 'standalone';
+    const header =
+      `// Expo SDK ${target.sdk}${standalone ? ': standalone Icon / Label / Badge / VectorIcon (NativeTabs.Trigger.* is SDK 55+)' : ''}.\n` +
+      `// After upgrading Expo, run \`npx @expokit/cli@latest update\` to get the matching imports.\n` +
+      `import { Tabs } from '${target.tabs}';\n` +
+      (standalone
+        ? `import { Badge, Icon, Label, NativeTabs, VectorIcon } from '${target.nativeTabs}';\n`
+        : `import { NativeTabs } from '${target.nativeTabs}';\n`);
+    let out = replaceOnce(
+      text,
+      /\/\/ Written for your Expo SDK[^\n]*\n\/\/[^\n]*\nimport \{ Tabs \} from 'expo-router\/js-tabs';\nimport \{ NativeTabs \} from 'expo-router\/unstable-native-tabs';\n/,
+      header,
+      'LiquidGlassTabs imports'
+    );
+    if (standalone) out = out.replace(/\bNativeTabs\.Trigger\.(Icon|Label|Badge|VectorIcon)\b/g, '$1');
+    return out;
+  }
+  if (rel === 'components/GlassTabBar.tsx') {
+    return replaceOnce(
+      text,
+      /\/\/ '@react-navigation\/bottom-tabs' on SDK[^\n]*\nimport type \{ BottomTabBarProps \} from 'expo-router\/js-tabs';\n/,
+      `import type { BottomTabBarProps } from '${target.tabBarProps}';\n`,
+      'GlassTabBar imports'
+    );
+  }
+  if (rel === 'app/_layout.tsx') {
+    const imports =
+      target.themes === 'expo-router'
+        ? "// SDK 56+: navigation themes come from expo-router itself. Using @react-navigation/native's\n" +
+          '// ThemeProvider here does nothing (expo-router ships its own copy) and causes a white flash.\n' +
+          "import { DarkTheme, DefaultTheme, Slot, ThemeProvider } from 'expo-router';\n"
+        : "import { Slot } from 'expo-router';\n" +
+          `// SDK ${target.sdk}: navigation themes come from React Navigation (expo-router re-exports them from SDK 56).\n` +
+          "import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';\n";
+    return replaceOnce(
+      text,
+      /\/\/ Navigation themes:[^\n]*\n\/\/[^\n]*\nimport \{ DarkTheme, DefaultTheme, Slot, ThemeProvider \} from 'expo-router';\n/,
+      imports,
+      'root layout imports'
+    );
+  }
+  return text;
+}
+
+// ---------------------------------------------------------------------------
+// Existing apps: routes → tabs.ts
+// ---------------------------------------------------------------------------
+
+const ROUTE_EXT = /\.(tsx|ts|jsx|js)$/;
+const PLATFORM_EXT = /\.(ios|android|web|native)$/;
+
+/**
+ * Tab names of a navigator from the entries of its folder (`{ name, dir }`): route files minus
+ * platform suffixes, and sub-folders. Skips layouts, `+not-found`-style special files and `_`/`.` names.
+ */
+export function routeNamesFromEntries(entries) {
+  const names = [];
+  for (const { name, dir } of entries) {
+    if (name.startsWith('.') || name.startsWith('_') || name.startsWith('+')) continue;
+    let route;
+    if (dir) route = name;
+    else {
+      if (!ROUTE_EXT.test(name) || name.endsWith('.d.ts')) continue;
+      route = name.replace(ROUTE_EXT, '').replace(PLATFORM_EXT, '');
+    }
+    if (!names.includes(route)) names.push(route);
+  }
+  return names;
+}
+
+/** "index" → "Home", "my-cards" → "My cards", "[id]" → "Id". */
+export function tabTitle(name) {
+  if (name === 'index') return 'Home';
+  const words = String(name).replace(/[[\]().]/g, ' ').split(/[\s_-]+/).filter(Boolean);
+  if (!words.length) return String(name);
+  const text = words.join(' ').toLowerCase();
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+/**
+ * Tab order and titles from an existing layout: `<Tabs.Screen name="x" options={{ title: 'X' }}>` or
+ * `<NativeTabs.Trigger name="x"><…Label>X</…Label>`. Best effort — unknown shapes give [].
+ */
+export function readTabsFromLayout(text) {
+  const src = String(text ?? '');
+  const re = /<(Tabs\.Screen|NativeTabs\.Trigger)\b[^>]*?\bname=["'{]+([^"'}]+)["'}]+/g;
+  const hits = [...src.matchAll(re)];
+  return hits.map((m, i) => {
+    const end = i + 1 < hits.length ? hits[i + 1].index : src.length;
+    const block = src.slice(m.index, end);
+    const title =
+      /\btitle:\s*["']([^"']+)["']/.exec(block)?.[1] ??
+      /<(?:NativeTabs\.Trigger\.)?Label\b[^>]*>\s*([^<{]+?)\s*<\//.exec(block)?.[1] ??
+      null;
+    return { name: m[2], title };
+  });
+}
+
+/** [match words, SF Symbol default/selected, Ionicons default/selected] — a sensible icon per common tab name. */
+const ICON_GUESSES = [
+  [['index', 'home', 'feed'], 'house', 'house.fill', 'home-outline', 'home'],
+  [['explore', 'discover', 'browse'], 'safari', 'safari.fill', 'compass-outline', 'compass'],
+  [['search', 'find'], 'magnifyingglass', 'magnifyingglass', 'search-outline', 'search'],
+  [['profile', 'account', 'me', 'you', 'user'], 'person.crop.circle', 'person.crop.circle.fill', 'person-circle-outline', 'person-circle'],
+  [['settings', 'preferences'], 'gearshape', 'gearshape.fill', 'settings-outline', 'settings'],
+  [['alerts', 'notifications', 'activity'], 'bell', 'bell.fill', 'notifications-outline', 'notifications'],
+  [['messages', 'chat', 'chats', 'inbox'], 'bubble.left.and.bubble.right', 'bubble.left.and.bubble.right.fill', 'chatbubbles-outline', 'chatbubbles'],
+  [['cart', 'bag', 'shop', 'store', 'orders'], 'bag', 'bag.fill', 'bag-outline', 'bag'],
+  [['favorites', 'favourites', 'likes', 'saved'], 'heart', 'heart.fill', 'heart-outline', 'heart'],
+  [['cards', 'wallet', 'pay', 'payments'], 'creditcard', 'creditcard.fill', 'card-outline', 'card'],
+  [['calendar', 'schedule', 'events'], 'calendar', 'calendar', 'calendar-outline', 'calendar'],
+  [['library', 'books'], 'books.vertical', 'books.vertical.fill', 'library-outline', 'library'],
+];
+
+export function guessTabIcon(name) {
+  const key = String(name).toLowerCase().replace(/[^a-z]/g, '');
+  const hit = ICON_GUESSES.find(([words]) => words.includes(key)) ?? ICON_GUESSES.find(([words]) => words.some((w) => key.includes(w)));
+  const [, sf, sfSelected, ion, ionSelected] = hit ?? [null, 'circle', 'circle.fill', 'ellipse-outline', 'ellipse'];
+  return { sf, sfSelected, ion, ionSelected };
+}
+
+const q = (s) => `'${String(s).replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
+
+/** One TABS entry (same layout as the template's, so parseTabNamesFromConfig reads it back). */
+export function tabEntrySource({ name, title }) {
+  const icon = guessTabIcon(name);
+  const sf = icon.sf === icon.sfSelected ? q(icon.sf) : `{ default: ${q(icon.sf)}, selected: ${q(icon.sfSelected)} }`;
+  const lines = [
+    '  {',
+    `    name: ${q(name)},`,
+    `    title: ${q(title ?? tabTitle(name))},`,
+    ...(/^\[.*\]$/.test(name) ? ['    hidden: true,'] : []),
+    `    sf: ${sf},`,
+    `    icon: { set: 'Ionicons', name: ${q(icon.ion)}, selected: ${q(icon.ionSelected)} },`,
+    '  },',
+  ];
+  return lines.join('\n');
+}
+
+/**
+ * Tabs for an existing app: its route names, ordered and titled like its current layout when that
+ * layout names them, `index` first otherwise.
+ */
+export function tabsFromRoutes(routes, layoutTabs = []) {
+  const known = layoutTabs.filter((t) => routes.includes(t.name));
+  const rest = routes.filter((r) => !known.some((t) => t.name === r)).sort((a, b) => (a === 'index' ? -1 : b === 'index' ? 1 : a.localeCompare(b)));
+  return [...known.map((t) => ({ name: t.name, title: t.title ?? tabTitle(t.name) })), ...rest.map((name) => ({ name, title: tabTitle(name) }))];
+}
+
+/** The template's tabs.ts with its TABS list replaced by `tabs`. */
+export function replaceTabsList(tabsTs, tabs) {
+  const body = tabs.map(tabEntrySource).join('\n');
+  return replaceOnce(tabsTs, /export const TABS: TabItem\[\] = \[[\s\S]*?\n\];/, `export const TABS: TabItem[] = [\n${body}\n];`, 'tabs.ts TABS');
+}
+
+// ---------------------------------------------------------------------------
+// create-expo-app starters (safe to replace: nothing of the user's in them yet)
+// ---------------------------------------------------------------------------
+
+/** SDK 54 starter app/(tabs)/_layout.tsx: JS Tabs with HapticTab + IconSymbol. */
+export function isStarterTabsLayout(text) {
+  const s = String(text ?? '');
+  return /from ['"]@\/components\/haptic-?tab['"]/i.test(s) && /IconSymbol/.test(s) && !/Redirect|useAuth|useSession/.test(s);
+}
+
+/** SDK 55+ starter components/app-tabs(.web).tsx: the starter's two tabs (index, explore). */
+export function isStarterAppTabs(text) {
+  const s = String(text ?? '');
+  if (/Redirect|useAuth|useSession/.test(s)) return false;
+  const native = /tabIcons\/home\.png/.test(s) && /tabIcons\/explore\.png/.test(s);
+  const web = /from ['"]expo-router\/ui['"]/.test(s) && /TabList/.test(s) && /href=["']\/explore["']/.test(s);
+  return native || web;
+}
+
+/** create-expo-app root layouts (SDK 54: Stack anchored on (tabs) + modal; SDK 55+: AnimatedSplashOverlay + AppTabs). */
+export function isStarterRootLayout(text) {
+  const s = String(text ?? '');
+  const sdk54 = /anchor:\s*['"]\(tabs\)['"]/.test(s) && /name=["']modal["']/.test(s);
+  const sdk55 = /AnimatedSplashOverlay/.test(s) && /AppTabs/.test(s);
+  const providers = [...s.matchAll(/<(\w+Provider)\b/g)].map((m) => m[1]).filter((p) => p !== 'ThemeProvider');
+  return (sdk54 || sdk55) && !providers.length && !/Redirect/.test(s);
+}
+
+/** Files the template ships that a later `update` may refresh: anything that names its building blocks. */
+export function isLiquidGlassSource(text) {
+  return /\b(USE_NATIVE_TABS|LiquidGlassTabs|GlassTabBar|TabScreenFromConfig|tabBarCollapse|asFamily|TAB_BAR)\b/.test(String(text ?? ''));
+}
+
+// ---------------------------------------------------------------------------
+// package.json diff (what `npx expo install` changed)
+// ---------------------------------------------------------------------------
+
+/** `{ added: [[name, version]], changed: [[name, from, to]] }` between two package.json objects. */
+export function diffDependencies(before = {}, after = {}) {
+  const all = (pkg) => ({ ...pkg?.devDependencies, ...pkg?.dependencies });
+  const a = all(before);
+  const b = all(after);
+  const added = [];
+  const changed = [];
+  for (const [name, version] of Object.entries(b)) {
+    if (!(name in a)) added.push([name, version]);
+    else if (a[name] !== version) changed.push([name, a[name], version]);
+  }
+  return { added, changed };
+}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@expokit/cli",
-  "version": "0.4.1",
-  "description": "shadcn-style CLI for Expo — add native UI blocks and components to your app",
+  "version": "0.4.2",
+  "mcpName": "io.github.Anshkaran7/expokit",
+  "description": "Animated UI components for Expo and React Native — a shadcn-style CLI that copies buttons, inputs, cards, charts and full screens into your app",
   "license": "MIT",
   "type": "module",
   "bin": {
@@ -17,9 +18,22 @@
   "keywords": [
     "expo",
     "react-native",
-    "cli",
+    "react-native-ui",
+    "ui-components",
+    "components",
+    "component-library",
+    "ui-kit",
     "ui",
+    "design-system",
+    "animation",
+    "animated",
+    "haptics",
+    "dark-mode",
+    "ios",
+    "android",
     "shadcn",
+    "shadcn-ui",
+    "cli",
     "liquid-glass",
     "native-tabs",
     "expo-router"

package/registry/_docs/liquidglass-tab.json

@@ -11,6 +11,7 @@
     "src/app/(tabs)/profile.tsx",
     "src/app/_layout.tsx",
     "src/components/GlassTabBar.tsx",
+    "src/components/LiquidGlassTabs.tsx",
     "src/components/TabScreen.tsx",
     "src/lib/tab-bar.ts",
     "src/lib/tab-icons.ts",

package/registry/liquidglass-tab/files/src/app/(tabs)/_layout.tsx

@@ -1,97 +1,6 @@
-import React from 'react';
-import { DynamicColorIOS, Platform } from 'react-native';
-import { Tabs } from 'expo-router/js-tabs';
-// SDK 54–57 path. On SDK 58+ change this to 'expo-router/native-tabs'.
-import { NativeTabs } from 'expo-router/unstable-native-tabs';
-
-import { GlassTabBar } from '@/components/GlassTabBar';
-import { USE_NATIVE_TABS } from '@/lib/tab-bar';
-import {
-  asFamily,
-  resolveIconLibrary,
-  resolveIconNames,
-  TAB_BAR,
-  TABS,
-  type TabItem,
-} from '@/lib/tabs';
-
-type IconProps = React.ComponentProps<typeof NativeTabs.Trigger.Icon>;
-
-function dynamicColor(pair: { light: string; dark: string }) {
-  return Platform.OS === 'ios' ? DynamicColorIOS(pair) : pair.light;
-}
-
-/** Vector-font icon rasterised for the native bar (Android, or iOS when no SF Symbol is set). */
-function vectorSrc(tab: TabItem) {
-  const library = resolveIconLibrary(tab);
-  const { name, selected } = resolveIconNames(tab);
-  if (!library || !name) return undefined;
-
-  const family = asFamily(library);
-  const icon = <NativeTabs.Trigger.VectorIcon family={family} name={name} />;
-  if (!selected) return icon;
-  return { default: icon, selected: <NativeTabs.Trigger.VectorIcon family={family} name={selected} /> };
-}
-
-/**
- * Returns the Icon element itself (not a wrapper component): NativeTabs reads its
- * children by type, so <NativeTabs.Trigger.Icon> must be a direct child of the Trigger.
- */
-function nativeIcon(tab: TabItem, tint: IconProps['selectedColor']) {
-  const src = tab.src ?? vectorSrc(tab);
-  if (!tab.sf && !src) return null;
-  // sf wins on iOS, src is used on Android.
-  const props = { sf: tab.sf, src, selectedColor: tint } as IconProps;
-  return <NativeTabs.Trigger.Icon {...props} />;
-}
-
-function NativeTabLayout() {
-  const tint = dynamicColor(TAB_BAR.colors.tint);
-  const inactive = dynamicColor(TAB_BAR.colors.inactive);
-  const { fontSize, fontWeight, selectedFontWeight } = TAB_BAR.labelStyle;
-
-  return (
-    <NativeTabs
-      tintColor={tint}
-      iconColor={inactive}
-      labelVisibilityMode={TAB_BAR.labelVisibilityMode}
-      minimizeBehavior={TAB_BAR.minimizeBehavior}
-      labelStyle={{ color: inactive, fontSize, fontWeight }}
-      {...(TAB_BAR.backgroundColor != null ? { backgroundColor: TAB_BAR.backgroundColor } : null)}
-    >
-      {TABS.map((tab) => (
-        <NativeTabs.Trigger key={tab.name} name={tab.name} hidden={tab.hidden}>
-          {nativeIcon(tab, tint)}
-          <NativeTabs.Trigger.Label
-            hidden={tab.hiddenLabel}
-            selectedStyle={{ color: tint, fontSize, fontWeight: selectedFontWeight }}
-          >
-            {tab.title}
-          </NativeTabs.Trigger.Label>
-          {tab.badge ? <NativeTabs.Trigger.Badge>{tab.badge}</NativeTabs.Trigger.Badge> : null}
-        </NativeTabs.Trigger>
-      ))}
-    </NativeTabs>
-  );
-}
-
-function GlassTabLayout() {
-  return (
-    <Tabs
-      tabBar={(props) => <GlassTabBar {...props} />}
-      screenOptions={{ headerShown: false, animation: 'fade' }}
-    >
-      {TABS.map((tab) => (
-        <Tabs.Screen
-          key={tab.name}
-          name={tab.name}
-          options={{ title: tab.title, href: tab.hidden ? null : undefined }}
-        />
-      ))}
-    </Tabs>
-  );
-}
+import { LiquidGlassTabs } from '@/components/LiquidGlassTabs';
 
+// Tabs, icons and colours live in lib/tabs.ts. Auth redirects etc. go here, before the return.
 export default function TabLayout() {
-  return USE_NATIVE_TABS ? <NativeTabLayout /> : <GlassTabLayout />;
+  return <LiquidGlassTabs />;
 }

package/registry/liquidglass-tab/files/src/app/(tabs)/alerts.tsx

@@ -1,5 +1,6 @@
 import { TabScreenFromConfig } from '@/components/TabScreen';
 
 export default function AlertsScreen() {
-  return <TabScreenFromConfig tabName="alerts" />;
+  // The button is pinned with useTabBarInset(), so it clears the floating bar on every OS.
+  return <TabScreenFromConfig tabName="alerts" action="Mark all as read" />;
 }

package/registry/liquidglass-tab/files/src/app/_layout.tsx

@@ -3,8 +3,8 @@ import React, { useEffect } from 'react';
 import { StyleSheet, useColorScheme } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-// SDK 56+: navigation themes come from expo-router itself. Using @react-navigation/native's
-// ThemeProvider here does nothing (expo-router ships its own copy) and causes a white flash.
+// Navigation themes: from 'expo-router' on SDK 56+ (it ships its own copy, so the
+// @react-navigation/native ThemeProvider would do nothing there), '@react-navigation/native' on SDK 54–55.
 import { DarkTheme, DefaultTheme, Slot, ThemeProvider } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 

package/registry/liquidglass-tab/files/src/components/GlassTabBar.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import { BlurView } from 'expo-blur';
 import * as Haptics from 'expo-haptics';
+// '@react-navigation/bottom-tabs' on SDK 54–55 (the CLI writes the right one).
 import type { BottomTabBarProps } from 'expo-router/js-tabs';
 
 import { GLASS_BAR_HEIGHT, setTabBarCollapsed, tabBarCollapse } from '@/lib/tab-bar';

package/registry/liquidglass-tab/files/src/components/LiquidGlassTabs.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { DynamicColorIOS, Platform } from 'react-native';
+// Written for your Expo SDK by `npx @expokit/cli add liquidglass-tab` (SDK 54–55: Tabs from
+// 'expo-router'; SDK 58+: NativeTabs from 'expo-router/native-tabs'). `update` keeps it in sync.
+import { Tabs } from 'expo-router/js-tabs';
+import { NativeTabs } from 'expo-router/unstable-native-tabs';
+
+import { GlassTabBar } from '@/components/GlassTabBar';
+import { USE_NATIVE_TABS } from '@/lib/tab-bar';
+import {
+  asFamily,
+  resolveIconLibrary,
+  resolveIconNames,
+  TAB_BAR,
+  TABS,
+  type TabItem,
+} from '@/lib/tabs';
+
+type IconProps = React.ComponentProps<typeof NativeTabs.Trigger.Icon>;
+
+function dynamicColor(pair: { light: string; dark: string }) {
+  return Platform.OS === 'ios' ? DynamicColorIOS(pair) : pair.light;
+}
+
+/** Vector-font icon rasterised for the native bar (Android, or iOS when no SF Symbol is set). */
+function vectorSrc(tab: TabItem) {
+  const library = resolveIconLibrary(tab);
+  const { name, selected } = resolveIconNames(tab);
+  if (!library || !name) return undefined;
+
+  const family = asFamily(library);
+  const icon = <NativeTabs.Trigger.VectorIcon family={family} name={name} />;
+  if (!selected) return icon;
+  return { default: icon, selected: <NativeTabs.Trigger.VectorIcon family={family} name={selected} /> };
+}
+
+/**
+ * Returns the Icon element itself (not a wrapper component): NativeTabs reads its
+ * children by type, so the Icon must be a direct child of the Trigger.
+ */
+function nativeIcon(tab: TabItem, tint: IconProps['selectedColor']) {
+  // SF Symbol on iOS when set; otherwise the image / vector icon (always on Android).
+  if (Platform.OS === 'ios' && tab.sf) {
+    return <NativeTabs.Trigger.Icon {...({ sf: tab.sf, selectedColor: tint } as IconProps)} />;
+  }
+  const src = tab.src ?? vectorSrc(tab);
+  if (!src) return null;
+  return <NativeTabs.Trigger.Icon {...({ src, selectedColor: tint } as IconProps)} />;
+}
+
+function NativeTabLayout() {
+  const tint = dynamicColor(TAB_BAR.colors.tint);
+  const inactive = dynamicColor(TAB_BAR.colors.inactive);
+  const { fontSize, fontWeight, selectedFontWeight } = TAB_BAR.labelStyle;
+
+  return (
+    <NativeTabs
+      tintColor={tint}
+      iconColor={inactive}
+      labelVisibilityMode={TAB_BAR.labelVisibilityMode}
+      minimizeBehavior={TAB_BAR.minimizeBehavior}
+      labelStyle={{ color: inactive, fontSize, fontWeight }}
+      {...(TAB_BAR.backgroundColor != null ? { backgroundColor: TAB_BAR.backgroundColor } : null)}
+    >
+      {TABS.map((tab) => (
+        <NativeTabs.Trigger key={tab.name} name={tab.name} hidden={tab.hidden}>
+          {nativeIcon(tab, tint)}
+          <NativeTabs.Trigger.Label
+            hidden={tab.hiddenLabel}
+            selectedStyle={{ color: tint, fontSize, fontWeight: selectedFontWeight }}
+          >
+            {tab.title}
+          </NativeTabs.Trigger.Label>
+          {tab.badge ? <NativeTabs.Trigger.Badge>{tab.badge}</NativeTabs.Trigger.Badge> : null}
+        </NativeTabs.Trigger>
+      ))}
+    </NativeTabs>
+  );
+}
+
+function GlassTabLayout() {
+  return (
+    <Tabs
+      tabBar={(props) => <GlassTabBar {...props} />}
+      screenOptions={{ headerShown: false, animation: 'fade' }}
+    >
+      {TABS.map((tab) => (
+        <Tabs.Screen
+          key={tab.name}
+          name={tab.name}
+          options={{ title: tab.title, href: tab.hidden ? null : undefined }}
+        />
+      ))}
+    </Tabs>
+  );
+}
+
+/**
+ * The whole tab bar, driven by lib/tabs.ts: system NativeTabs with real Liquid Glass on
+ * iOS 26+, the floating glass fallback everywhere else. Render it from the layout that owns
+ * your tab routes — app/(tabs)/_layout.tsx — after any redirects:
+ *
+ *   export default function TabLayout() {
+ *     if (!signedIn) return <Redirect href="/sign-in" />;
+ *     return <LiquidGlassTabs />;
+ *   }
+ */
+export function LiquidGlassTabs() {
+  return USE_NATIVE_TABS ? <NativeTabLayout /> : <GlassTabLayout />;
+}

package/registry/liquidglass-tab/files/src/components/TabScreen.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  Pressable,
   ScrollView,
   StyleSheet,
   Text,
@@ -15,13 +16,17 @@ interface TabScreenProps {
   title: string;
   description: string;
   accent: string;
+  /** Label of a button pinned to the bottom of the screen, above the tab bar. */
+  action?: string;
 }
 
-export function TabScreen({ title, description, accent }: TabScreenProps) {
+export function TabScreen({ title, description, accent, action }: TabScreenProps) {
   const isDark = useColorScheme() === 'dark';
   const insets = useSafeAreaInsets();
   const onScroll = useTabBarScroll();
-  const bottomInset = useTabBarInset();
+  const bottomInset = useTabBarInset(24);
+  // Bottom-anchored UI sits on top of the bar's footprint, not on the screen edge.
+  const actionBottom = useTabBarInset(12);
   const bg = isDark ? '#0f0f1a' : '#f2f2f7';
   const text = isDark ? '#fff' : '#1c1c1e';
   const sub = isDark ? '#9898a8' : '#6c6c70';
@@ -32,11 +37,11 @@ export function TabScreen({ title, description, accent }: TabScreenProps) {
         style={{ flex: 1, backgroundColor: bg }}
         contentContainerStyle={[
           styles.scroll,
-          { paddingTop: USE_NATIVE_TABS ? 12 : insets.top + 12, paddingBottom: bottomInset },
+          { paddingTop: insets.top + 12, paddingBottom: bottomInset },
         ]}
         showsVerticalScrollIndicator={false}
-        // Native tabs inset content for the system bars; the glass fallback pads it manually.
-        contentInsetAdjustmentBehavior={USE_NATIVE_TABS ? 'automatic' : 'never'}
+        // Pad by hand on every bar: useTabBarInset() already counts the floating bar and home indicator.
+        contentInsetAdjustmentBehavior="never"
         scrollEventThrottle={16}
         onScroll={onScroll}
       >
@@ -64,12 +69,21 @@ export function TabScreen({ title, description, accent }: TabScreenProps) {
             </Text>
           </View>
         ))}
+        {action ? <View style={{ height: 64 }} /> : null}
       </ScrollView>
+      {action ? (
+        <Pressable
+          accessibilityRole="button"
+          style={({ pressed }) => [styles.action, { bottom: actionBottom, backgroundColor: accent, opacity: pressed ? 0.85 : 1 }]}
+        >
+          <Text style={styles.actionText}>{action}</Text>
+        </Pressable>
+      ) : null}
     </View>
   );
 }
 
-export function TabScreenFromConfig({ tabName }: { tabName: string }) {
+export function TabScreenFromConfig({ tabName, action }: { tabName: string; action?: string }) {
   const tab = getTab(tabName);
   if (!tab) {
     return null;
@@ -83,6 +97,7 @@ export function TabScreenFromConfig({ tabName }: { tabName: string }) {
         'Scroll to test native tab bar minimize behavior on iOS 26+.'
       }
       accent={tab.accent ?? '#6366f1'}
+      action={action}
     />
   );
 }
@@ -119,4 +134,14 @@ const styles = StyleSheet.create({
   },
   cardTitle: { fontSize: 17, fontWeight: '400' },
   cardSub: { fontSize: 14, marginTop: 4, lineHeight: 20 },
+  action: {
+    position: 'absolute',
+    left: 20,
+    right: 20,
+    height: 50,
+    borderRadius: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionText: { color: '#fff', fontSize: 16, fontWeight: '500' },
 });

package/registry/liquidglass-tab/files/src/lib/tab-bar.ts

@@ -53,9 +53,17 @@ export function useTabBarScroll() {
   }, []);
 }
 
-/** Bottom padding a scrolling screen needs so its last row clears the floating bar. */
-export function useTabBarInset() {
+/**
+ * How far the tab bar covers the bottom of a screen, plus `gap`. Both bars float over the
+ * content — iOS 26's Liquid Glass bar and the glass fallback — so use it for anything that
+ * reaches the bottom edge: a ScrollView's paddingBottom (with
+ * contentInsetAdjustmentBehavior="never"), a bottom-anchored button's `bottom`, or the
+ * paddingBottom of a full-screen layout. Android's system bar (TAB_BAR.legacy = 'native')
+ * sits below the content, so there it is just `gap`.
+ */
+export function useTabBarInset(gap = 8) {
   const insets = useSafeAreaInsets();
-  if (USE_NATIVE_TABS) return 24;
-  return GLASS_BAR_HEIGHT + Math.max(insets.bottom, 12) + 24;
+  if (USE_NATIVE_TABS && Platform.OS === 'android') return gap;
+  // The system bar has no height API; it sits in the same spot as the fallback pill.
+  return GLASS_BAR_HEIGHT + Math.max(insets.bottom, 12) + gap;
 }

package/registry/liquidglass-tab/files/src/lib/tab-icons.ts

@@ -19,7 +19,8 @@ import type { ColorValue, ImageSourcePropType } from 'react-native';
  * Preset sets (no import needed): Ionicons, Feather, FontAwesome, …
  * Custom font: iconFont() / icoMoon()
  * Custom module: library + icon on TabItem
- * PNG: src on TabItem
+ * PNG: src on TabItem — SVG kits (Hugeicons, Lucide, Tabler) → PNGs with
+ *   npx @expokit/cli@latest icons --from hugeicons --names Home01Icon --out assets/tab-icons
  */
 
 export type IconSetName =
@@ -85,8 +86,10 @@ export function asFamily(mod: unknown): VectorIconFamily {
   }
 
   throw new Error(
-    '[expo-kit] This icon package has no getImageSource (SVG kits like Hugeicons, Tabler, Lucide).\n' +
-      'Use icon.set preset, src PNG, iconFont(), or icoMoon().'
+    '[expo-kit] This icon package has no getImageSource — SVG kits (Hugeicons, Lucide, Tabler) can not be drawn by the native tab bar.\n' +
+      'Render them to PNGs and use `src` on the tab:\n' +
+      '  npx @expokit/cli@latest icons --from hugeicons --names Home01Icon,Search01Icon --out assets/tab-icons\n' +
+      'Or use an icon.set preset, iconFont() or icoMoon().'
   );
 }
 

package/registry/liquidglass-tab/files/src/lib/tabs.ts

@@ -14,12 +14,14 @@ export type { IconSetName, TabIconPreset } from '@/lib/tab-icons';
 
 /**
  * Edit this file only — tabs, labels, icons, colors, and screen copy.
- * Each tab needs a route file: src/app/(tabs)/{name}.tsx (use TabScreenFromConfig).
+ * Each tab needs a route file: src/app/(tabs)/{name}.tsx — `npx @expokit/cli@latest update`
+ * creates a missing one.
  *
  * Icons (pick one per tab):
  *   icon: { set: 'Ionicons', name: 'home-outline', selected: 'home' }
  *   library + iconName (any package with getImageSource)
- *   src: require('../assets/icon.png')
+ *   src: require('../assets/icon.png') — or { default, selected }. SVG kits (Hugeicons, Lucide,
+ *     Tabler): npx @expokit/cli@latest icons --from hugeicons --names Home01Icon --out assets/tab-icons
  */
 
 export interface TabItem {