react-native-magic-tab-bar 1.0.0

package/lib/typescript/MagicTabs.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import type { MagicTabBarTheme, MagicTabBarVariant, MagicTabConfig } from './types';
+export interface MagicTabsProps {
+    /**
+     * The tabs to render, in order. Each entry maps a route to an icon + label.
+     * When omitted, a default set is used — Home, Explore, Notifications, Inbox
+     * and Profile — with matching Ionicons (see {@link defaultTabs}).
+     */
+    tabs?: MagicTabConfig[];
+    /** Override any part of the default theme. */
+    theme?: Partial<MagicTabBarTheme>;
+    /** Position the bar floating over content (default) or docked in-flow. */
+    variant?: MagicTabBarVariant;
+    /**
+     * Make the bar background see-through. Off by default. When `true`, control
+     * the strength with `transparency`.
+     */
+    isTransparent?: boolean;
+    /**
+     * Opacity of the bar background while `isTransparent` is true, from 0 to 1
+     * (e.g. `0.4` = 40% visible). Clamped to a minimum so the bar never fully
+     * disappears. Defaults to 0.6.
+     */
+    transparency?: number;
+    /**
+     * Render the bar as native iOS Liquid Glass (via `expo-glass-effect`).
+     * Requires iOS 26+; on any other platform it falls back to the translucent
+     * `barColor`. No drop shadow is drawn in glass/transparent mode.
+     */
+    glass?: boolean;
+    /** Render a custom background (e.g. a blur/glass view) behind the bar. */
+    renderBackground?: () => ReactNode;
+}
+/**
+ * A drop-in custom tab bar for Expo Router.
+ *
+ * Use it in an `app/_layout.tsx` and pass your routes, icons and labels as props:
+ *
+ * ```tsx
+ * <MagicTabs
+ *   tabs={[
+ *     { name: 'index',  href: '/',        label: 'Home',   icon: ({ color }) => <Home color={color} /> },
+ *     { name: 'search', href: '/search',  label: 'Search', icon: ({ color }) => <Search color={color} /> },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function MagicTabs({ tabs, theme: themeOverride, variant, isTransparent, transparency, glass, renderBackground, }: MagicTabsProps): import("react").JSX.Element;
+//# sourceMappingURL=MagicTabs.d.ts.map

package/lib/typescript/MagicTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagicTabs.d.ts","sourceRoot":"","sources":["../../src/MagicTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEpF,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAClC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,MAAM,SAAS,CAAC;CACpC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAkB,EAClB,KAAK,EAAE,aAAa,EACpB,OAAO,EACP,aAAa,EACb,YAAY,EACZ,KAAK,EACL,gBAAgB,GACjB,EAAE,cAAc,+BAwBhB"}

package/lib/typescript/defaultTabs.d.ts

@@ -0,0 +1,10 @@
+import type { MagicTabConfig } from "./types";
+/**
+ * The tabs used when `<MagicTabs />` is rendered without a `tabs` prop:
+ * Home, Explore, Notifications, Inbox and Profile, each with a matching Ionicon.
+ *
+ * Assumes the app has routes named `index` (`/`), `explore`, `notifications`,
+ * `inbox` and `profile`. Pass your own `tabs` to `<MagicTabs />` to override.
+ */
+export declare const defaultTabs: MagicTabConfig[];
+//# sourceMappingURL=defaultTabs.d.ts.map

