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

package/lib/module/MagicTabItem.js

@@ -1,16 +1,37 @@
 "use strict";
 
-import { forwardRef, useEffect } from 'react';
-import { Pressable, StyleSheet } from 'react-native';
-import Animated, { FadeIn, LinearTransition, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { forwardRef, memo, useCallback, useEffect, useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import Animated, { FadeIn, FadeOut, LinearTransition, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+
+/** Minimal shape we use from the optional `expo-haptics` module. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `expo-haptics` is an optional peer dependency. We load it through a guarded
+ * `require` so the library still installs and runs without it — when it's
+ * absent, the `haptics` prop simply has no effect.
+ */
+const expoHaptics = (() => {
+  try {
+    return require('expo-haptics');
+  } catch {
+    return null;
+  }
+})();
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-const SPRING = {
-  mass: 0.6,
-  damping: 18,
-  stiffness: 180
-};
-const transition = LinearTransition.springify().mass(SPRING.mass).damping(SPRING.damping).stiffness(SPRING.stiffness);
+
+/** Fixed small icon size used by the compact "light" tab bar. */
+const LIGHT_ICON_SIZE = 20;
+
+/** Whether a `badge` value should render anything at all. */
+function hasBadge(badge) {
+  return badge === true || typeof badge === 'number' && badge > 0 || typeof badge === 'string' && badge.length > 0;
+}
+
+/** Formats a numeric/string badge; numbers above 99 collapse to `99+`. */
+function formatBadge(badge) {
+  return typeof badge === 'number' && badge > 99 ? '99+' : String(badge);
+}
 /**
  * A single tab. Designed to be used as the `asChild` target of an
  * Expo Router `<TabTrigger>`, which injects the focus state and press handlers.
@@ -18,49 +39,193 @@ const transition = LinearTransition.springify().mass(SPRING.mass).damping(SPRING
  * 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 = /*#__PURE__*/forwardRef(function MagicTabItem({
+export const MagicTabItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MagicTabItem({
   icon,
   label,
+  labelMode = 'active',
+  labelPosition = 'right',
+  badge,
+  disabled = false,
+  variant,
+  isLight = false,
+  haptics = false,
+  name,
+  onTabPress,
+  onTabLongPress,
   theme,
   isFocused,
   onPress,
   onLongPress
 }, ref) {
   const focused = Boolean(isFocused);
+  const {
+    spring
+  } = theme;
   const progress = useSharedValue(focused ? 1 : 0);
   useEffect(() => {
-    progress.value = withSpring(focused ? 1 : 0, SPRING);
-  }, [focused, progress]);
+    progress.value = withSpring(focused ? 1 : 0, spring);
+  }, [focused, progress, spring]);
+
+  // Rebuilt only when the theme's spring changes, so consumers can tune the
+  // layout animation's feel via `theme.spring`.
+  const transition = useMemo(() => LinearTransition.springify().mass(spring.mass).damping(spring.damping).stiffness(spring.stiffness), [spring.mass, spring.damping, spring.stiffness]);
   const pillStyle = useAnimatedStyle(() => ({
     opacity: progress.value,
     transform: [{
       scale: 0.8 + progress.value * 0.2
     }]
   }));
+  const handlePress = useCallback(event => {
+    if (haptics) expoHaptics?.selectionAsync?.();
+    onTabPress?.(name ?? '', focused);
+    onPress?.(event);
+  }, [haptics, onTabPress, name, focused, onPress]);
+  const handleLongPress = useCallback(event => {
+    onTabLongPress?.(name ?? '', focused);
+    onLongPress?.(event);
+  }, [onTabLongPress, name, focused, onLongPress]);
+  const badgeVisible = hasBadge(badge);
+  const badgeIsDot = badge === true;
+  const iconWithBadge = (iconColor, size) => /*#__PURE__*/_jsxs(View, {
+    children: [icon({
+      focused,
+      color: iconColor,
+      size
+    }), badgeVisible ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [styles.badge, badgeIsDot && styles.badgeDot, {
+        backgroundColor: theme.badgeColor
+      }],
+      children: badgeIsDot ? null : /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
+        style: [styles.badgeText, {
+          color: theme.badgeTextColor
+        }],
+        children: formatBadge(badge)
+      })
+    }) : null]
+  });
+
+  // ---- Raised circular action ("FAB") tab ----
+  if (variant === 'action') {
+    const size = theme.height - 6;
+    return /*#__PURE__*/_jsx(AnimatedPressable, {
+      ref: ref,
+      onPress: handlePress,
+      onLongPress: handleLongPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityState: {
+        selected: focused,
+        disabled
+      },
+      style: [styles.action, {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: theme.actionColor
+      }, disabled && styles.disabled],
+      children: iconWithBadge(theme.actionIconColor, theme.iconSize + 2)
+    });
+  }
+
+  // ---- Normal tab ----
   const color = focused ? theme.activeColor : theme.inactiveColor;
-  const showLabel = focused && !!label;
+
+  // ---- Compact "light" tab: small icon only, no label ----
+  if (isLight) {
+    return /*#__PURE__*/_jsxs(AnimatedPressable, {
+      ref: ref,
+      onPress: handlePress,
+      onLongPress: handleLongPress,
+      disabled: disabled,
+      accessibilityRole: "tab",
+      accessibilityState: {
+        selected: focused,
+        disabled
+      },
+      layout: transition,
+      style: [styles.itemLight, disabled && styles.disabled],
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [StyleSheet.absoluteFill, {
+          backgroundColor: theme.activePillColor,
+          borderRadius: theme.radius
+        }, pillStyle]
+      }), iconWithBadge(color, LIGHT_ICON_SIZE)]
+    });
+  }
+  const showLabel = !!label && labelMode !== 'never' && (labelMode === 'always' || focused);
+
+  // ---- Bottom labels: Material Design 3 layout ----
+  // The active indicator ("pill") wraps only the icon as a capsule; the label
+  // sits below it. Following M3's `LABEL_VISIBILITY_SELECTED` behaviour, each
+  // item is centered as a group: unlabeled tabs are just a centered icon, and
+  // the active tab grows to icon + label (nudging its icon up a touch). The
+  // layout transition animates that shift smoothly. Indicator sizing follows
+  // M3's 64x32-over-24dp ratio, scaled to the theme's icon size.
+  if (labelPosition === 'bottom') {
+    const indicatorHeight = theme.iconSize + 10;
+    const indicatorWidth = theme.iconSize + 32;
+    return /*#__PURE__*/_jsxs(AnimatedPressable, {
+      ref: ref,
+      onPress: handlePress,
+      onLongPress: handleLongPress,
+      disabled: disabled,
+      accessibilityRole: "tab",
+      accessibilityState: {
+        selected: focused,
+        disabled
+      },
+      layout: transition,
+      style: [styles.itemBottom, disabled && styles.disabled],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [styles.indicatorWrap, {
+          width: indicatorWidth,
+          height: indicatorHeight
+        }],
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          pointerEvents: "none",
+          style: [StyleSheet.absoluteFill, {
+            backgroundColor: theme.activePillColor,
+            borderRadius: indicatorHeight / 2
+          }, pillStyle]
+        }), iconWithBadge(color, theme.iconSize)]
+      }), showLabel ? /*#__PURE__*/_jsx(Animated.Text, {
+        entering: FadeIn.duration(150),
+        exiting: FadeOut.duration(120),
+        numberOfLines: 1,
+        style: [styles.labelBottom, {
+          color,
+          fontSize: theme.fontSize - 1
+        }],
+        children: label
+      }) : null]
+    });
+  }
+
+  // ---- Right labels: floating pill wrapping icon + label ----
   return /*#__PURE__*/_jsxs(AnimatedPressable, {
     ref: ref,
-    onPress: onPress,
-    onLongPress: onLongPress,
+    onPress: handlePress,
+    onLongPress: handleLongPress,
+    disabled: disabled,
     accessibilityRole: "tab",
     accessibilityState: {
-      selected: focused
+      selected: focused,
+      disabled
     },
     layout: transition,
-    style: [styles.pressable, focused && styles.pressableActive],
+    style: [styles.pressable, focused && styles.pressableActive, disabled && styles.disabled],
     children: [/*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "none",
       style: [StyleSheet.absoluteFill, {
         backgroundColor: theme.activePillColor,
         borderRadius: theme.radius
       }, pillStyle]
-    }), icon({
-      focused,
-      color,
-      size: theme.iconSize
-    }), showLabel ? /*#__PURE__*/_jsx(Animated.Text, {
+    }), iconWithBadge(color, theme.iconSize), showLabel ? /*#__PURE__*/_jsx(Animated.Text, {
       entering: FadeIn.duration(150),
+      exiting: FadeOut.duration(120),
       numberOfLines: 1,
       style: [styles.label, {
         color,
@@ -69,7 +234,7 @@ export const MagicTabItem = /*#__PURE__*/forwardRef(function MagicTabItem({
       children: label
     }) : null]
   });
-});
+}));
 const styles = StyleSheet.create({
   pressable: {
     alignSelf: 'center',
@@ -91,6 +256,74 @@ const styles = StyleSheet.create({
   label: {
     fontWeight: '600',
     flexShrink: 1
+  },
+  // Material Design 3 bottom layout: icon (with capsule indicator) stacked
+  // over an always-below label.
+  itemBottom: {
+    alignSelf: 'center',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+    paddingVertical: 3,
+    paddingHorizontal: 4
+  },
+  indicatorWrap: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  // Compact "light" mode: small icon-only tap target with its own tight padding.
+  itemLight: {
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 6,
+    paddingHorizontal: 14
+  },
+  labelBottom: {
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  action: {
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: -22,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    elevation: 8
+  },
+  disabled: {
+    opacity: 0.4
+  },
+  badge: {
+    position: 'absolute',
+    top: -5,
+    left: '65%',
+    minWidth: 16,
+    height: 16,
+    paddingHorizontal: 4,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badgeDot: {
+    top: -2,
+    minWidth: 8,
+    width: 8,
+    height: 8,
+    paddingHorizontal: 0,
+    borderRadius: 4
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: '700',
+    textAlign: 'center'
   }
 });
 //# sourceMappingURL=MagicTabItem.js.map

package/lib/module/MagicTabItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useEffect","Pressable","StyleSheet","Animated","FadeIn","LinearTransition","useAnimatedStyle","useSharedValue","withSpring","jsx","_jsx","jsxs","_jsxs","AnimatedPressable","createAnimatedComponent","SPRING","mass","damping","stiffness","transition","springify","MagicTabItem","icon","label","theme","isFocused","onPress","onLongPress","ref","focused","Boolean","progress","value","pillStyle","opacity","transform","scale","color","activeColor","inactiveColor","showLabel","accessibilityRole","accessibilityState","selected","layout","style","styles","pressable","pressableActive","children","View","pointerEvents","absoluteFill","backgroundColor","activePillColor","borderRadius","radius","size","iconSize","Text","entering","duration","numberOfLines","fontSize","create","alignSelf","flexDirection","alignItems","justifyContent","gap","paddingVertical","paddingHorizontal","flexShrink","fontWeight"],"sourceRoot":"../../src","sources":["MagicTabItem.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","memo","useCallback","useEffect","useMemo","Pressable","StyleSheet","Text","View","Animated","FadeIn","FadeOut","LinearTransition","useAnimatedStyle","useSharedValue","withSpring","jsx","_jsx","jsxs","_jsxs","expoHaptics","require","AnimatedPressable","createAnimatedComponent","LIGHT_ICON_SIZE","hasBadge","badge","length","formatBadge","String","MagicTabItem","icon","label","labelMode","labelPosition","disabled","variant","isLight","haptics","name","onTabPress","onTabLongPress","theme","isFocused","onPress","onLongPress","ref","focused","Boolean","spring","progress","value","transition","springify","mass","damping","stiffness","pillStyle","opacity","transform","scale","handlePress","event","selectionAsync","handleLongPress","badgeVisible","badgeIsDot","iconWithBadge","iconColor","size","children","color","pointerEvents","style","styles","badgeDot","backgroundColor","badgeColor","numberOfLines","badgeText","badgeTextColor","height","accessibilityRole","accessibilityState","selected","action","width","borderRadius","actionColor","actionIconColor","iconSize","activeColor","inactiveColor","layout","itemLight","absoluteFill","activePillColor","radius","showLabel","indicatorHeight","indicatorWidth","itemBottom","indicatorWrap","entering","duration","exiting","labelBottom","fontSize","pressable","pressableActive","create","alignSelf","flexDirection","alignItems","justifyContent","gap","paddingVertical","paddingHorizontal","flexShrink","fontWeight","textAlign","marginTop","shadowColor","shadowOpacity","shadowRadius","shadowOffset","elevation","position","top","left","minWidth"],"sourceRoot":"../../src","sources":["MagicTabItem.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/MagicTabs.js

@@ -1,11 +1,56 @@
 "use strict";
 
+import { useMemo } from 'react';
 import { Tabs, TabList, TabSlot, TabTrigger } from 'expo-router/ui';
+import { usePathname } from 'expo-router';
 import { MagicTabBar } from "./MagicTabBar.js";
 import { MagicTabItem } from "./MagicTabItem.js";
-import { defaultTabs } from "./defaultTabs.js";
 import { defaultTheme } from "./theme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Best-effort string path for an `Href` (covers string and `{ pathname }` forms). */
+function hrefToPath(href) {
+  if (typeof href === 'string') return href;
+  const pathname = href?.pathname;
+  return typeof pathname === 'string' ? pathname : '';
+}
+
+/**
+ * Finds the tab whose `href` best matches the current path, by longest prefix
+ * so nested routes (e.g. `/explore/details`) still resolve to their tab.
+ */
+function findActiveTab(tabs, pathname) {
+  let best;
+  let bestLen = -1;
+  for (const tab of tabs) {
+    const path = hrefToPath(tab.href);
+    if (!path) continue;
+    const matches = path === '/' ? pathname === '/' : pathname === path || pathname.startsWith(`${path}/`);
+    if (matches && path.length > bestLen) {
+      best = tab;
+      bestLen = path.length;
+    }
+  }
+  return best;
+}
+
+/**
+ * Normalizes the `showLabels` prop (boolean shorthand or explicit mode) and
+ * clamps it to what the current `labelPosition` can display well.
+ *
+ * `'always'` only works with `labelPosition="bottom"`: side-by-side, every tab
+ * would expand to its full label width and overflow the bar, so we downgrade
+ * it to `'active'` (and warn in dev).
+ */
+function resolveLabelMode(showLabels, labelPosition) {
+  const mode = showLabels === true ? 'active' : showLabels === false ? 'never' : showLabels;
+  if (mode === 'always' && labelPosition !== 'bottom') {
+    if (__DEV__) {
+      console.warn('[MagicTabs] showLabels="always" requires labelPosition="bottom"; ' + 'falling back to "active". Set labelPosition="bottom" to keep every label visible.');
+    }
+    return 'active';
+  }
+  return mode;
+}
 /**
  * A drop-in custom tab bar for Expo Router.
  *
@@ -21,38 +66,73 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ```
  */
 export function MagicTabs({
-  tabs = defaultTabs,
+  tabs,
   theme: themeOverride,
+  showLabels = true,
+  labelPosition = 'right',
+  isLight = false,
+  lightBottomMargin,
   variant,
   isTransparent,
   transparency,
   glass,
-  renderBackground
+  renderBackground,
+  haptics,
+  onTabPress,
+  onTabLongPress
 }) {
-  const theme = {
+  // Stable identity so it doesn't re-trigger memoized children every render.
+  const theme = useMemo(() => ({
     ...defaultTheme,
     ...themeOverride
-  };
+  }), [themeOverride]);
+  const barLabelMode = resolveLabelMode(showLabels, labelPosition);
+
+  // The bar is "light" when either the whole bar is forced light (`isLight`)
+  // or the currently active tab opts in via its own `isLight` config. Changing
+  // routes flips this and the bar animates between the two layouts.
+  const pathname = usePathname();
+  const activeTab = findActiveTab(tabs, pathname);
+  const effectiveLight = isLight || !!activeTab?.isLight;
   return /*#__PURE__*/_jsxs(Tabs, {
     children: [/*#__PURE__*/_jsx(TabSlot, {}), /*#__PURE__*/_jsx(TabList, {
       asChild: true,
       children: /*#__PURE__*/_jsx(MagicTabBar, {
         theme: theme,
         variant: variant,
+        labelPosition: labelPosition,
+        isLight: effectiveLight,
+        lightBottomMargin: lightBottomMargin,
         isTransparent: isTransparent,
         transparency: transparency,
         glass: glass,
         renderBackground: renderBackground,
-        children: tabs.map(tab => /*#__PURE__*/_jsx(TabTrigger, {
-          name: tab.name,
-          href: tab.href,
-          asChild: true,
-          children: /*#__PURE__*/_jsx(MagicTabItem, {
-            icon: tab.icon,
-            label: tab.label,
-            theme: theme
-          })
-        }, tab.name))
+        children: tabs.map(tab => {
+          // A tab's `showLabel` overrides the bar-level mode: `false` forces
+          // icon-only, `true` shows it (falling back to `'active'` when the
+          // bar itself is set to `'never'`).
+          const labelMode = tab.showLabel === undefined ? barLabelMode : tab.showLabel ? barLabelMode === 'never' ? 'active' : barLabelMode : 'never';
+          return /*#__PURE__*/_jsx(TabTrigger, {
+            name: tab.name,
+            href: tab.href,
+            asChild: true,
+            children: /*#__PURE__*/_jsx(MagicTabItem, {
+              name: tab.name,
+              icon: tab.icon,
+              label: tab.label,
+              labelMode: labelMode,
+              labelPosition: labelPosition,
+              badge: tab.badge,
+              disabled: tab.disabled,
+              variant: tab.variant,
+              isLight: effectiveLight,
+              haptics: haptics,
+              onTabPress: onTabPress,
+              onTabLongPress: onTabLongPress,
+              theme: theme
+            })
+          }, tab.name);
+        })
       })
     })]
   });

package/lib/module/MagicTabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["Tabs","TabList","TabSlot","TabTrigger","MagicTabBar","MagicTabItem","defaultTabs","defaultTheme","jsx","_jsx","jsxs","_jsxs","MagicTabs","tabs","theme","themeOverride","variant","isTransparent","transparency","glass","renderBackground","children","asChild","map","tab","name","href","icon","label"],"sourceRoot":"../../src","sources":["MagicTabs.tsx"],"mappings":";;AACA,SAASA,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AACnE,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,YAAY,QAAQ,mBAAgB;AAC7C,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,YAAY,QAAQ,YAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAmCvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAAC;EACxBC,IAAI,GAAGP,WAAW;EAClBQ,KAAK,EAAEC,aAAa;EACpBC,OAAO;EACPC,aAAa;EACbC,YAAY;EACZC,KAAK;EACLC;AACc,CAAC,EAAE;EACjB,MAAMN,KAAuB,GAAG;IAAE,GAAGP,YAAY;IAAE,GAAGQ;EAAc,CAAC;EAErE,oBACEJ,KAAA,CAACX,IAAI;IAAAqB,QAAA,gBACHZ,IAAA,CAACP,OAAO,IAAE,CAAC,eACXO,IAAA,CAACR,OAAO;MAACqB,OAAO;MAAAD,QAAA,eACdZ,IAAA,CAACL,WAAW;QACVU,KAAK,EAAEA,KAAM;QACbE,OAAO,EAAEA,OAAQ;QACjBC,aAAa,EAAEA,aAAc;QAC7BC,YAAY,EAAEA,YAAa;QAC3BC,KAAK,EAAEA,KAAM;QACbC,gBAAgB,EAAEA,gBAAiB;QAAAC,QAAA,EAElCR,IAAI,CAACU,GAAG,CAAEC,GAAG,iBACZf,IAAA,CAACN,UAAU;UAAgBsB,IAAI,EAAED,GAAG,CAACC,IAAK;UAACC,IAAI,EAAEF,GAAG,CAACE,IAAK;UAACJ,OAAO;UAAAD,QAAA,eAChEZ,IAAA,CAACJ,YAAY;YAACsB,IAAI,EAAEH,GAAG,CAACG,IAAK;YAACC,KAAK,EAAEJ,GAAG,CAACI,KAAM;YAACd,KAAK,EAAEA;UAAM,CAAE;QAAC,GADjDU,GAAG,CAACC,IAET,CACb;MAAC,CACS;IAAC,CACP,CAAC;EAAA,CACN,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["useMemo","Tabs","TabList","TabSlot","TabTrigger","usePathname","MagicTabBar","MagicTabItem","defaultTheme","jsx","_jsx","jsxs","_jsxs","hrefToPath","href","pathname","findActiveTab","tabs","best","bestLen","tab","path","matches","startsWith","length","resolveLabelMode","showLabels","labelPosition","mode","__DEV__","console","warn","MagicTabs","theme","themeOverride","isLight","lightBottomMargin","variant","isTransparent","transparency","glass","renderBackground","haptics","onTabPress","onTabLongPress","barLabelMode","activeTab","effectiveLight","children","asChild","map","labelMode","showLabel","undefined","name","icon","label","badge","disabled"],"sourceRoot":"../../src","sources":["MagicTabs.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/defaultTabs.js

@@ -17,11 +17,12 @@ const ionicon = (active, inactive) => ({
 });
 
 /**
- * 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 const defaultTabs = [{
   name: "index",

package/lib/module/defaultTabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ionicons","jsx","_jsx","ionicon","active","inactive","focused","color","size","name","defaultTabs","href","label","icon"],"sourceRoot":"../../src","sources":["defaultTabs.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAM9C;AACA;AACA;AACA;AACA,MAAMC,OAAO,GACXA,CAACC,MAAmB,EAAEC,QAAqB,KAC3C,CAAC;EAAEC,OAAO;EAAEC,KAAK;EAAEC;AAAwB,CAAC,kBAC1CN,IAAA,CAACF,QAAQ;EAACS,IAAI,EAAEH,OAAO,GAAGF,MAAM,GAAGC,QAAS;EAACE,KAAK,EAAEA,KAAM;EAACC,IAAI,EAAEA;AAAK,CAAE,CACzE;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,WAA6B,GAAG,CAC3C;EACED,IAAI,EAAE,OAAO;EACbE,IAAI,EAAE,GAAG;EACTC,KAAK,EAAE,MAAM;EACbC,IAAI,EAAEV,OAAO,CAAC,MAAM,EAAE,cAAc;AACtC,CAAC,EACD;EACEM,IAAI,EAAE,SAAS;EACfE,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,SAAS;EAChBC,IAAI,EAAEV,OAAO,CAAC,SAAS,EAAE,iBAAiB;AAC5C,CAAC,EACD;EACEM,IAAI,EAAE,eAAe;EACrBE,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,eAAe;EACtBC,IAAI,EAAEV,OAAO,CAAC,eAAe,EAAE,uBAAuB;AACxD,CAAC,EACD;EACEM,IAAI,EAAE,OAAO;EACbE,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAEV,OAAO,CAAC,kBAAkB,EAAE,oBAAoB;AACxD,CAAC,EACD;EACEM,IAAI,EAAE,SAAS;EACfE,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,SAAS;EAChBC,IAAI,EAAEV,OAAO,CAAC,QAAQ,EAAE,gBAAgB;AAC1C,CAAC,CACF","ignoreList":[]}
+{"version":3,"names":["Ionicons","jsx","_jsx","ionicon","active","inactive","focused","color","size","name","defaultTabs","href","label","icon"],"sourceRoot":"../../src","sources":["defaultTabs.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAM9C;AACA;AACA;AACA;AACA,MAAMC,OAAO,GACXA,CAACC,MAAmB,EAAEC,QAAqB,KAC3C,CAAC;EAAEC,OAAO;EAAEC,KAAK;EAAEC;AAAwB,CAAC,kBAC1CN,IAAA,CAACF,QAAQ;EAACS,IAAI,EAAEH,OAAO,GAAGF,MAAM,GAAGC,QAAS;EAACE,KAAK,EAAEA,KAAM;EAACC,IAAI,EAAEA;AAAK,CAAE,CACzE;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,WAA6B,GAAG,CAC3C;EACED,IAAI,EAAE,OAAO;EACbE,IAAI,EAAE,GAAG;EACTC,KAAK,EAAE,MAAM;EACbC,IAAI,EAAEV,OAAO,CAAC,MAAM,EAAE,cAAc;AACtC,CAAC,EACD;EACEM,IAAI,EAAE,SAAS;EACfE,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,SAAS;EAChBC,IAAI,EAAEV,OAAO,CAAC,SAAS,EAAE,iBAAiB;AAC5C,CAAC,EACD;EACEM,IAAI,EAAE,eAAe;EACrBE,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,eAAe;EACtBC,IAAI,EAAEV,OAAO,CAAC,eAAe,EAAE,uBAAuB;AACxD,CAAC,EACD;EACEM,IAAI,EAAE,OAAO;EACbE,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAEV,OAAO,CAAC,kBAAkB,EAAE,oBAAoB;AACxD,CAAC,EACD;EACEM,IAAI,EAAE,SAAS;EACfE,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,SAAS;EAChBC,IAAI,EAAEV,OAAO,CAAC,QAAQ,EAAE,gBAAgB;AAC1C,CAAC,CACF","ignoreList":[]}

package/lib/module/index.js

@@ -3,6 +3,11 @@
 export { MagicTabs } from "./MagicTabs.js";
 export { MagicTabBar } from "./MagicTabBar.js";
 export { MagicTabItem } from "./MagicTabItem.js";
-export { defaultTabs } from "./defaultTabs.js";
 export { defaultTheme } from "./theme.js";
+
+// `defaultTabs` is intentionally NOT re-exported here — it depends on an icon
+// library, and keeping it out of the main entry means the core stays
+// zero-runtime-dependency. Import it from the subpath for the demo set:
+//
+//   import { defaultTabs } from 'react-native-magic-tab-bar/default-tabs';
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["MagicTabs","MagicTabBar","MagicTabItem","defaultTabs","defaultTheme"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,gBAAa;AACvC,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,YAAY,QAAQ,mBAAgB;AAC7C,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,YAAY,QAAQ,YAAS","ignoreList":[]}
+{"version":3,"names":["MagicTabs","MagicTabBar","MagicTabItem","defaultTheme"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,gBAAa;AACvC,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,YAAY,QAAQ,mBAAgB;AAC7C,SAASC,YAAY,QAAQ,YAAS;;AAEtC;AACA;AACA;AACA;AACA","ignoreList":[]}

package/lib/module/theme.js

@@ -10,7 +10,16 @@ export const defaultTheme = {
   fontSize: 12,
   height: 56,
   radius: 28,
+  badgeColor: '#FF3B30',
+  badgeTextColor: '#FFFFFF',
+  actionColor: '#0A84FF',
+  actionIconColor: '#FFFFFF',
   horizontalMargin: 14,
-  bottomInset: 10
+  bottomInset: 10,
+  spring: {
+    mass: 0.6,
+    damping: 18,
+    stiffness: 180
+  }
 };
 //# sourceMappingURL=theme.js.map

package/lib/module/theme.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultTheme","barColor","activePillColor","activeColor","inactiveColor","iconSize","fontSize","height","radius","horizontalMargin","bottomInset"],"sourceRoot":"../../src","sources":["theme.ts"],"mappings":";;AAEA;AACA,OAAO,MAAMA,YAA8B,GAAG;EAC5CC,QAAQ,EAAE,wBAAwB;EAClCC,eAAe,EAAE,2BAA2B;EAC5CC,WAAW,EAAE,SAAS;EACtBC,aAAa,EAAE,SAAS;EACxBC,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,EAAE;EACZC,MAAM,EAAE,EAAE;EACVC,MAAM,EAAE,EAAE;EACVC,gBAAgB,EAAE,EAAE;EACpBC,WAAW,EAAE;AACf,CAAC","ignoreList":[]}
+{"version":3,"names":["defaultTheme","barColor","activePillColor","activeColor","inactiveColor","iconSize","fontSize","height","radius","badgeColor","badgeTextColor","actionColor","actionIconColor","horizontalMargin","bottomInset","spring","mass","damping","stiffness"],"sourceRoot":"../../src","sources":["theme.ts"],"mappings":";;AAEA;AACA,OAAO,MAAMA,YAA8B,GAAG;EAC5CC,QAAQ,EAAE,wBAAwB;EAClCC,eAAe,EAAE,2BAA2B;EAC5CC,WAAW,EAAE,SAAS;EACtBC,aAAa,EAAE,SAAS;EACxBC,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,EAAE;EACZC,MAAM,EAAE,EAAE;EACVC,MAAM,EAAE,EAAE;EACVC,UAAU,EAAE,SAAS;EACrBC,cAAc,EAAE,SAAS;EACzBC,WAAW,EAAE,SAAS;EACtBC,eAAe,EAAE,SAAS;EAC1BC,gBAAgB,EAAE,EAAE;EACpBC,WAAW,EAAE,EAAE;EACfC,MAAM,EAAE;IAAEC,IAAI,EAAE,GAAG;IAAEC,OAAO,EAAE,EAAE;IAAEC,SAAS,EAAE;EAAI;AACnD,CAAC","ignoreList":[]}

package/lib/typescript/MagicTabBar.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import { View, type ViewProps } from "react-native";
-import type { MagicTabBarTheme, MagicTabBarVariant } from "./types";
+import type { MagicLabelPosition, MagicTabBarTheme, MagicTabBarVariant } from "./types";
 /** Lowest bar opacity we allow, so a transparent bar never becomes invisible. */
 export declare const MIN_BAR_OPACITY = 0.1;
 export interface MagicTabBarProps extends ViewProps {
@@ -8,6 +8,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`.
@@ -27,6 +33,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;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"MagicTabBar.d.ts","sourceRoot":"","sources":["../../src/MagicTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,IAAI,EAEJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAmBpE,iFAAiF;AACjF,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,6DAA6D;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IACxB,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,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,mGAyFvB,CAAC"}
+{"version":3,"file":"MagicTabBar.d.ts","sourceRoot":"","sources":["../../src/MagicTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,IAAI,EAEJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAqCjB,iFAAiF;AACjF,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,6DAA6D;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IACxB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;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;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,mGA4GvB,CAAC"}