react-native-magic-tab-bar 1.0.0

package/src/defaultTabs.tsx

@@ -0,0 +1,55 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { ComponentProps } from "react";
+import type { MagicTabConfig, MagicTabIconProps } from "./types";
+
+type IoniconName = ComponentProps<typeof Ionicons>["name"];
+
+/**
+ * Builds an icon renderer from a pair of Ionicons glyphs. The filled variant
+ * is shown for the active tab and the outline variant for inactive tabs.
+ */
+const ionicon =
+  (active: IoniconName, inactive: IoniconName) =>
+  ({ focused, color, size }: MagicTabIconProps) => (
+    <Ionicons name={focused ? active : inactive} color={color} size={size} />
+  );
+
+/**
+ * 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 const defaultTabs: MagicTabConfig[] = [
+  {
+    name: "index",
+    href: "/",
+    label: "Home",
+    icon: ionicon("home", "home-outline"),
+  },
+  {
+    name: "explore",
+    href: "/explore",
+    label: "Explore",
+    icon: ionicon("compass", "compass-outline"),
+  },
+  {
+    name: "notifications",
+    href: "/notifications",
+    label: "Notifications",
+    icon: ionicon("notifications", "notifications-outline"),
+  },
+  {
+    name: "inbox",
+    href: "/inbox",
+    label: "Inbox",
+    icon: ionicon("chatbubble-sharp", "chatbubble-outline"),
+  },
+  {
+    name: "profile",
+    href: "/profile",
+    label: "Profile",
+    icon: ionicon("person", "person-outline"),
+  },
+];

package/src/index.tsx

@@ -0,0 +1,15 @@
+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';

package/src/theme.ts

@@ -0,0 +1,15 @@
+import type { MagicTabBarTheme } from './types';
+
+/** Default dark, floating-pill theme. */
+export const defaultTheme: MagicTabBarTheme = {
+  barColor: 'rgba(38, 38, 40, 0.94)',
+  activePillColor: 'rgba(120, 120, 124, 0.55)',
+  activeColor: '#FFFFFF',
+  inactiveColor: '#FFFFFF',
+  iconSize: 22,
+  fontSize: 12,
+  height: 56,
+  radius: 28,
+  horizontalMargin: 14,
+  bottomInset: 10,
+};

package/src/types.ts

@@ -0,0 +1,51 @@
+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';