@expokit/cli 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,61 @@
+import { useCallback, useRef } from 'react';
+import {
+  Animated,
+  Platform,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { isLiquidGlassAvailable } from 'expo-glass-effect';
+
+import { TAB_BAR } from '@/lib/tabs';
+
+/**
+ * Which tab bar this device gets:
+ *   - iOS 26+ (built with Xcode 26)  → system NativeTabs with real Liquid Glass.
+ *   - iOS 18 and older, Android, web → <GlassTabBar />, a floating blur pill that
+ *     mimics Liquid Glass and collapses on scroll the same way.
+ * Set TAB_BAR.legacy = 'native' to use plain system tabs on older OS versions instead.
+ */
+export const USE_NATIVE_TABS =
+  Platform.OS !== 'web' &&
+  ((Platform.OS === 'ios' && isLiquidGlassAvailable()) || TAB_BAR.legacy === 'native');
+
+export const GLASS_BAR_HEIGHT = 64;
+
+/** 0 = expanded, 1 = collapsed into a circle. Shared by every tab screen. */
+export const tabBarCollapse = new Animated.Value(0);
+let collapsed = false;
+
+export function setTabBarCollapsed(next: boolean) {
+  if (next === collapsed) return;
+  collapsed = next;
+  Animated.spring(tabBarCollapse, {
+    toValue: next ? 1 : 0,
+    useNativeDriver: false,
+    damping: 20,
+    stiffness: 220,
+    mass: 0.9,
+  }).start();
+}
+
+/** Pass to your ScrollView's onScroll — drives the collapse on the glass fallback bar. */
+export function useTabBarScroll() {
+  const last = useRef(0);
+  return useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (USE_NATIVE_TABS || TAB_BAR.minimizeBehavior === 'never') return;
+    const y = e.nativeEvent.contentOffset.y;
+    const dy = y - last.current;
+    last.current = y;
+    const down = TAB_BAR.minimizeBehavior === 'onScrollUp' ? dy < 0 : dy > 0;
+    if (y < 24) setTabBarCollapsed(false);
+    else if (Math.abs(dy) > 6) setTabBarCollapsed(down);
+  }, []);
+}
+
+/** Bottom padding a scrolling screen needs so its last row clears the floating bar. */
+export function useTabBarInset() {
+  const insets = useSafeAreaInsets();
+  if (USE_NATIVE_TABS) return 24;
+  return GLASS_BAR_HEIGHT + Math.max(insets.bottom, 12) + 24;
+}

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

@@ -0,0 +1,130 @@
+import AntDesign from '@expo/vector-icons/AntDesign';
+import Entypo from '@expo/vector-icons/Entypo';
+import Feather from '@expo/vector-icons/Feather';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import Octicons from '@expo/vector-icons/Octicons';
+import {
+  createIconSet,
+  createIconSetFromIcoMoon,
+} from '@expo/vector-icons';
+import type { ColorValue, ImageSourcePropType } from 'react-native';
+
+/**
+ * Native UITabBar can only show icon fonts or PNG/WebP — not SVG React components.
+ *
+ * Preset sets (no import needed): Ionicons, Feather, FontAwesome, …
+ * Custom font: iconFont() / icoMoon()
+ * Custom module: library + icon on TabItem
+ * PNG: src on TabItem
+ */
+
+export type IconSetName =
+  | 'Ionicons'
+  | 'Feather'
+  | 'FontAwesome'
+  | 'FontAwesome5'
+  | 'MaterialCommunityIcons'
+  | 'MaterialIcons'
+  | 'AntDesign'
+  | 'Entypo'
+  | 'Octicons';
+
+export const ICON_SETS: Record<IconSetName, unknown> = {
+  Ionicons,
+  Feather,
+  FontAwesome,
+  FontAwesome5,
+  MaterialCommunityIcons,
+  MaterialIcons,
+  AntDesign,
+  Entypo,
+  Octicons,
+};
+
+export interface TabIconPreset {
+  set: IconSetName;
+  name: string;
+  selected?: string;
+}
+
+export type VectorIconFamily = {
+  getImageSource: (
+    name: string,
+    size: number,
+    color: ColorValue
+  ) => Promise<ImageSourcePropType | null>;
+};
+
+export function asFamily(mod: unknown): VectorIconFamily {
+  if (mod == null) {
+    throw new Error('[expo-kit] Missing icon library. Set `icon.set` or `library` on the tab.');
+  }
+
+  const pack = mod as {
+    getImageSource?: VectorIconFamily['getImageSource'];
+    getImageSourceSync?: (
+      name: string,
+      size: number,
+      color: ColorValue
+    ) => ImageSourcePropType | null;
+  };
+
+  if (typeof pack.getImageSource === 'function') {
+    return { getImageSource: pack.getImageSource.bind(pack) };
+  }
+
+  if (typeof pack.getImageSourceSync === 'function') {
+    return {
+      getImageSource: async (name, size, color) =>
+        pack.getImageSourceSync!(name, size, color),
+    };
+  }
+
+  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().'
+  );
+}
+
+export function resolveIconLibrary(tab: {
+  icon?: TabIconPreset;
+  library?: unknown;
+}): unknown | undefined {
+  if (tab.library) return tab.library;
+  if (tab.icon?.set) return ICON_SETS[tab.icon.set];
+  return undefined;
+}
+
+export function resolveIconNames(tab: {
+  icon?: TabIconPreset;
+  iconName?: string;
+  iconSelected?: string;
+}): { name?: string; selected?: string } {
+  if (tab.icon?.name) {
+    return { name: tab.icon.name, selected: tab.icon.selected };
+  }
+  if (tab.iconName) {
+    return { name: tab.iconName, selected: tab.iconSelected };
+  }
+  return {};
+}
+
+export function iconFont(
+  glyphMap: Record<string, number | string>,
+  fontFamily: string,
+  fontAsset: number | string
+): VectorIconFamily {
+  return asFamily(createIconSet(glyphMap, fontFamily, fontAsset));
+}
+
+export function icoMoon(
+  selectionJson: unknown,
+  fontFamily: string,
+  fontAsset: number | string
+): VectorIconFamily {
+  return asFamily(createIconSetFromIcoMoon(selectionJson, fontFamily, fontAsset));
+}

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

