react-native-magic-tab-bar 1.0.1 → 2.0.1

package/README.md

@@ -1,25 +1,53 @@
 # react-native-magic-tab-bar
 
-A customizable, animated floating tab bar for **Expo Router** (SDK 56+). You bring
-your own icons and labels — the package handles the layout, the active-pill
-animation, and the navigation wiring.
-
-> Built on Expo Router's headless tabs (`expo-router/ui`). It works in any
-> Expo Router project on iOS and Android. (Bare React Native / React Navigation
-> is not supported yet — see [Roadmap](#roadmap).)
+A customizable, animated **floating tab bar for [Expo Router](https://docs.expo.dev/router/introduction/)** (SDK 56+). You bring your own icons and labels — the package handles the layout, the active-pill animation, and the navigation wiring.
+
+> Built on Expo Router's headless tabs (`expo-router/ui`). Works in any Expo Router project on **iOS and Android**. (Bare React Native / React Navigation is not supported yet — see [Roadmap](#roadmap).)
+
+## Features
+
+- 🎯 **Drop-in** — replaces your Expo Router tabs layout; bring your own icons.
+- ✨ **Animated active pill** with a spring you can tune.
+- 🏷️ **Flexible labels** — beside or below the icon; show on the active tab, always, or never.
+- 🔴 **Badges** — dots or counts on any tab.
+- 🧊 **Glass / blur / transparent** backgrounds (native iOS Liquid Glass supported).
+- 📳 **Haptics** and **press callbacks** (great for "scroll to top" on re-press).
+- ➕ **Action (FAB) tab** for a raised center button.
+- 🪶 **Light mode** — a compact, icon-only bar you can switch on **per tab** (e.g. only on an immersive full-screen feed), with a smooth transition.
+- 🎨 **Fully themeable** via a single `theme` prop.
+
+## Table of contents
+
+- [Installation](#installation)
+- [Quick start](#quick-start)
+- [Recipes](#recipes)
+  - [Labels](#labels)
+  - [Badges](#badges)
+  - [Haptics and press callbacks](#haptics-and-press-callbacks)
+  - [Disabled tabs](#disabled-tabs)
+  - [Action (FAB) tab](#action-fab-tab)
+  - [Glass, blur and transparency](#glass-blur-and-transparency)
+  - [Light mode](#light-mode-compact-bar)
+  - [Theming](#theming)
+- [API](#api)
+- [Development](#development)
+- [Roadmap](#roadmap)
+- [License](#license)
 
 ## Screenshots
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/Bhavinpethani04/react-native-magic-tab-bar/main/assets/screenshots/ios.png" alt="MagicTabs on iOS" width="280" />
+  <img src="https://raw.githubusercontent.com/Bhavinpethani04/react-native-magic-tab-bar/main/assets/gifs/ios.gif" alt="MagicTabs on iOS" width="280" />
   &nbsp;&nbsp;&nbsp;
-  <img src="https://raw.githubusercontent.com/Bhavinpethani04/react-native-magic-tab-bar/main/assets/screenshots/android.png" alt="MagicTabs on Android" width="280" />
+  <img src="https://raw.githubusercontent.com/Bhavinpethani04/react-native-magic-tab-bar/main/assets/gifs/android.gif" alt="MagicTabs on Android" width="280" />
 </p>
 
 <p align="center"><sub>iOS (left) &middot; Android (right)</sub></p>
 
 ## Installation
 
+> **Requirements:** an [Expo Router](https://docs.expo.dev/router/introduction/) project (Expo SDK 56+) with an `app/` directory. Works on iOS & Android.
+
 ```bash
 npm install react-native-magic-tab-bar
 ```
@@ -32,79 +60,248 @@ These are normally already present in an Expo Router app:
 npx expo install expo-router react-native-reanimated react-native-safe-area-context react-native-worklets
 ```
 
-Make sure the Reanimated/Worklets Babel plugin is enabled (Expo SDK 56's
-`babel-preset-expo` configures this automatically).
+Make sure the Reanimated/Worklets Babel plugin is enabled (Expo SDK 56's `babel-preset-expo` configures this automatically).
+
+### Optional dependencies
+
+Install these only if you use the matching feature — the library works without them:
 
-## Usage
+```bash
+npx expo install expo-glass-effect   # native iOS Liquid Glass (glass prop)
+npx expo install expo-haptics        # selection haptics (haptics prop)
+npx expo install @expo/vector-icons  # only for the /default-tabs demo set
+```
 
-Use `MagicTabs` as your tab navigator in an `app/_layout.tsx`. Each entry in
-`tabs` maps a route to an icon and label:
+## Quick start
+
+Use `MagicTabs` as your tab navigator in `app/_layout.tsx`. Each entry in `tabs` maps a route to an icon and label:
 
 ```tsx
 // app/_layout.tsx
-import { MagicTabs, type MagicTabIconProps } from "react-native-magic-tab-bar";
-import { Home, Search, User } from "./icons"; // any icon components you like
+import { MagicTabs } from "react-native-magic-tab-bar";
+import { Ionicons } from "@expo/vector-icons";
 
 export default function Layout() {
   return (
     <MagicTabs
       tabs={[
-        { name: "index",   href: "/",        label: "Home",    icon: ({ color, size }) => <Home color={color} size={size} /> },
-        { name: "search",  href: "/search",  label: "Search",  icon: ({ color, size }) => <Search color={color} size={size} /> },
-        { name: "profile", href: "/profile", label: "Profile", icon: ({ color, size }) => <User color={color} size={size} /> },
+        { name: "index",   href: "/",        label: "Home",    icon: ({ color, size }) => <Ionicons name="home"    color={color} size={size} /> },
+        { name: "search",  href: "/search",  label: "Search",  icon: ({ color, size }) => <Ionicons name="search"  color={color} size={size} /> },
+        { name: "profile", href: "/profile", label: "Profile", icon: ({ color, size }) => <Ionicons name="person"  color={color} size={size} /> },
       ]}
     />
   );
 }
 ```
 
-The `name` must match the route file in your `app/` directory (e.g. `index`,
-`search`, `profile`), and `href` is where the tab navigates.
+- `name` must match the route file in your `app/` directory (e.g. `index`, `search`, `profile`).
+- `href` is where the tab navigates.
+- `icon` receives `{ focused, color, size }` so you can swap glyphs/colors for the active state.
+
+> `MagicTabs` renders Expo Router's `<Tabs>` for you — put it straight in `app/_layout.tsx`. There's no separate `<Tabs>` wrapper to set up.
+
+**Tip — filled vs. outline icons:** use `focused` to swap the glyph on the active tab:
+
+```tsx
+icon: ({ focused, color, size }) => (
+  <Ionicons name={focused ? "home" : "home-outline"} color={color} size={size} />
+);
+```
+
+> **Want a ready-made set for a quick look?** Import the demo tabs from the subpath (this is the only thing that pulls in `@expo/vector-icons`, so the core stays dependency-free):
+>
+> ```tsx
+> import { defaultTabs } from "react-native-magic-tab-bar/default-tabs";
+>
+> <MagicTabs tabs={defaultTabs} />;
+> ```
+
+## Recipes
 
-### The glass / blur look
+### Labels
 
-Pass `renderBackground` to render any view behind the bar — e.g. a blur:
+Labels are **beside** the icon by default (`labelPosition="right"`), shown only on the **active** tab.
 
 ```tsx
-import { GlassView } from "expo-glass-effect"; // or @react-native-community/blur on bare RN
+<MagicTabs tabs={tabs} labelPosition="bottom" showLabels="always" /> // Material-style bar
+<MagicTabs tabs={tabs} showLabels={false} />                         // icon-only bar
+```
+
+| `showLabels` | Effect |
+| --- | --- |
+| `true` / `"active"` | Label on the focused tab only *(default)* |
+| `"always"` | Label on every tab *(requires `labelPosition="bottom"`)* |
+| `false` / `"never"` | Icon-only |
 
+`labelPosition` is `"right"` (default) or `"bottom"`. You can also override visibility per tab with `showLabel` on the tab config.
+
+### Badges
+
+```tsx
+{ name: "inbox", href: "/inbox", label: "Inbox", badge: 5,   icon },  // count bubble
+{ name: "alerts", href: "/alerts", label: "Alerts", badge: true, icon }, // dot
+```
+
+`badge` accepts a `number`, `string`, or `boolean` (`true` = dot). Numbers above 99 show as `99+`. Colors come from `theme.badgeColor` / `theme.badgeTextColor`.
+
+### Haptics and press callbacks
+
+```tsx
 <MagicTabs
   tabs={tabs}
-  renderBackground={() => <GlassView style={{ flex: 1 }} />}
-/>;
+  haptics // selection haptic on tap (needs expo-haptics)
+  onTabPress={(name, focused) => {
+    if (focused) scrollToTop(name); // re-pressing the active tab
+  }}
+/>
 ```
 
-When `renderBackground` is omitted, a solid `barColor` is used.
+`onTabPress` / `onTabLongPress` receive `(name, focused)`, where `focused` tells you the tab was **already** active — perfect for scroll-to-top or reset-stack behavior.
+
+### Disabled tabs
+
+```tsx
+{ name: "soon", href: "/soon", label: "Soon", disabled: true, icon }
+```
+
+Dims the tab and blocks navigation to it.
+
+### Action (FAB) tab
+
+Render a raised, circular center button:
+
+```tsx
+{ name: "create", href: "/create", variant: "action", icon }
+```
+
+Uses `theme.actionColor` / `theme.actionIconColor`.
+
+### Glass, blur and transparency
+
+```tsx
+<MagicTabs tabs={tabs} glass />                          // native iOS Liquid Glass (iOS 26+)
+<MagicTabs tabs={tabs} isTransparent transparency={0.4} />// translucent bar
+<MagicTabs tabs={tabs} renderBackground={() => <MyBlurView />} /> // any custom background
+```
+
+- `glass` uses `expo-glass-effect` on iOS 26+ and falls back to the translucent `barColor` elsewhere.
+- `renderBackground` renders any view behind the bar; when omitted, a solid `barColor` is used.
+
+### Light mode (compact bar)
+
+A shorter, **icon-only** bar (65% width, floating higher). Turn it on for the whole bar, or **per tab** so it only appears on an immersive screen:
+
+```tsx
+// Whole bar
+<MagicTabs tabs={tabs} isLight lightBottomMargin={40} />
+
+// Per tab — the bar morphs to light only while "explore" is the active route
+<MagicTabs
+  tabs={[
+    { name: "index",   href: "/",        label: "Home",    icon },
+    { name: "explore", href: "/explore", label: "Explore", icon, isLight: true },
+    { name: "profile", href: "/profile", label: "Profile", icon },
+  ]}
+/>
+```
+
+The transition between the normal and light bar is animated. `lightBottomMargin` (default `14`) controls the extra gap above the screen edge in light mode.
+
+### Theming
+
+Everything visual — colors, sizes, corner radius, the animation spring — lives in one `theme` prop. Override any subset; the rest falls back to `defaultTheme`.
+
+**The colors that matter most:**
+
+| Token | Controls |
+| --- | --- |
+| `barColor` | the bar's background |
+| `activePillColor` | the pill highlight behind the **active** tab |
+| `activeColor` | the active tab's icon + label |
+| `inactiveColor` | the icons of **inactive** tabs |
+| `badgeColor` / `badgeTextColor` | the badge bubble + its text |
+| `actionColor` / `actionIconColor` | the [action (FAB) tab](#action-fab-tab) |
+
+```tsx
+<MagicTabs
+  tabs={tabs}
+  theme={{
+    barColor: "#17171C",        // dark bar
+    activePillColor: "#2563EB", // blue highlight behind the active tab
+    activeColor: "#FFFFFF",     // active icon/label
+    inactiveColor: "#9BA0AA",   // inactive icons
+    radius: 24,                 // rounder bar & pill
+    spring: { mass: 0.6, damping: 16, stiffness: 200 }, // snappier animation
+  }}
+/>
+```
+
+See the [full token list with defaults](#magictabbartheme) for sizes (`iconSize`, `height`, `fontSize`), spacing (`horizontalMargin`, `bottomInset`) and more.
 
 ## API
 
 ### `<MagicTabs />`
 
-| Prop               | Type                              | Default      | Description                                       |
-| ------------------ | --------------------------------- | ------------ | ------------------------------------------------- |
-| `tabs`             | `MagicTabConfig[]`                | —            | The tabs, in order.                               |
-| `theme`            | `Partial<MagicTabBarTheme>`       | `defaultTheme` | Override any visual token.                       |
-| `variant`          | `'floating' \| 'docked'`          | `'floating'` | Float over content, or dock in flow.              |
-| `renderBackground` | `() => ReactNode`                 | —            | Custom background (blur/glass) behind the bar.    |
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `tabs` | `MagicTabConfig[]` | **required** | The tabs, in order. |
+| `theme` | `Partial<MagicTabBarTheme>` | `defaultTheme` | Override any visual token. |
+| `showLabels` | `boolean \| 'active' \| 'always' \| 'never'` | `'active'` | When labels are shown. `'always'` needs `labelPosition="bottom"`. |
+| `labelPosition` | `'right' \| 'bottom'` | `'right'` | Label beside or below the icon. |
+| `variant` | `'floating' \| 'docked'` | `'floating'` | Float over content, or dock in flow. |
+| `isLight` | `boolean` | `false` | Force the compact light bar for all tabs. |
+| `lightBottomMargin` | `number` | `14` | Extra bottom gap in light mode only. |
+| `isTransparent` | `boolean` | `false` | Make the bar background see-through. |
+| `transparency` | `number` | `0.6` | Bar opacity `0–1` while `isTransparent`. |
+| `glass` | `boolean` | `false` | Native iOS Liquid Glass (needs `expo-glass-effect`). |
+| `renderBackground` | `() => ReactNode` | — | Custom background (blur/glass) behind the bar. |
+| `haptics` | `boolean` | `false` | Selection haptic on press (needs `expo-haptics`). |
+| `onTabPress` | `(name, focused) => void` | — | Fired on tab press. |
+| `onTabLongPress` | `(name, focused) => void` | — | Fired on tab long-press. |
 
 ### `MagicTabConfig`
 
-| Field   | Type                                       | Description                                   |
-| ------- | ------------------------------------------ | --------------------------------------------- |
-| `name`  | `string`                                   | Route name (matches the file in `app/`).      |
-| `href`  | `Href`                                     | Destination, e.g. `/` or `/search`.           |
-| `label` | `string?`                                  | Shown next to the icon while active.          |
-| `icon`  | `(p: MagicTabIconProps) => ReactNode`      | Renders the icon. Gets `{ focused, color, size }`. |
-
-### Theming (`MagicTabBarTheme`)
-
-`barColor`, `activePillColor`, `activeColor`, `inactiveColor`, `iconSize`,
-`height`, `radius`, `horizontalMargin`, `bottomInset`. See `defaultTheme`.
+| Field | Type | Description |
+| --- | --- | --- |
+| `name` | `string` | Route name (matches the file in `app/`). |
+| `href` | `Href` | Destination, e.g. `/` or `/search`. |
+| `icon` | `(p: MagicTabIconProps) => ReactNode` | Renders the icon. Gets `{ focused, color, size }`. |
+| `label` | `string?` | Text label. |
+| `showLabel` | `boolean?` | Per-tab override of `showLabels`. |
+| `badge` | `number \| string \| boolean?` | Dot (`true`) or count bubble. |
+| `disabled` | `boolean?` | Dim the tab and block navigation. |
+| `variant` | `'action'?` | Render as a raised FAB button. |
+| `isLight` | `boolean?` | Switch the whole bar to light mode while this tab is active. |
+
+### `MagicTabBarTheme`
+
+| Token | Default | |
+| --- | --- | --- |
+| `barColor` | `rgba(38,38,40,0.94)` | Bar background |
+| `activePillColor` | `rgba(120,120,124,0.55)` | Active-tab pill |
+| `activeColor` | `#FFFFFF` | Active icon/label color |
+| `inactiveColor` | `#FFFFFF` | Inactive icon color |
+| `iconSize` | `22` | Icon size |
+| `fontSize` | `12` | Active label size |
+| `height` | `56` | Bar height |
+| `radius` | `28` | Bar & pill corner radius |
+| `badgeColor` | `#FF3B30` | Badge background |
+| `badgeTextColor` | `#FFFFFF` | Badge text |
+| `actionColor` | `#0A84FF` | Action (FAB) background |
+| `actionIconColor` | `#FFFFFF` | Action (FAB) icon |
+| `horizontalMargin` | `14` | Side margin from screen edges |
+| `bottomInset` | `10` | Extra space below the bar |
+| `spring` | `{ mass: 0.6, damping: 18, stiffness: 180 }` | Pill/label animation |
+
+### Exported types
+
+`MagicTabConfig`, `MagicTabIconProps`, `MagicTabBarTheme`, `MagicTabBarVariant`, `MagicTabPressHandler`, `MagicLabelMode`, `MagicLabelPosition`, `MagicSpringConfig`, plus the `defaultTheme` value.
+
+> `defaultTabs` is exported from the `react-native-magic-tab-bar/default-tabs` subpath (not the main entry), so the core adds **zero runtime dependencies**.
 
 ## Development
 
-This repo is a monorepo: the library lives at the root (`src/`) and `example/`
-is a runnable Expo app that imports the library straight from source.
+This repo is a monorepo: the library lives at the root (`src/`) and `example/` is a runnable Expo app that imports the library straight from source.
 
 ```bash
 # from the repo root
@@ -116,6 +313,8 @@ Editing files in `src/` hot-reloads in the example app.
 
 ### Building / publishing
 
+> Publishing is restricted to package maintainers.
+
 ```bash
 npm run build     # react-native-builder-bob -> lib/ (ESM + d.ts)
 npm publish

package/lib/module/MagicTabBar.js

@@ -2,8 +2,23 @@
 
 import { forwardRef } from "react";
 import { StyleSheet, View } from "react-native";
+import Animated, { LinearTransition } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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;
 /**
  * `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
@@ -28,16 +43,25 @@ export const MIN_BAR_OPACITY = 0.1;
 export const MagicTabBar = /*#__PURE__*/forwardRef(function MagicTabBar({
   theme,
   variant = "floating",
+  labelPosition = "right",
   isTransparent = false,
   transparency = 0.6,
   glass = false,
   renderBackground,
+  isLight = false,
+  lightBottomMargin = LIGHT_EXTRA_BOTTOM_MARGIN,
   children,
   style,
   ...rest
 }, ref) {
   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();
@@ -50,13 +74,17 @@ export const MagicTabBar = /*#__PURE__*/forwardRef(function MagicTabBar({
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     pointerEvents: "box-none",
-    style: [floating ? styles.floatingWrapper : styles.dockedWrapper, {
-      paddingHorizontal: theme.horizontalMargin,
-      paddingBottom: (floating ? insets.bottom : 0) + theme.bottomInset
+    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: isLight ? 0 : theme.horizontalMargin,
+      paddingBottom: (floating ? insets.bottom : 0) + theme.bottomInset + extraBottomMargin
     }],
-    children: /*#__PURE__*/_jsxs(View, {
-      style: [styles.bar, !seeThrough && styles.barShadow, {
-        height: theme.height,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      layout: barTransition,
+      style: [styles.bar, !seeThrough && styles.barShadow, isLight && styles.lightBar, {
+        height: barHeight,
         borderRadius: theme.radius
       }],
       children: [renderBackground ? /*#__PURE__*/_jsx(View, {
@@ -89,7 +117,7 @@ export const MagicTabBar = /*#__PURE__*/forwardRef(function MagicTabBar({
           opacity: barOpacity
         }]
       }), /*#__PURE__*/_jsx(View, {
-        style: [styles.row, style],
+        style: [isLight ? styles.lightRow : styles.row, style],
         ...rest,
         children: children
       })]
@@ -109,6 +137,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,
@@ -125,6 +160,14 @@ const styles = StyleSheet.create({
     alignItems: "center",
     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
   }
 });
 //# sourceMappingURL=MagicTabBar.js.map

package/lib/module/MagicTabBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","StyleSheet","View","useSafeAreaInsets","jsx","_jsx","jsxs","_jsxs","glassEffect","require","MIN_BAR_OPACITY","MagicTabBar","theme","variant","isTransparent","transparency","glass","renderBackground","children","style","rest","ref","insets","floating","useGlass","isLiquidGlassAvailable","barOpacity","Math","min","max","seeThrough","pointerEvents","styles","floatingWrapper","dockedWrapper","paddingHorizontal","horizontalMargin","paddingBottom","bottom","bottomInset","bar","barShadow","height","borderRadius","radius","absoluteFill","overflow","GlassView","glassEffectStyle","tintColor","barColor","backgroundColor","opacity","row","create","position","left","right","width","flexDirection","shadowColor","shadowOpacity","shadowRadius","shadowOffset","elevation","flex","alignItems","justifyContent"],"sourceRoot":"../../src","sources":["MagicTabBar.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","StyleSheet","View","Animated","LinearTransition","useSafeAreaInsets","jsx","_jsx","jsxs","_jsxs","barTransition","springify","mass","damping","stiffness","BOTTOM_LABEL_EXTRA_HEIGHT","LIGHT_BAR_HEIGHT","LIGHT_EXTRA_BOTTOM_MARGIN","glassEffect","require","MIN_BAR_OPACITY","MagicTabBar","theme","variant","labelPosition","isTransparent","transparency","glass","renderBackground","isLight","lightBottomMargin","children","style","rest","ref","insets","floating","barHeight","height","extraBottomMargin","useGlass","isLiquidGlassAvailable","barOpacity","Math","min","max","seeThrough","pointerEvents","styles","floatingWrapper","dockedWrapper","lightWrapper","paddingHorizontal","horizontalMargin","paddingBottom","bottom","bottomInset","layout","bar","barShadow","lightBar","borderRadius","radius","absoluteFill","overflow","GlassView","glassEffectStyle","tintColor","barColor","backgroundColor","opacity","lightRow","row","create","position","left","right","width","flexDirection","alignItems","shadowColor","shadowOpacity","shadowRadius","shadowOffset","elevation","flex","justifyContent"],"sourceRoot":"../../src","sources":["MagicTabBar.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAwB,OAAO;AAClD,SACEC,UAAU,EACVC,IAAI,QAGC,cAAc;AACrB,OAAOC,QAAQ,IAAIC,gBAAgB,QAAQ,yBAAyB;AACpE,SAASC,iBAAiB,QAAQ,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOnE;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAGN,gBAAgB,CAACO,SAAS,CAAC,CAAC,CAC/CC,IAAI,CAAC,GAAG,CAAC,CACTC,OAAO,CAAC,EAAE,CAAC,CACXC,SAAS,CAAC,GAAG,CAAC;;AAEjB;AACA,MAAMC,yBAAyB,GAAG,CAAC;;AAEnC;AACA,MAAMC,gBAAgB,GAAG,EAAE;;AAE3B;AACA,MAAMC,yBAAyB,GAAG,EAAE;AAIpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAG,CAAC,MAAM;EACzB,IAAI;IACF,OAAOC,OAAO,CAAC,mBAAmB,CAAC;EACrC,CAAC,CAAC,MAAM;IACN,OAAO,IAAI;EACb;AACF,CAAC,EAAE,CAAC;;AAEJ;AACA,OAAO,MAAMC,eAAe,GAAG,GAAG;AA+ClC;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,gBAAGrB,UAAU,CACnC,SAASqB,WAAWA,CAClB;EACEC,KAAK;EACLC,OAAO,GAAG,UAAU;EACpBC,aAAa,GAAG,OAAO;EACvBC,aAAa,GAAG,KAAK;EACrBC,YAAY,GAAG,GAAG;EAClBC,KAAK,GAAG,KAAK;EACbC,gBAAgB;EAChBC,OAAO,GAAG,KAAK;EACfC,iBAAiB,GAAGb,yBAAyB;EAC7Cc,QAAQ;EACRC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,EACH;EACA,MAAMC,MAAM,GAAG9B,iBAAiB,CAAC,CAAC;EAClC,MAAM+B,QAAQ,GAAGb,OAAO,KAAK,QAAQ;EACrC;EACA;EACA;EACA,MAAMc,SAAS,GAAGR,OAAO,GACrBb,gBAAgB,GAChBQ,aAAa,KAAK,QAAQ,GACxBF,KAAK,CAACgB,MAAM,GAAGvB,yBAAyB,GACxCO,KAAK,CAACgB,MAAM;EAClB;EACA,MAAMC,iBAAiB,GAAGV,OAAO,GAAGC,iBAAiB,GAAG,CAAC;EACzD;EACA;EACA,MAAMU,QAAQ,GAAGb,KAAK,IAAI,CAAC,CAACT,WAAW,EAAEuB,sBAAsB,CAAC,CAAC;EACjE;EACA;EACA,MAAMC,UAAU,GAAGjB,aAAa,GAC5BkB,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACnB,YAAY,EAAEN,eAAe,CAAC,EAAE,CAAC,CAAC,GACpD,CAAC;EACL;EACA;EACA,MAAM0B,UAAU,GAAGN,QAAQ,IAAIf,aAAa;EAE5C,oBACElB,IAAA,CAACL,IAAI;IACHgC,GAAG,EAAEA,GAAI;IACTa,aAAa,EAAC,UAAU;IACxBf,KAAK,EAAE,CACLI,QAAQ,GAAGY,MAAM,CAACC,eAAe,GAAGD,MAAM,CAACE,aAAa;IACxD;IACA;IACArB,OAAO,IAAImB,MAAM,CAACG,YAAY,EAC9B;MACEC,iBAAiB,EAAEvB,OAAO,GAAG,CAAC,GAAGP,KAAK,CAAC+B,gBAAgB;MACvDC,aAAa,EACX,CAAClB,QAAQ,GAAGD,MAAM,CAACoB,MAAM,GAAG,CAAC,IAAIjC,KAAK,CAACkC,WAAW,GAAGjB;IACzD,CAAC,CACD;IAAAR,QAAA,eAEFtB,KAAA,CAACN,QAAQ,CAACD,IAAI;MACZuD,MAAM,EAAE/C,aAAc;MACtBsB,KAAK,EAAE,CACLgB,MAAM,CAACU,GAAG,EACV,CAACZ,UAAU,IAAIE,MAAM,CAACW,SAAS,EAC/B9B,OAAO,IAAImB,MAAM,CAACY,QAAQ,EAC1B;QAAEtB,MAAM,EAAED,SAAS;QAAEwB,YAAY,EAAEvC,KAAK,CAACwC;MAAO,CAAC,CACjD;MAAA/B,QAAA,GAEDH,gBAAgB,gBACfrB,IAAA,CAACL,IAAI;QACH6C,aAAa,EAAC,MAAM;QACpBf,KAAK,EAAE,CACL/B,UAAU,CAAC8D,YAAY,EACvB;UAAEF,YAAY,EAAEvC,KAAK,CAACwC,MAAM;UAAEE,QAAQ,EAAE;QAAS,CAAC,CAClD;QAAAjC,QAAA,EAEDH,gBAAgB,CAAC;MAAC,CACf,CAAC,GACLY,QAAQ,IAAItB,WAAW;MAAA;MACzB;MACA;MACAX,IAAA,CAACW,WAAW,CAAC+C,SAAS;QACpBlB,aAAa,EAAC,MAAM;QACpBmB,gBAAgB,EAAC,SAAS;QAC1BC,SAAS,EAAE7C,KAAK,CAAC8C,QAAS;QAC1BpC,KAAK,EAAE,CAAC/B,UAAU,CAAC8D,YAAY,EAAE;UAAEF,YAAY,EAAEvC,KAAK,CAACwC;QAAO,CAAC;MAAE,CAClE,CAAC;MAAA;MAEF;MACA;MACAvD,IAAA,CAACL,IAAI;QACH6C,aAAa,EAAC,MAAM;QACpBf,KAAK,EAAE,CACL/B,UAAU,CAAC8D,YAAY,EACvB;UACEM,eAAe,EAAE/C,KAAK,CAAC8C,QAAQ;UAC/BP,YAAY,EAAEvC,KAAK,CAACwC,MAAM;UAC1BQ,OAAO,EAAE5B;QACX,CAAC;MACD,CACH,CACF,eACDnC,IAAA,CAACL,IAAI;QAAC8B,KAAK,EAAE,CAACH,OAAO,GAAGmB,MAAM,CAACuB,QAAQ,GAAGvB,MAAM,CAACwB,GAAG,EAAExC,KAAK,CAAE;QAAA,GAAKC,IAAI;QAAAF,QAAA,EACnEA;MAAQ,CACL,CAAC;IAAA,CACM;EAAC,CACZ,CAAC;AAEX,CACF,CAAC;AAED,MAAMiB,MAAM,GAAG/C,UAAU,CAACwE,MAAM,CAAC;EAC/BxB,eAAe,EAAE;IACfyB,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRrB,MAAM,EAAE;EACV,CAAC;EACDL,aAAa,EAAE;IACb2B,KAAK,EAAE;EACT,CAAC;EACDnB,GAAG,EAAE;IACHoB,aAAa,EAAE;EACjB,CAAC;EACD;EACA3B,YAAY,EAAE;IACZ4B,UAAU,EAAE;EACd,CAAC;EACDnB,QAAQ,EAAE;IACRiB,KAAK,EAAE;EACT,CAAC;EACDlB,SAAS,EAAE;IACTqB,WAAW,EAAE,MAAM;IACnBC,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE,EAAE;IAChBC,YAAY,EAAE;MAAEN,KAAK,EAAE,CAAC;MAAEvC,MAAM,EAAE;IAAE,CAAC;IACrC8C,SAAS,EAAE;EACb,CAAC;EACDZ,GAAG,EAAE;IACHa,IAAI,EAAE,CAAC;IACPP,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBO,cAAc,EAAE,cAAc;IAC9BlC,iBAAiB,EAAE;EACrB,CAAC;EACD;EACAmB,QAAQ,EAAE;IACRc,IAAI,EAAE,CAAC;IACPP,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBO,cAAc,EAAE,cAAc;IAC9BlC,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC","ignoreList":[]}