react-native-magic-tab-bar 1.0.0 → 2.0.0

package/lib/typescript/MagicTabItem.d.ts

@@ -1,11 +1,37 @@
 import { type ReactNode } from 'react';
-import { type GestureResponderEvent, type View as RNView } from 'react-native';
-import type { MagicTabBarTheme, MagicTabIconProps } from './types';
+import { View, type GestureResponderEvent } from 'react-native';
+import type { MagicLabelMode, MagicLabelPosition, MagicTabBarTheme, MagicTabIconProps, MagicTabPressHandler } from './types';
 export interface MagicTabItemProps {
     /** Renders the icon. Provided automatically by `MagicTabs`. */
     icon: (props: MagicTabIconProps) => ReactNode;
-    /** Optional label shown while the tab is active. */
+    /** Optional label text. */
     label?: string;
+    /** When the label is shown: `'active'` (default), `'always'` or `'never'`. */
+    labelMode?: MagicLabelMode;
+    /** Whether the label sits to the right of the icon (default) or below it. */
+    labelPosition?: MagicLabelPosition;
+    /**
+     * Badge shown over the icon. `true` renders a dot; a number/string renders
+     * a count bubble (numbers above 99 show as `99+`). Falsy renders nothing.
+     */
+    badge?: number | string | boolean;
+    /** Dim the tab and block presses. */
+    disabled?: boolean;
+    /** Render as a raised, circular action ("FAB") button. */
+    variant?: 'action';
+    /**
+     * Compact "light" mode: small icon-only tab, no label. Provided by
+     * `MagicTabs`. Uses its own dedicated styles.
+     */
+    isLight?: boolean;
+    /** Fire a selection haptic on press. Requires `expo-haptics`. */
+    haptics?: boolean;
+    /** Route name, used for the press callbacks. Provided by `MagicTabs`. */
+    name?: string;
+    /** Called when the tab is pressed. */
+    onTabPress?: MagicTabPressHandler;
+    /** Called when the tab is long-pressed. */
+    onTabLongPress?: MagicTabPressHandler;
     /** Resolved theme. Provided automatically by `MagicTabs`. */
     theme: MagicTabBarTheme;
     /** @internal */
@@ -24,5 +50,5 @@ export interface MagicTabItemProps {
  * 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 declare const MagicTabItem: import("react").ForwardRefExoticComponent<MagicTabItemProps & import("react").RefAttributes<RNView>>;
+export declare const MagicTabItem: import("react").NamedExoticComponent<MagicTabItemProps & import("react").RefAttributes<View>>;
 //# sourceMappingURL=MagicTabItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MagicTabItem.d.ts","sourceRoot":"","sources":["../../src/MagicTabItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,IAAI,IAAI,MAAM,EACpB,MAAM,cAAc,CAAC;AAQtB,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAUnE,MAAM,WAAW,iBAAiB;IAChC,+DAA+D;IAC/D,IAAI,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAC9C,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IAGxB,gBAAgB;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,gBAAgB;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,sGAgDxB,CAAC"}
+{"version":3,"file":"MagicTabItem.d.ts","sourceRoot":"","sources":["../../src/MagicTabItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1F,OAAO,EAIL,IAAI,EACJ,KAAK,qBAAqB,EAE3B,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAmCjB,MAAM,WAAW,iBAAiB;IAChC,+DAA+D;IAC/D,IAAI,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAC9C,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,2CAA2C;IAC3C,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,6DAA6D;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IAGxB,gBAAgB;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,gBAAgB;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,+FAkPvB,CAAC"}

package/lib/typescript/MagicTabs.d.ts

@@ -1,14 +1,39 @@
-import type { ReactNode } from 'react';
-import type { MagicTabBarTheme, MagicTabBarVariant, MagicTabConfig } from './types';
+import { type ReactNode } from 'react';
+import type { MagicLabelMode, MagicLabelPosition, MagicTabBarTheme, MagicTabBarVariant, MagicTabConfig, MagicTabPressHandler } 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}).
+     *
+     * Bring your own icons. For a ready-made demo set, import it explicitly:
+     * `import { defaultTabs } from 'react-native-magic-tab-bar/default-tabs'`.
      */
-    tabs?: MagicTabConfig[];
+    tabs: MagicTabConfig[];
     /** Override any part of the default theme. */
     theme?: Partial<MagicTabBarTheme>;
+    /**
+     * When to show tab labels:
+     * - `true` / `'active'` — only on the focused tab (default).
+     * - `'always'` — on every tab, all the time.
+     * - `false` / `'never'` — icon-only bar.
+     *
+     * A tab without a `label` never shows text. Individual tabs can override
+     * this via their `showLabel` config field.
+     */
+    showLabels?: boolean | MagicLabelMode;
+    /** Place labels to the right of icons (default) or below them. */
+    labelPosition?: MagicLabelPosition;
+    /**
+     * Compact "light" mode. Off by default. When `true`, the bar is shorter,
+     * shows small icons only (labels hidden), and floats with extra bottom
+     * margin. Uses its own dedicated styles.
+     */
+    isLight?: boolean;
+    /**
+     * Extra space between the bar and the bottom edge, in "light" mode only.
+     * Added on top of the safe-area inset. Ignored unless `isLight` is `true`.
+     * Defaults to 14.
+     */
+    lightBottomMargin?: number;
     /** Position the bar floating over content (default) or docked in-flow. */
     variant?: MagicTabBarVariant;
     /**
@@ -30,6 +55,18 @@ export interface MagicTabsProps {
     glass?: boolean;
     /** Render a custom background (e.g. a blur/glass view) behind the bar. */
     renderBackground?: () => ReactNode;
+    /**
+     * Fire a selection haptic when a tab is pressed. Requires the optional
+     * `expo-haptics` package; without it this prop has no effect. Off by default.
+     */
+    haptics?: boolean;
+    /**
+     * Called when any tab is pressed, with the tab's `name` and whether it was
+     * already focused — handy for "scroll to top" / "reset stack" on re-press.
+     */
+    onTabPress?: MagicTabPressHandler;
+    /** Called when any tab is long-pressed. */
+    onTabLongPress?: MagicTabPressHandler;
 }
 /**
  * A drop-in custom tab bar for Expo Router.
@@ -45,5 +82,5 @@ export interface MagicTabsProps {
  * />
  * ```
  */