package/lib/typescript/defaultTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultTabs.d.ts","sourceRoot":"","sources":["../../src/defaultTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,SAAS,CAAC;AAcjE;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,cAAc,EA+BvC,CAAC"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,10 @@
+export { MagicTabs } from './MagicTabs';
+export { MagicTabBar } from './MagicTabBar';
+export { MagicTabItem } from './MagicTabItem';
+export { defaultTabs } from './defaultTabs';
+export { defaultTheme } from './theme';
+export type { MagicTabsProps } from './MagicTabs';
+export type { MagicTabBarProps } from './MagicTabBar';
+export type { MagicTabItemProps } from './MagicTabItem';
+export type { MagicTabConfig, MagicTabIconProps, MagicTabBarTheme, MagicTabBarVariant, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,SAAS,CAAC"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/theme.d.ts

@@ -0,0 +1,4 @@
+import type { MagicTabBarTheme } from './types';
+/** Default dark, floating-pill theme. */
+export declare const defaultTheme: MagicTabBarTheme;
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,yCAAyC;AACzC,eAAO,MAAM,YAAY,EAAE,gBAW1B,CAAC"}

package/lib/typescript/types.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import type { Href } from 'expo-router';
+/** Props passed to each tab's `icon` render function. */
+export interface MagicTabIconProps {
+    /** Whether this tab is the active one. */
+    focused: boolean;
+    /** Resolved color for the icon (active or inactive color from the theme). */
+    color: string;
+    /** Icon size in points (from the theme). */
+    size: number;
+}
+/** Configuration for a single tab. */
+export interface MagicTabConfig {
+    /** Route name — must match the file in the `app/` directory (e.g. `"index"`, `"search"`). */
+    name: string;
+    /** Destination href, e.g. `"/"` or `"/search"`. */
+    href: Href;
+    /** Optional text label rendered next to the icon while the tab is active. */
+    label?: string;
+    /** Renders the tab's icon. */
+    icon: (props: MagicTabIconProps) => ReactNode;
+}
+/** Visual configuration for the tab bar. */
+export interface MagicTabBarTheme {
+    /** Background color of the bar (ignored when `renderBackground` is provided). */
+    barColor: string;
+    /** Background color of the pill behind the active tab. */
+    activePillColor: string;
+    /** Icon/label color for the active tab. */
+    activeColor: string;
+    /** Icon color for inactive tabs. */
+    inactiveColor: string;
+    /** Icon size in points. */
+    iconSize: number;
+    /** Font size of the active tab's label, in points. */
+    fontSize: number;
+    /** Height of the bar. */
+    height: number;
+    /** Corner radius of the bar and the active pill. */
+    radius: number;
+    /** Horizontal margin between the bar and the screen edges. */
+    horizontalMargin: number;
+    /** Extra space below the bar, added on top of the safe-area inset. */
+    bottomInset: number;
+}
+/** How the bar is positioned relative to screen content. */
+export type MagicTabBarVariant = 'floating' | 'docked';
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAExC,yDAAyD;AACzD,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,OAAO,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,sCAAsC;AACtC,MAAM,WAAW,cAAc;IAC7B,6FAA6F;IAC7F,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,IAAI,EAAE,IAAI,CAAC;IACX,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,IAAI,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;CAC/C;AAED,4CAA4C;AAC5C,MAAM,WAAW,gBAAgB;IAC/B,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,eAAe,EAAE,MAAM,CAAC;IACxB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,QAAQ,EAAE,MAAM,CAAC;IACjB,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,gBAAgB,EAAE,MAAM,CAAC;IACzB,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,4DAA4D;AAC5D,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,QAAQ,CAAC"}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "react-native-magic-tab-bar",
+  "version": "1.0.0",
+  "description": "Customizable floating tab bar for Expo Router (SDK 56+). Bring your own icons and labels.",
+  "workspaces": [
+    "example"
+  ],
+  "main": "./lib/module/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/index.d.ts",
+  "source": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/*.test.*",
+    "!**/*.spec.*"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc --noEmit",
+    "example": "npm --prefix example run start"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-router",
+    "tab-bar",
+    "tabbar",
+    "tabs",
+    "bottom-tabs",
+    "navigation",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Bhavinpethani04/react-native-magic-tab-bar.git"
+  },
+  "author": "Bhavin Pethani <pethanibhavin004@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.2"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "expo-glass-effect": ">=56.0.0",
+    "expo-router": ">=56.0.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-worklets": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-worklets": {
+      "optional": true
+    },
+    "expo-glass-effect": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "del-cli": "^6.0.0",
+    "react-native-builder-bob": "^0.40.0",
+    "typescript": "~6.0.3"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  }
+}

package/src/MagicTabBar.tsx