@@ -0,0 +1,108 @@
+import type { ImageSourcePropType } from 'react-native';
+
+import type { TabIconPreset } from '@/lib/tab-icons';
+
+export {
+  asFamily,
+  ICON_SETS,
+  iconFont,
+  icoMoon,
+  resolveIconLibrary,
+  resolveIconNames,
+} from '@/lib/tab-icons';
+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).
+ *
+ * Icons (pick one per tab):
+ *   icon: { set: 'Ionicons', name: 'home-outline', selected: 'home' }
+ *   library + iconName (any package with getImageSource)
+ *   src: require('../assets/icon.png')
+ */
+
+export interface TabItem {
+  /** Route name — file under (tabs)/ must match (e.g. index, explore) */
+  name: string;
+  title: string;
+  description?: string;
+  accent?: string;
+  hidden?: boolean;
+  hiddenLabel?: boolean;
+  badge?: string;
+  sf?: string | { default: string; selected: string };
+  /** Preset — no import needed */
+  icon?: TabIconPreset;
+  /** Advanced — any icon-font module or iconFont() / icoMoon() */
+  library?: unknown;
+  iconName?: string;
+  iconSelected?: string;
+  src?:
+    | ImageSourcePropType
+    | { default: ImageSourcePropType; selected: ImageSourcePropType };
+}
+
+export const TAB_BAR = {
+  /** 'automatic' | 'never' | 'onScrollDown' | 'onScrollUp' — the glass fallback supports all but 'automatic' (treated as onScrollDown). */
+  minimizeBehavior: 'onScrollDown' as 'automatic' | 'never' | 'onScrollDown' | 'onScrollUp',
+  /**
+   * What to show where Liquid Glass is unavailable (iOS 18 and older, Android, web):
+   *   'glass'  → floating blur pill that looks and collapses like Liquid Glass (default)
+   *   'native' → plain system tab bar (UITabBar / Material bottom navigation)
+   */
+  legacy: 'glass' as 'glass' | 'native',
+  /** 'auto' | 'selected' | 'labeled' | 'unlabeled' */
+  labelVisibilityMode: 'labeled' as 'auto' | 'selected' | 'labeled' | 'unlabeled',
+  /** null = transparent — only the floating glass pill shows (no solid bar fill). */
+  backgroundColor: null as null,
+  colors: {
+    tint: { light: '#007AFF', dark: '#0A84FF' },
+    inactive: { light: 'rgba(60,60,67,0.6)', dark: 'rgba(235,235,245,0.6)' },
+  },
+  labelStyle: {
+    fontSize: 10,
+    fontWeight: '400' as const,
+    selectedFontWeight: '500' as const,
+  },
+};
+
+export const TABS: TabItem[] = [
+  {
+    name: 'index',
+    title: 'Home',
+    description:
+      'Scroll down — the glass tab bar collapses into a circle. Scroll up to expand all tabs again.',
+    accent: '#6366f1',
+    sf: { default: 'house', selected: 'house.fill' },
+    icon: { set: 'Ionicons', name: 'home-outline', selected: 'home' },
+  },
+  {
+    name: 'explore',
+    title: 'Explore',
+    description: 'Same collapse on this tab — only Explore stays as a glass circle when scrolling.',
+    accent: '#8b5cf6',
+    sf: { default: 'square.grid.2x2', selected: 'square.grid.2x2.fill' },
+    icon: { set: 'MaterialCommunityIcons', name: 'view-grid-outline', selected: 'view-grid' },
+  },
+  {
+    name: 'alerts',
+    title: 'Alerts',
+    description: 'Every tab minimizes the same way. The active tab remains in the corner.',
+    accent: '#0ea5e9',
+    sf: { default: 'bell', selected: 'bell.fill' },
+    icon: { set: 'Feather', name: 'bell' },
+  },
+  {
+    name: 'profile',
+    title: 'You',
+    description: 'Change everything in src/lib/tabs.ts — icons, labels, colors, and screen text.',
+    accent: '#10b981',
+    sf: { default: 'person.circle', selected: 'person.circle.fill' },
+    icon: { set: 'FontAwesome', name: 'user-circle-o', selected: 'user-circle' },
+  },
+];
+
+export function getTab(name: string) {
+  return TABS.find((tab) => tab.name === name);
+}

package/registry/liquidglass-tab.json

@@ -0,0 +1,23 @@
+{
+  "name": "liquidglass-tab",
+  "type": "template",
+  "title": "Native bottom tabs (Liquid Glass)",
+  "description": "Real Liquid Glass NativeTabs on iOS 26+, and a floating blur glass tab bar with the same scroll-collapse on iOS 18 and older, Android and web.",
+  "tier": "free",
+  "dependencies": [
+    "expo-router",
+    "expo-glass-effect",
+    "expo-blur",
+    "expo-haptics",
+    "expo-splash-screen",
+    "@expo/vector-icons",
+    "react-native-gesture-handler",
+    "react-native-safe-area-context",
+    "react-native-screens",
+    "react-native-reanimated",
+    "react-native-worklets"
+  ],
+  "registryDependencies": [],
+  "sharedFiles": [],
+  "filesDir": "liquidglass-tab/files"
+}