-export declare function MagicTabs({ tabs, theme: themeOverride, variant, isTransparent, transparency, glass, renderBackground, }: MagicTabsProps): import("react").JSX.Element;
+export declare function MagicTabs({ tabs, theme: themeOverride, showLabels, labelPosition, isLight, lightBottomMargin, variant, isTransparent, transparency, glass, renderBackground, haptics, onTabPress, onTabLongPress, }: MagicTabsProps): import("react").JSX.Element;
 //# sourceMappingURL=MagicTabs.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"MagicTabs.d.ts","sourceRoot":"","sources":["../../src/MagicTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOhD,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACrB,MAAM,SAAS,CAAC;AA+DjB,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAClC;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IACtC,kEAAkE;IAClE,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,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;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,2CAA2C;IAC3C,cAAc,CAAC,EAAE,oBAAoB,CAAC;CACvC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EAAE,aAAa,EACpB,UAAiB,EACjB,aAAuB,EACvB,OAAe,EACf,iBAAiB,EACjB,OAAO,EACP,aAAa,EACb,YAAY,EACZ,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,cAAc,GACf,EAAE,cAAc,+BAkEhB"}

package/lib/typescript/defaultTabs.d.ts

@@ -1,10 +1,11 @@
 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.
+ * A ready-made demo tab set — Home, Explore, Notifications, Inbox and Profile,
+ * each with a matching Ionicon. Opt in via the subpath:
+ * `import { defaultTabs } from 'react-native-magic-tab-bar/default-tabs'`.
  *