@@ -0,0 +1,181 @@
+import { forwardRef, type ReactNode } from "react";
+import {
+  StyleSheet,
+  View,
+  type View as RNView,
+  type ViewProps,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { MagicTabBarTheme, MagicTabBarVariant } from "./types";
+
+declare const require: (moduleName: string) => unknown;
+
+/**
+ * `expo-glass-effect` is an optional peer dependency. We load it through a
+ * guarded `require` so the library still installs and runs for consumers who
+ * don't need (or install) it — when it's absent, `glass` mode silently falls
+ * back to the translucent `barColor`. The try/catch lets Metro treat it as an
+ * optional dependency instead of failing the bundle.
+ */
+const glassEffect = (() => {
+  try {
+    return require("expo-glass-effect") as typeof import("expo-glass-effect");
+  } catch {
+    return null;
+  }
+})();
+
+/** Lowest bar opacity we allow, so a transparent bar never becomes invisible. */
+export const MIN_BAR_OPACITY = 0.1;
+
+export interface MagicTabBarProps extends ViewProps {
+  /** Resolved theme. Provided automatically by `MagicTabs`. */
+  theme: MagicTabBarTheme;
+  /** Position the bar floating over content (default) or docked in-flow. */
+  variant?: MagicTabBarVariant;
+  /**
+   * Make the bar background see-through. Off by default — the bar is fully
+   * opaque. Set the strength of the effect with `transparency`.
+   */
+  isTransparent?: boolean;
+  /**
+   * Opacity of the bar background while `isTransparent` is true, from 0 to 1
+   * (e.g. `0.4` = 40% visible). Clamped to a minimum of {@link MIN_BAR_OPACITY}
+   * so the bar never disappears. Defaults to 0.6 when omitted.
+   */
+  transparency?: number;
+  /**
+   * Render the bar as native iOS Liquid Glass (via `expo-glass-effect`).
+   * Requires iOS 26+; on any other platform/version it automatically falls
+   * back to the translucent `barColor` (honoring `transparency`).
+   */
+  glass?: boolean;
+  /** Render a custom background (e.g. a blur/glass view) behind the bar. */
+  renderBackground?: () => ReactNode;
+  /** The tab items. Provided automatically by `MagicTabs`. */
+  children?: ReactNode;
+}
+
+/**
+ * The visual container of the tab bar. Designed to be used as the `asChild`
+ * target of an Expo Router `<TabList>`.
+ */
+export const MagicTabBar = forwardRef<RNView, MagicTabBarProps>(
+  function MagicTabBar(
+    {
+      theme,
+      variant = "floating",
+      isTransparent = false,
+      transparency = 0.6,
+      glass = false,
+      renderBackground,
+      children,
+      style,
+      ...rest
+    },
+    ref,
+  ) {
+    const insets = useSafeAreaInsets();
+    const floating = variant !== "docked";
+    // Native Liquid Glass needs the optional `expo-glass-effect` dep and iOS
+    // 26+; everywhere else we fall back to the translucent color background.
+    const useGlass = glass && !!glassEffect?.isLiquidGlassAvailable();
+    // Only a transparent bar fades; otherwise it stays fully opaque. The level
+    // is clamped so it never drops below MIN_BAR_OPACITY or above 1.
+    const barOpacity = isTransparent
+      ? Math.min(Math.max(transparency, MIN_BAR_OPACITY), 1)
+      : 1;
+    // A see-through bar shouldn't cast a hard drop shadow — it reads as an odd
+    // halo around the translucent fill. Keep the shadow only for a solid bar.
+    const seeThrough = useGlass || isTransparent;
+
+    return (
+      <View
+        ref={ref}
+        pointerEvents="box-none"
+        style={[
+          floating ? styles.floatingWrapper : styles.dockedWrapper,
+          {
+            paddingHorizontal: theme.horizontalMargin,
+            paddingBottom: (floating ? insets.bottom : 0) + theme.bottomInset,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.bar,
+            !seeThrough && styles.barShadow,
+            { height: theme.height, borderRadius: theme.radius },
+          ]}
+        >
+          {renderBackground ? (
+            <View
+              pointerEvents="none"
+              style={[
+                StyleSheet.absoluteFill,
+                { borderRadius: theme.radius, overflow: "hidden" },
+              ]}
+            >
+              {renderBackground()}
+            </View>
+          ) : useGlass && glassEffect ? (
+            // Native iOS Liquid Glass. We tint it with the bar color so themes
+            // still carry through, and clip it to the bar's rounded corners.
+            <glassEffect.GlassView
+              pointerEvents="none"
+              glassEffectStyle="regular"
+              tintColor={theme.barColor}
+              style={[StyleSheet.absoluteFill, { borderRadius: theme.radius }]}
+            />
+          ) : (
+            // Background color lives in its own layer so `transparency` fades
+            // only the bar's fill, never the icons or labels on top of it.
+            <View
+              pointerEvents="none"
+              style={[
+                StyleSheet.absoluteFill,
+                {
+                  backgroundColor: theme.barColor,
+                  borderRadius: theme.radius,
+                  opacity: barOpacity,
+                },
+              ]}
+            />
+          )}
+          <View style={[styles.row, style]} {...rest}>
+            {children}
+          </View>
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  floatingWrapper: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  dockedWrapper: {
+    width: "100%",
+  },
+  bar: {
+    flexDirection: "row",
+  },
+  barShadow: {
+    shadowColor: "#000",
+    shadowOpacity: 0.25,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 12,
+  },
+  row: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingHorizontal: 6,
+  },
+});

package/src/MagicTabItem.tsx

@@ -0,0 +1,123 @@
+import { forwardRef, useEffect, type ReactNode } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  type GestureResponderEvent,
+  type View as RNView,
+} from 'react-native';
+import Animated, {
+  FadeIn,
+  LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import type { MagicTabBarTheme, MagicTabIconProps } from './types';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const SPRING = { mass: 0.6, damping: 18, stiffness: 180 } as const;
+const transition = LinearTransition.springify()
+  .mass(SPRING.mass)
+  .damping(SPRING.damping)
+  .stiffness(SPRING.stiffness);
+
+export interface MagicTabItemProps {
+  /** Renders the icon. Provided automatically by `MagicTabs`. */
+  icon: (props: MagicTabIconProps) => ReactNode;
+  /** Optional label shown while the tab is active. */
+  label?: string;
+  /** Resolved theme. Provided automatically by `MagicTabs`. */
+  theme: MagicTabBarTheme;
+
+  // ---- Injected by <TabTrigger asChild> ----
+  /** @internal */
+  isFocused?: boolean;
+  /** @internal */
+  onPress?: (event: GestureResponderEvent) => void;
+  /** @internal */
+  onLongPress?: (event: GestureResponderEvent) => void;
+  /** @internal */
+  href?: string;
+}
+
+/**
+ * A single tab. Designed to be used as the `asChild` target of an
+ * Expo Router `<TabTrigger>`, which injects the focus state and press handlers.
+ *
+ * Each tab sizes to its content — just the icon when inactive, icon + label
+ * when active — so the active label is never clipped, on any screen width.
+ */
+export const MagicTabItem = forwardRef<RNView, MagicTabItemProps>(
+  function MagicTabItem({ icon, label, theme, isFocused, onPress, onLongPress }, ref) {
+    const focused = Boolean(isFocused);
+    const progress = useSharedValue(focused ? 1 : 0);
+
+    useEffect(() => {
+      progress.value = withSpring(focused ? 1 : 0, SPRING);
+    }, [focused, progress]);
+
+    const pillStyle = useAnimatedStyle(() => ({
+      opacity: progress.value,
+      transform: [{ scale: 0.8 + progress.value * 0.2 }],
+    }));
+
+    const color = focused ? theme.activeColor : theme.inactiveColor;
+    const showLabel = focused && !!label;
+
+    return (
+      <AnimatedPressable
+        ref={ref}
+        onPress={onPress}
+        onLongPress={onLongPress}
+        accessibilityRole="tab"
+        accessibilityState={{ selected: focused }}
+        layout={transition}
+        style={[styles.pressable, focused && styles.pressableActive]}
+      >
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: theme.activePillColor, borderRadius: theme.radius },
+            pillStyle,
+          ]}
+        />
+        {icon({ focused, color, size: theme.iconSize })}
+        {showLabel ? (
+          <Animated.Text
+            entering={FadeIn.duration(150)}
+            numberOfLines={1}
+            style={[styles.label, { color, fontSize: theme.fontSize }]}
+          >
+            {label}
+          </Animated.Text>
+        ) : null}
+      </AnimatedPressable>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  pressable: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  // The active tab gets extra padding so its pill is a touch larger than the
+  // inactive icons, making the current tab easy to spot. flexShrink lets it
+  // truncate its label only as a last resort on very narrow screens.
+  pressableActive: {
+    flexShrink: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 18,
+  },
+  label: {
+    fontWeight: '600',
+    flexShrink: 1,
+  },
+});