- * Assumes the app has routes named `index` (`/`), `explore`, `notifications`,
- * `inbox` and `profile`. Pass your own `tabs` to `<MagicTabs />` to override.
+ * Requires `@expo/vector-icons` and assumes the app has routes named `index`
+ * (`/`), `explore`, `notifications`, `inbox` and `profile`.
  */
 export declare const defaultTabs: MagicTabConfig[];
 //# sourceMappingURL=defaultTabs.d.ts.map

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

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

package/lib/typescript/index.d.ts

@@ -1,10 +1,9 @@
 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';
+export type { MagicTabConfig, MagicTabIconProps, MagicTabBarTheme, MagicTabBarVariant, MagicTabPressHandler, MagicLabelMode, MagicLabelPosition, MagicSpringConfig, } from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC,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,EAClB,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,SAAS,CAAC"}

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

@@ -1 +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"}
+{"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,gBAgB1B,CAAC"}

package/lib/typescript/types.d.ts

@@ -17,9 +17,59 @@ export interface MagicTabConfig {
     href: Href;
     /** Optional text label rendered next to the icon while the tab is active. */
     label?: string;
+    /**
+     * Show this tab's label while active. Overrides the bar-level `showLabels`
+     * prop for this tab only. A tab without a `label` never shows text.
+     */
+    showLabel?: boolean;
+    /**
+     * Badge shown over the icon. `true` renders a small dot; a number or string
+     * renders a count bubble (numbers above 99 display as `99+`). Falsy values
+     * (`false`, `0`, `undefined`, `''`) render nothing.
+     */
+    badge?: number | string | boolean;
+    /**
+     * Dim the tab and block navigation to it. The tab still renders but cannot
+     * be pressed. Off by default.
+     */
+    disabled?: boolean;
+    /**
+     * Render this tab as a raised, circular action ("FAB") button — common for a
+     * center "create"/"compose" tab. Ignores label/pill styling and uses the
+     * theme's `actionColor`/`actionIconColor`. Defaults to a normal tab.
+     */
+    variant?: 'action';
+    /**
+     * When this tab is the active route, switch the whole bar into compact
+     * "light" mode (short, narrow, icon-only). Lets a single scroll-heavy screen
+     * (e.g. a feed) use a minimal bar while the other tabs keep the full one. The
+     * transition between modes is animated.
+     */
+    isLight?: boolean;
     /** Renders the tab's icon. */
     icon: (props: MagicTabIconProps) => ReactNode;
 }