package/src/MagicTabs.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react';
+import { Tabs, TabList, TabSlot, TabTrigger } from 'expo-router/ui';
+import { MagicTabBar } from './MagicTabBar';
+import { MagicTabItem } from './MagicTabItem';
+import { defaultTabs } from './defaultTabs';
+import { defaultTheme } from './theme';
+import type { MagicTabBarTheme, MagicTabBarVariant, MagicTabConfig } from './types';
+
+export interface MagicTabsProps {
+  /**
+   * The tabs to render, in order. Each entry maps a route to an icon + label.
+   * When omitted, a default set is used — Home, Explore, Notifications, Inbox
+   * and Profile — with matching Ionicons (see {@link defaultTabs}).
+   */
+  tabs?: MagicTabConfig[];
+  /** Override any part of the default theme. */
+  theme?: Partial<MagicTabBarTheme>;
+  /** Position the bar floating over content (default) or docked in-flow. */
+  variant?: MagicTabBarVariant;
+  /**
+   * Make the bar background see-through. Off by default. When `true`, control
+   * the strength with `transparency`.
+   */
+  isTransparent?: boolean;
+  /**
+   * Opacity of the bar background while `isTransparent` is true, from 0 to 1
+   * (e.g. `0.4` = 40% visible). Clamped to a minimum so the bar never fully
+   * disappears. Defaults to 0.6.
+   */
+  transparency?: number;
+  /**
+   * Render the bar as native iOS Liquid Glass (via `expo-glass-effect`).
+   * Requires iOS 26+; on any other platform it falls back to the translucent
+   * `barColor`. No drop shadow is drawn in glass/transparent mode.
+   */
+  glass?: boolean;
+  /** Render a custom background (e.g. a blur/glass view) behind the bar. */
+  renderBackground?: () => ReactNode;
+}
+
+/**
+ * A drop-in custom tab bar for Expo Router.
+ *
+ * Use it in an `app/_layout.tsx` and pass your routes, icons and labels as props:
+ *
+ * ```tsx
+ * <MagicTabs
+ *   tabs={[
+ *     { name: 'index',  href: '/',        label: 'Home',   icon: ({ color }) => <Home color={color} /> },
+ *     { name: 'search', href: '/search',  label: 'Search', icon: ({ color }) => <Search color={color} /> },
+ *   ]}
+ * />
+ * ```
+ */
+export function MagicTabs({
+  tabs = defaultTabs,
+  theme: themeOverride,
+  variant,
+  isTransparent,
+  transparency,
+  glass,
+  renderBackground,
+}: MagicTabsProps) {
+  const theme: MagicTabBarTheme = { ...defaultTheme, ...themeOverride };
+
+  return (
+    <Tabs>
+      <TabSlot />
+      <TabList asChild>
+        <MagicTabBar
+          theme={theme}
+          variant={variant}
+          isTransparent={isTransparent}
+          transparency={transparency}
+          glass={glass}
+          renderBackground={renderBackground}
+        >
+          {tabs.map((tab) => (
+            <TabTrigger key={tab.name} name={tab.name} href={tab.href} asChild>
+              <MagicTabItem icon={tab.icon} label={tab.label} theme={theme} />
+            </TabTrigger>
+          ))}
+        </MagicTabBar>
+      </TabList>
+    </Tabs>
+  );
+}