+/**
+ * Fired when a tab is pressed. `name` is the tab's route name and `focused`
+ * is whether that tab was already the active one (useful for "scroll to top"
+ * or "reset stack" on re-press).
+ */
+export type MagicTabPressHandler = (name: string, focused: boolean) => void;
+/**
+ * When labels are shown:
+ * - `'active'` — only on the focused tab (default).
+ * - `'always'` — on every tab, all the time.
+ * - `'never'`  — icon-only bar.
+ */
+export type MagicLabelMode = 'active' | 'always' | 'never';
+/** Where a tab's label sits relative to its icon. */
+export type MagicLabelPosition = 'right' | 'bottom';
+/** Spring parameters for the tab's focus/label animations. */
+export interface MagicSpringConfig {
+    mass: number;
+    damping: number;
+    stiffness: number;
+}
 /** Visual configuration for the tab bar. */
 export interface MagicTabBarTheme {
     /** Background color of the bar (ignored when `renderBackground` is provided). */
@@ -38,10 +88,20 @@ export interface MagicTabBarTheme {
     height: number;
     /** Corner radius of the bar and the active pill. */
     radius: number;
+    /** Background color of a tab's badge. */
+    badgeColor: string;
+    /** Text color of a tab's badge count. */
+    badgeTextColor: string;
+    /** Background color of an `action`-variant tab. */
+    actionColor: string;
+    /** Icon color of an `action`-variant tab. */
+    actionIconColor: string;
     /** 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;
+    /** Spring used for the focus pill and label transitions. */
+    spring: MagicSpringConfig;
 }
 /** How the bar is positioned relative to screen content. */
 export type MagicTabBarVariant = 'floating' | 'docked';

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

@@ -1 +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"}
+{"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;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,IAAI,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;CAC/C;AAED;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAE5E;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,qDAAqD;AACrD,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpD,8DAA8D;AAC9D,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;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,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,eAAe,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,gBAAgB,EAAE,MAAM,CAAC;IACzB,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,4DAA4D;AAC5D,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-magic-tab-bar",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Customizable floating tab bar for Expo Router (SDK 56+). Bring your own icons and labels.",
   "workspaces": [
     "example"
@@ -9,11 +9,16 @@
   "module": "./lib/module/index.js",
   "types": "./lib/typescript/index.d.ts",
   "source": "./src/index.tsx",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./lib/typescript/index.d.ts",
       "default": "./lib/module/index.js"
     },
+    "./default-tabs": {
+      "types": "./lib/typescript/defaultTabs.d.ts",
+      "default": "./lib/module/defaultTabs.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -48,12 +53,11 @@
   },
   "author": "Bhavin Pethani <pethanibhavin004@gmail.com>",
   "license": "MIT",
-  "dependencies": {
-    "@expo/vector-icons": "^15.0.2"
-  },
   "peerDependencies": {
+    "@expo/vector-icons": "*",
     "expo": "*",
     "expo-glass-effect": ">=56.0.0",
+    "expo-haptics": ">=56.0.0",
     "expo-router": ">=56.0.0",
     "react": "*",
     "react-native": "*",
@@ -62,11 +66,17 @@
     "react-native-worklets": "*"
   },
   "peerDependenciesMeta": {
+    "@expo/vector-icons": {
+      "optional": true
+    },
     "react-native-worklets": {
       "optional": true
     },
     "expo-glass-effect": {
       "optional": true
+    },
+    "expo-haptics": {
+      "optional": true
     }
   },
   "devDependencies": {

package/src/MagicTabBar.tsx

@@ -5,8 +5,31 @@ import {
   type View as RNView,
   type ViewProps,
 } from "react-native";
+import Animated, { LinearTransition } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import type { MagicTabBarTheme, MagicTabBarVariant } from "./types";
+import type {
+  MagicLabelPosition,
+  MagicTabBarTheme,
+  MagicTabBarVariant,
+} from "./types";
+
+/**
+ * Layout transition used to morph the bar between its normal and compact
+ * "light" shapes (width, height and bottom margin) when the active tab changes.
+ */
+const barTransition = LinearTransition.springify()
+  .mass(0.5)
+  .damping(16)
+  .stiffness(160);
+
+/** Extra bar height when labels sit below icons, so they have room to breathe. */
+const BOTTOM_LABEL_EXTRA_HEIGHT = 6;
+
+/** Fixed height of the compact "light" bar. */
+const LIGHT_BAR_HEIGHT = 46;
+
+/** Default extra bottom margin added below the bar in "light" mode. */
+const LIGHT_EXTRA_BOTTOM_MARGIN = 14;
 
 declare const require: (moduleName: string) => unknown;
 
@@ -33,6 +56,12 @@ export interface MagicTabBarProps extends ViewProps {
   theme: MagicTabBarTheme;
   /** Position the bar floating over content (default) or docked in-flow. */
   variant?: MagicTabBarVariant;
+  /**
+   * Where the tab labels sit. `'bottom'` gives the bar extra height so the
+   * stacked icon+label has room to breathe. Provided automatically by
+   * `MagicTabs`.
+   */
+  labelPosition?: MagicLabelPosition;
   /**
    * Make the bar background see-through. Off by default — the bar is fully
    * opaque. Set the strength of the effect with `transparency`.
@@ -52,6 +81,17 @@ export interface MagicTabBarProps extends ViewProps {
   glass?: boolean;
   /** Render a custom background (e.g. a blur/glass view) behind the bar. */
   renderBackground?: () => ReactNode;
+  /**
+   * Compact "light" mode: a shorter, icon-only bar with extra bottom margin.
+   * Provided automatically by `MagicTabs`.
+   */
+  isLight?: boolean;
+  /**
+   * Extra bottom margin below the bar in "light" mode only. Added on top of the
+   * safe-area inset and `theme.bottomInset`. Ignored when `isLight` is false.
+   * Defaults to {@link LIGHT_EXTRA_BOTTOM_MARGIN}.
+   */
+  lightBottomMargin?: number;
   /** The tab items. Provided automatically by `MagicTabs`. */
   children?: ReactNode;
 }
@@ -65,10 +105,13 @@ export const MagicTabBar = forwardRef<RNView, MagicTabBarProps>(
     {
       theme,
       variant = "floating",
+      labelPosition = "right",
       isTransparent = false,
       transparency = 0.6,
       glass = false,
       renderBackground,
+      isLight = false,
+      lightBottomMargin = LIGHT_EXTRA_BOTTOM_MARGIN,
       children,
       style,
       ...rest
@@ -77,6 +120,16 @@ export const MagicTabBar = forwardRef<RNView, MagicTabBarProps>(
   ) {
     const insets = useSafeAreaInsets();
     const floating = variant !== "docked";
+    // "Light" mode is a fixed, compact height. Otherwise stacked (bottom) labels
+    // need more vertical room than the icon-only / side-by-side layouts, so the
+    // bar grows a little in that mode.
+    const barHeight = isLight
+      ? LIGHT_BAR_HEIGHT
+      : labelPosition === "bottom"
+        ? theme.height + BOTTOM_LABEL_EXTRA_HEIGHT
+        : theme.height;
+    // "Light" mode floats a little higher off the bottom edge.
+    const extraBottomMargin = isLight ? lightBottomMargin : 0;
     // 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();
@@ -95,17 +148,23 @@ export const MagicTabBar = forwardRef<RNView, MagicTabBarProps>(
         pointerEvents="box-none"
         style={[
           floating ? styles.floatingWrapper : styles.dockedWrapper,
+          // Light mode centers a narrower bar; drop the side padding so the
+          // bar's width is measured against the full screen width.
+          isLight && styles.lightWrapper,
           {
-            paddingHorizontal: theme.horizontalMargin,
-            paddingBottom: (floating ? insets.bottom : 0) + theme.bottomInset,
+            paddingHorizontal: isLight ? 0 : theme.horizontalMargin,
+            paddingBottom:
+              (floating ? insets.bottom : 0) + theme.bottomInset + extraBottomMargin,
           },
         ]}
       >
-        <View
+        <Animated.View
+          layout={barTransition}
           style={[
             styles.bar,
             !seeThrough && styles.barShadow,
-            { height: theme.height, borderRadius: theme.radius },
+            isLight && styles.lightBar,
+            { height: barHeight, borderRadius: theme.radius },
           ]}
         >
           {renderBackground ? (
@@ -142,10 +201,10 @@ export const MagicTabBar = forwardRef<RNView, MagicTabBarProps>(
               ]}
             />
           )}
-          <View style={[styles.row, style]} {...rest}>
+          <View style={[isLight ? styles.lightRow : styles.row, style]} {...rest}>
             {children}
           </View>
-        </View>
+        </Animated.View>
       </View>
     );
   },
@@ -164,6 +223,13 @@ const styles = StyleSheet.create({
   bar: {
     flexDirection: "row",
   },
+  // Light mode: a narrower bar (65% of screen width) centered by its wrapper.
+  lightWrapper: {
+    alignItems: "center",
+  },
+  lightBar: {
+    width: "65%",
+  },
   barShadow: {
     shadowColor: "#000",
     shadowOpacity: 0.25,
@@ -178,4 +244,12 @@ const styles = StyleSheet.create({
     justifyContent: "space-around",
     paddingHorizontal: 6,
   },
+  // Compact "light" row: tighter horizontal padding around the small icons.
+  lightRow: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingHorizontal: 10,
+  },
 });