npx skiddie@latest add glass-pill-tab-bar

Glass Pill Tab Bar

A floating Liquid Glass pill of tabs with a separate round action, like search. Blur fallback off iOS 26.

Bottom Tabs

Dependencies

expo-blurexpo-glass-effectnativewindreact-native-reanimatedreact-native-workletsreact-native-safe-area-contexttailwindcssclsxtailwind-mergephosphor-react-nativereact-native-svg

Platforms

iOSAndroidWeb (approximate)

A floating pill of icon-and-label tabs with a matching round button beside it, for the one action that isn't a tab, such as search. Content shows through both. On iOS 26 and later it's Apple's real Liquid Glass; elsewhere it's a blur under a translucent fill. Tap a tab and a soft tile springs over to it.

Installation

Add the component

npx skiddie@latest add glass-pill-tab-bar

First run? It asks NativeWind or StyleSheet, then copies core/ too.

Add icons

Any icon set works. The examples use Phosphor:

npx expo install phosphor-react-native react-native-svg

Plug it in

src/app/_layout.tsx

import { DarkTheme, DefaultTheme, Tabs, ThemeProvider } from 'expo-router';import { CompassIcon } from 'phosphor-react-native/src/icons/Compass';import { HouseIcon } from 'phosphor-react-native/src/icons/House';import { useColorScheme } from 'react-native';import { GlassPillTabBar } from '@/components/skiddie/glass-pill-tab-bar';import { createTabBarAdapter } from '@/components/skiddie/core/adapters/react-navigation';// One entry per screen file next to this layout: index.tsx → index, explore.tsx → explore.const TabBar = createTabBarAdapter(GlassPillTabBar, {  tabs: {    index: { label: 'Home', icon: HouseIcon },    explore: { label: 'Explore', icon: CompassIcon },  },});export default function TabLayout() {  const scheme = useColorScheme();  return (    <ThemeProvider value={scheme === 'dark' ? DarkTheme : DefaultTheme}>      <Tabs tabBar={(props) => <TabBar {...props} />} screenOptions={{ headerShown: false }} />    </ThemeProvider>  );}

With Expo Router, this replaces the template's src/app/_layout.tsx: each screen file next to it becomes a tab. No src/ folder? Drop src/ from the paths.

The bar floats over your screens, which is what the glass needs. Pad scrolling screens with useTabBarInset() from @/components/skiddie/core/adapters/react-navigation so their last row clears it.

Set any prop once, in the adapter. Add the round button with action, and leave it out for the pill alone:

const TabBar = createTabBarAdapter(GlassPillTabBar, {
  action: {
    label: 'Search',
    onPress: () => router.push('/search'),
    icon: ({ color, size }) => <MagnifyingGlassIcon color={color} size={size} weight="bold" />,
  },
  colors: { action: '#FF375F', glassTint: 'rgba(255,55,95,0.12)' },
  tabs: { index: { label: 'Home', icon: HouseIcon }, library: { label: 'Library', icon: StackIcon } },
});

Every prop is in Props below, and Customization goes further (tokens, slots, renderItem).

tokens.ts

tailwind-preset.js

cn.ts

types.ts

adapters/react-navigation.tsx

index.tsx

styles.ts

glass-surface.tsx

types.ts

use-glass-tabs.ts

tailwind.config.js

File	What it does
glass-pill-tab-bar/index.tsx	The component
glass-pill-tab-bar/styles.ts	Default classes per slot
glass-pill-tab-bar/glass-surface.tsx	Liquid Glass, with a blur fallback
glass-pill-tab-bar/types.ts	Props, with docs
glass-pill-tab-bar/use-glass-tabs.ts	Shared logic (hook)
core/tokens.ts	Colors, radii, spacing, motion
core/tailwind-preset.js	Turns tokens into sk-* classes
core/cn.ts	Merges your classes last
core/types.ts	Shared prop contract
core/adapters/react-navigation.tsx	Plugs any bar into Expo Router / React Navigation tabs
tailwind.config.js	init adds the skiddie preset and folder

Install the dependencies:

npx expo install expo-blur expo-glass-effect nativewind react-native-reanimated react-native-worklets react-native-safe-area-context tailwindcss@^3.4 clsx tailwind-merge@^2

2
Install an icon set. The examples use Phosphor; any icon library works:
```
npx expo install phosphor-react-native react-native-svg
```

Set up NativeWind v4, then add the skiddie preset and folder to tailwind.config.js:

tailwind.config.js

module.exports = {  content: [    './app/**/*.{js,jsx,ts,tsx}',    './components/skiddie/**/*.{js,jsx,ts,tsx}',  ],  presets: [    require('nativewind/preset'),    require('./components/skiddie/core/tailwind-preset'),  ],};

Copy the shared files into components/skiddie/core/ (once, for every skiddie component):

components/skiddie/core/tokens.ts

/** * skiddie design tokens: the single source of truth. * * `tailwind-preset.js` turns these into `sk-*` Tailwind classes (CSS variables, so light/dark * switch automatically). Components read this file directly only for values needed in JS, * e.g. inside Reanimated worklets. Edit values here, then restart Metro so Tailwind rebuilds. */export const tokens = {  colors: {    light: {      background: '#FFFFFF',      surface: '#F4F4F5',      active: '#0A0A0A',      inactive: '#A1A1AA',      indicator: '#0A0A0A',      badge: '#EF4444',      badgeText: '#FFFFFF',      border: '#E4E4E7',      // Pill Tabs: the sliding pill inside the surface track, and the trackless version's pill on the background.      pill: '#FFFFFF',      pillPlain: '#F4F4F5',      // Divider Tab Bar: the active icon's color.      accent: '#A0692C',      // Slide Drawer: the layer that dims the screen behind an open drawer (at `opacity.scrim`).      scrim: '#000000',    },    dark: {      background: '#0A0A0A',      surface: '#18181B',      active: '#FAFAFA',      inactive: '#71717A',      indicator: '#FAFAFA',      badge: '#EF4444',      badgeText: '#FFFFFF',      border: '#27272A',      pill: '#3F3F46',      pillPlain: '#27272A',      accent: '#C8955A',      scrim: '#000000',    },  },  radius: { bar: 28, card: 12, item: 20, indicator: 999 },  spacing: {    barPaddingH: 12,    barPaddingV: 8,    itemPaddingV: 16,    itemGap: 4,    floatingInset: 16,    // Default gap between a floating bottom bar and the bottom safe area, so it clears the home indicator.    floatingOffset: 23,    badgeOffsetX: 8,    badgeOffsetY: 4,    badgePaddingH: 4,    // Gap between a highlight tile and its tab's edges.    tileInset: 4,    // Pill Tabs: horizontal padding inside each pill.    pillPaddingH: 16,    // Slide Drawer: padding inside the panel, space between its sections, a menu row's vertical padding and the    // gap between its icon and label, and the gap under the profile name.    drawerPadding: 24,    drawerSection: 24,    drawerItemV: 14,    drawerItemGap: 16,    drawerNameGap: 6,    // Text Tab Bar: room under a label for its underline (underline + gap).    textTabPad: 6,    // Glass Pill Tab Bar: the gap between the pill and its action, and a tab's vertical padding.    glassGap: 10,    glassItemV: 7,  },  // Sizes in px. Use these, not Tailwind's rem classes (py-4, h-1…): NativeWind makes 1rem 14px on native and 16px  // on web, so rem classes would differ from the StyleSheet versions (ADR 0026).  size: {    indicatorThickness: 4,    // Longest an underline gets, so it stays short when a bar has few, wide tabs.    underlineMax: 48,    badge: 16,    badgeDot: 8,    // The cutout bar's notch: opening width at the top edge, depth, and the dot inside it.    notchWidth: 44,    notchDepth: 10,    notchDot: 6,    // Divider Tab Bar: height and width of the lines between tabs.    dividerHeight: 24,    dividerWidth: 1,    // Slide Drawer: panel width (never more than `drawerMaxShare` of the screen), profile picture, footer button.    drawerWidth: 320,    drawerMaxShare: 0.85,    drawerAvatar: 88,    drawerButton: 52,    // Scrollable Top Tabs: each tab's minimum width and the underline's thickness.    topTabWidth: 120,    topTabUnderline: 1.5,    // Text Tab Bar: the underline's thickness.    textTabUnderline: 2,    // Glass Pill Tab Bar: the round action's size, as tall as the pill.    glassAction: 64,  },  typography: {    label: { fontSize: 11, lineHeight: 14, letterSpacing: 0.2 },    badge: { fontSize: 10 },    // Top tab labels (Pill Tabs).    tab: { fontSize: 15, lineHeight: 20, letterSpacing: -0.2 },    // Slide Drawer: the profile name and detail line, and the menu rows.    drawerName: { fontSize: 28, lineHeight: 34, letterSpacing: -0.4 },    drawerDetail: { fontSize: 15, lineHeight: 20, letterSpacing: 0 },    drawerItem: { fontSize: 16, lineHeight: 22, letterSpacing: -0.1 },    // Text Tab Bar labels, with no custom font set.    textTab: { fontSize: 14, lineHeight: 20, letterSpacing: 0.2 },  },  // Glass Pill Tab Bar: translucent, so not `colors` (those become sk-* classes). `fillNoBlur` is for where no blur  // runs behind the fill: Android without a `blurTarget`.  glass: {    light: {      active: '#0A0A0A',      inactive: '#3F3F46',      tile: 'rgba(0,0,0,0.08)',      fill: 'rgba(255,255,255,0.42)',      fillNoBlur: 'rgba(250,250,250,0.94)',      border: 'rgba(255,255,255,0.6)',      action: '#0A84FF',    },    dark: {      active: '#FFFFFF',      inactive: 'rgba(255,255,255,0.72)',      tile: 'rgba(255,255,255,0.16)',      fill: 'rgba(28,28,30,0.42)',      fillNoBlur: 'rgba(28,28,30,0.94)',      border: 'rgba(255,255,255,0.14)',      action: '#4DA3FF',    },  },  // Slide Drawer: how dark the scrim gets when the drawer is fully open.  opacity: { scrim: 0.5 },  motion: { spring: { damping: 18, stiffness: 220, mass: 1 }, durationMs: 220 },  hitSlop: 8,  minTouchTarget: 44,} as const;export type SkiddieTokens = typeof tokens;export type SkiddieColorName = keyof SkiddieTokens['colors']['light'];

components/skiddie/core/tailwind-preset.js

// skiddie Tailwind preset for NativeWind v4 (ADR 0020).// Add to tailwind.config.js:  presets: [require('nativewind/preset'), require('./components/skiddie/core/tailwind-preset')]// and add the skiddie folder to `content`, or the components render unstyled.//// Values come from tokens.ts. Tailwind loads configs through jiti, which transpiles the TS import.const { tokens } = require('./tokens.ts');/** '#0A0A0A' -> '10 10 10' (channels, so `/ <alpha-value>` opacity modifiers work) */function channels(hex) {  const value = hex.replace('#', '');  const full =    value.length === 3      ? value          .split('')          .map((c) => c + c)          .join('')      : value;  const n = Number.parseInt(full, 16);  return `${(n >> 16) & 255} ${(n >> 8) & 255} ${n & 255}`;}/** camelCase token name -> kebab-case class/variable name: badgeText -> badge-text */function kebab(name) {  return name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);}function cssVars(scheme) {  return Object.fromEntries(    Object.entries(tokens.colors[scheme]).map(([name, hex]) => [`--sk-${kebab(name)}`, channels(hex)]),  );}const colorNames = Object.keys(tokens.colors.light);/** @type {import('tailwindcss').Config} */module.exports = {  theme: {    extend: {      colors: {        sk: Object.fromEntries(          colorNames.map((name) => [kebab(name), `rgb(var(--sk-${kebab(name)}) / <alpha-value>)`]),        ),      },      borderRadius: {        'sk-bar': `${tokens.radius.bar}px`,        'sk-card': `${tokens.radius.card}px`,        'sk-item': `${tokens.radius.item}px`,        'sk-indicator': `${tokens.radius.indicator}px`,      },      spacing: {        'sk-bar-x': `${tokens.spacing.barPaddingH}px`,        'sk-bar-y': `${tokens.spacing.barPaddingV}px`,        'sk-gap': `${tokens.spacing.itemGap}px`,        'sk-inset': `${tokens.spacing.floatingInset}px`,        'sk-touch': `${tokens.minTouchTarget}px`,        'sk-item-y': `${tokens.spacing.itemPaddingV}px`,        'sk-badge-x': `${tokens.spacing.badgeOffsetX}px`,        'sk-badge-y': `${tokens.spacing.badgeOffsetY}px`,        'sk-badge-pad': `${tokens.spacing.badgePaddingH}px`,        'sk-tile': `${tokens.spacing.tileInset}px`,        'sk-pill-x': `${tokens.spacing.pillPaddingH}px`,        'sk-indicator': `${tokens.size.indicatorThickness}px`,        'sk-badge': `${tokens.size.badge}px`,        'sk-dot': `${tokens.size.badgeDot}px`,        'sk-divider-h': `${tokens.size.dividerHeight}px`,        'sk-divider-w': `${tokens.size.dividerWidth}px`,        'sk-drawer-pad': `${tokens.spacing.drawerPadding}px`,        'sk-drawer-section': `${tokens.spacing.drawerSection}px`,        'sk-drawer-item-y': `${tokens.spacing.drawerItemV}px`,        'sk-drawer-gap': `${tokens.spacing.drawerItemGap}px`,        'sk-drawer-name-gap': `${tokens.spacing.drawerNameGap}px`,        'sk-drawer-avatar': `${tokens.size.drawerAvatar}px`,        'sk-drawer-button': `${tokens.size.drawerButton}px`,        'sk-top-tab': `${tokens.size.topTabWidth}px`,        'sk-top-underline': `${tokens.size.topTabUnderline}px`,        'sk-text-pad': `${tokens.spacing.textTabPad}px`,        'sk-text-underline': `${tokens.size.textTabUnderline}px`,        'sk-glass-gap': `${tokens.spacing.glassGap}px`,        'sk-glass-item-y': `${tokens.spacing.glassItemV}px`,        'sk-glass-action': `${tokens.size.glassAction}px`,      },      maxWidth: {        'sk-underline': `${tokens.size.underlineMax}px`,      },      fontSize: {        'sk-label': [          `${tokens.typography.label.fontSize}px`,          {            lineHeight: `${tokens.typography.label.lineHeight}px`,            letterSpacing: `${tokens.typography.label.letterSpacing}px`,          },        ],        'sk-badge': `${tokens.typography.badge.fontSize}px`,        'sk-tab': [          `${tokens.typography.tab.fontSize}px`,          {            lineHeight: `${tokens.typography.tab.lineHeight}px`,            letterSpacing: `${tokens.typography.tab.letterSpacing}px`,          },        ],        'sk-drawer-name': [          `${tokens.typography.drawerName.fontSize}px`,          {            lineHeight: `${tokens.typography.drawerName.lineHeight}px`,            letterSpacing: `${tokens.typography.drawerName.letterSpacing}px`,          },        ],        'sk-drawer-detail': [          `${tokens.typography.drawerDetail.fontSize}px`,          {            lineHeight: `${tokens.typography.drawerDetail.lineHeight}px`,            letterSpacing: `${tokens.typography.drawerDetail.letterSpacing}px`,          },        ],        'sk-text-tab': [          `${tokens.typography.textTab.fontSize}px`,          {            lineHeight: `${tokens.typography.textTab.lineHeight}px`,            letterSpacing: `${tokens.typography.textTab.letterSpacing}px`,          },        ],        'sk-drawer-item': [          `${tokens.typography.drawerItem.fontSize}px`,          {            lineHeight: `${tokens.typography.drawerItem.lineHeight}px`,            letterSpacing: `${tokens.typography.drawerItem.letterSpacing}px`,          },        ],      },    },  },  plugins: [    ({ addBase }) =>      addBase({        ':root': cssVars('light'),        // System appearance (NativeWind's default `darkMode: 'media'`)        '@media (prefers-color-scheme: dark)': { ':root': cssVars('dark') },        // Apps that switch manually with `darkMode: 'class'`        '.dark:root': cssVars('dark'),      }),  ],};

components/skiddie/core/cn.ts

import { type ClassValue, clsx } from 'clsx';import { extendTailwindMerge } from 'tailwind-merge';// tailwind-merge only knows Tailwind's own scales. Teach it the sk-* ones from tailwind-preset.js, or it drops// `text-sk-label` (a size) next to `text-sk-active` (a color) and can't let `rounded-none` replace `rounded-sk-bar`.// Keep these lists in step with the preset.const twMerge = extendTailwindMerge({  extend: {    theme: {      spacing: [        'sk-bar-x',        'sk-bar-y',        'sk-gap',        'sk-inset',        'sk-touch',        'sk-item-y',        'sk-badge-x',        'sk-badge-y',        'sk-badge-pad',        'sk-tile',        'sk-pill-x',        'sk-indicator',        'sk-badge',        'sk-dot',        'sk-divider-h',        'sk-divider-w',        'sk-drawer-pad',        'sk-drawer-section',        'sk-drawer-item-y',        'sk-drawer-gap',        'sk-drawer-name-gap',        'sk-drawer-avatar',        'sk-drawer-button',        'sk-top-tab',        'sk-top-underline',        'sk-text-pad',        'sk-text-underline',        'sk-glass-gap',        'sk-glass-item-y',        'sk-glass-action',      ],      borderRadius: ['sk-bar', 'sk-card', 'sk-item', 'sk-indicator'],    },    classGroups: {      'font-size': [        {          text: [            'sk-label',            'sk-badge',            'sk-tab',            'sk-drawer-name',            'sk-drawer-detail',            'sk-drawer-item',            'sk-text-tab',          ],        },      ],      'max-w': [{ 'max-w': ['sk-underline'] }],    },  },});/** * Merge class names. Later classes win, so user `className` / `classNames` override * component defaults: cn('bg-sk-background px-2', className). */export function cn(...inputs: ClassValue[]): string {  return twMerge(clsx(inputs));}

components/skiddie/core/types.ts

import type { ReactNode } from 'react';import type { StyleProp, TextStyle, ViewStyle } from 'react-native';import type { EdgeInsets } from 'react-native-safe-area-context';/* * Shared prop contract for every tab-bar-like component (PLAN.md 2.3, ADR 0020). * Customization goes, in order of power: tokens → className / classNames → renderItem → animation. */export type TabIconRender = (p: { focused: boolean; color: string; size: number }) => ReactNode;export interface TabItem {  /** Unique key; matches `activeKey` and is passed to `onChange`. */  key: string;  /** Visible label, also the default accessibility label. */  label: string;  icon?: TabIconRender;  /** A count, a short string, or `true` for a dot. Announced to screen readers. */  badge?: number | string | boolean;  accessibilityLabel?: string;  testID?: string;  disabled?: boolean;}export type TabBarSlot =  | 'container'  | 'bar'  | 'item'  | 'itemActive'  | 'icon'  | 'label'  | 'labelActive'  | 'indicator'  | 'badge'  | 'badgeText';export interface RenderItemProps {  item: TabItem;  focused: boolean;  index: number;  onPress: () => void;}export interface SpringConfig {  damping?: number;  stiffness?: number;  mass?: number;}/** Everything a tab bar takes except styling; shared by the NativeWind and StyleSheet versions (ADR 0026). */export interface TabBarBehaviorProps {  items: TabItem[];  activeKey: string;  onChange: (key: string) => void;  onLongPress?: (key: string) => void;  /** Escape hatch; wins over classes and slot styles. */  style?: StyleProp<ViewStyle>;  renderItem?: (p: RenderItemProps) => ReactNode;  animation?: { type?: 'spring' | 'timing'; spring?: SpringConfig; durationMs?: number };  haptics?: boolean | 'light' | 'medium' | 'selection';  reducedMotion?: 'system' | 'always' | 'never';  /** Pad for the bottom safe area. Default `true`. */  safeArea?: boolean;  /** Injected by the navigator adapter when available. */  insets?: EdgeInsets;  testID?: string;}/** NativeWind version: style with classes. */export interface BaseTabBarProps<Slot extends string = TabBarSlot> extends TabBarBehaviorProps {  /** Classes for the root. Merged last, so they win over defaults. */  className?: string;  /** Classes per part. */  classNames?: Partial<Record<Slot, string>>;}/** Slots that render text; they take `TextStyle`, every other slot `ViewStyle`. */export type TextSlot = 'label' | 'labelActive' | 'badgeText';/** StyleSheet version: style with style objects. */export interface BaseTabBarStyleProps<Slot extends string = TabBarSlot> extends TabBarBehaviorProps {  /** Styles per part, applied after the defaults, so they win. */  styles?: { [K in Slot]?: StyleProp<K extends TextSlot ? TextStyle : ViewStyle> };}

components/skiddie/core/adapters/react-navigation.tsx

import { type ComponentType, type ReactNode, useEffect, useSyncExternalStore } from 'react';import { View } from 'react-native';import type { EdgeInsets } from 'react-native-safe-area-context';import type { TabBarBehaviorProps, TabIconRender, TabItem } from '../types';/* * Turns any skiddie tab bar into the `tabBar` of Expo Router's <Tabs> or React Navigation's bottom tab navigator * (ADR 0037). Each route becomes a tab: its label and icon come from the adapter's `tabs` map (keyed by route name), * and screen options win when set (`title` or a string `tabBarLabel`, `tabBarIcon`, `tabBarBadge`, * `tabBarAccessibilityLabel`, `tabBarButtonTestID`). Pressing a tab emits `tabPress` (listeners can * `preventDefault()`), long press emits `tabLongPress`. Floating bars are drawn over the screens; `useTabBarInset()` * tells a screen how much to pad its content. * * The navigator's props are typed by shape, not imported: Expo Router apps don't install @react-navigation/bottom-tabs. *//** An icon component, such as `HouseIcon` from Phosphor. It gets the bar's `color` and `size`. */export type TabIconComponent = ComponentType<{ color?: string; size?: number }>;/** One tab's defaults, keyed by route name in `tabs`. */export interface TabConfig {  label?: string;  icon?: TabIconComponent;  badge?: number | string | boolean;}/** The screen options the adapter reads. */export interface TabScreenOptions {  title?: string;  tabBarLabel?: unknown;  tabBarIcon?: unknown;  tabBarBadge?: number | string;  tabBarAccessibilityLabel?: string;  tabBarButtonTestID?: string;}/** The props a navigator passes to a custom `tabBar` (only what the adapter reads). */export interface NavigatorTabBarProps {  state: { index: number; routes: readonly { key: string; name: string; params?: object }[] };  descriptors: Record<string, { options: TabScreenOptions }>;  navigation: {    /** Returns the event; for `tabPress`, its `defaultPrevented` says whether a listener cancelled it. */    emit(event: { type: 'tabPress' | 'tabLongPress'; target: string; canPreventDefault?: boolean }): unknown;    navigate(name: string, params?: object): void;  };  insets?: EdgeInsets;}/** Bar props you set once for every screen (everything the navigator doesn't provide), plus `tabs`. */export type TabBarAdapterOptions<P extends TabBarBehaviorProps> = Omit<  Partial<P>,  'items' | 'activeKey' | 'onChange'> & {  /** Label, icon and badge per route name, e.g. `{ index: { label: 'Home', icon: HouseIcon } }`. */  tabs?: Record<string, TabConfig>;  /**   * Draw the bar over the screens (default `true`), so they show behind and around a floating bar. `false` puts it   * below them, like a navigator's own tab bar.   */  floating?: boolean;};// The floating bar's height, measured on layout, for screens to pad their content (`useTabBarInset`).let barHeight = 0;const listeners = new Set<() => void>();function setBarHeight(height: number) {  if (height === barHeight) return;  barHeight = height;  for (const listener of listeners) listener();}function subscribe(listener: () => void) {  listeners.add(listener);  return () => {    listeners.delete(listener);  };}const getBarHeight = () => barHeight;/** * How much of the screen a floating bar covers at the bottom (bar, offset and safe area), in px; 0 when it isn't * floating. Pad scrolling content with it so the last item clears the bar: * `<ScrollView contentContainerStyle={{ paddingBottom: useTabBarInset() }}>`. */export function useTabBarInset(): number {  return useSyncExternalStore(subscribe, getBarHeight, getBarHeight);}const floatingStyle = { position: 'absolute', left: 0, right: 0, bottom: 0 } as const;function iconFrom(Icon: TabIconComponent | undefined): TabIconRender | undefined {  return Icon && (({ color, size }) => <Icon color={color} size={size} />);}/** * ```tsx * const TabBar = createTabBarAdapter(GlideTabBar, { *   tabs: { index: { label: 'Home', icon: HouseIcon }, explore: { label: 'Explore', icon: CompassIcon } }, * }); * <Tabs tabBar={(props) => <TabBar {...props} />} /> * ``` */export function createTabBarAdapter<P extends TabBarBehaviorProps>(  Bar: ComponentType<P>,  options?: TabBarAdapterOptions<P>,): (props: NavigatorTabBarProps) => ReactNode {  const { tabs = {}, floating = true, ...barProps } = options ?? ({} as TabBarAdapterOptions<P>);  const warned = new Set<string>();  return function SkiddieTabBar({ state, descriptors, navigation, insets }: NavigatorTabBarProps) {    // The bar is gone (navigator unmounted): screens shouldn't keep padding for it.    useEffect(() => () => setBarHeight(0), []);    if (__DEV__) {      // A typo in `tabs` would otherwise just leave a tab without its label or icon.      const names = state.routes.map((r) => r.name);      for (const key of Object.keys(tabs)) {        if (names.includes(key) || warned.has(key)) continue;        warned.add(key);        console.warn(`skiddie: tabs.${key} matches no screen. Screens: ${names.join(', ')}`);      }    }    const items: TabItem[] = state.routes.map((route) => {      const o = descriptors[route.key]?.options ?? {};      const tab = tabs[route.name] ?? {};      return {        key: route.key,        label: typeof o.tabBarLabel === 'string' ? o.tabBarLabel : (o.title ?? tab.label ?? route.name),        icon: (o.tabBarIcon as TabIconRender | undefined) ?? iconFrom(tab.icon),        badge: o.tabBarBadge ?? tab.badge,        accessibilityLabel: o.tabBarAccessibilityLabel,        testID: o.tabBarButtonTestID,      };    });    const activeKey = state.routes[state.index]?.key ?? '';    const onChange = (key: string) => {      const route = state.routes.find((r) => r.key === key);      if (!route) return;      const event = navigation.emit({ type: 'tabPress', target: key, canPreventDefault: true }) as {        defaultPrevented?: boolean;      } | null;      if (key !== activeKey && !event?.defaultPrevented) navigation.navigate(route.name, route.params);    };    const onLongPress = (key: string) => {      navigation.emit({ type: 'tabLongPress', target: key });    };    const props = { insets, ...barProps, items, activeKey, onChange, onLongPress } as unknown as P;    if (!floating) return <Bar {...props} />;    return (      <View pointerEvents="box-none" style={floatingStyle} onLayout={(e) => setBarHeight(e.nativeEvent.layout.height)}>        <Bar {...props} />      </View>    );  };}

Copy the component into components/skiddie/glass-pill-tab-bar/:

components/skiddie/glass-pill-tab-bar/index.tsx

import { cn } from '../core/cn';import { tokens } from '../core/tokens';import { useColorScheme } from 'nativewind';import { memo } from 'react';import { Pressable, Text, View } from 'react-native';import Animated from 'react-native-reanimated';import { useSafeAreaInsets } from 'react-native-safe-area-context';import { GlassSurface } from './glass-surface';import { styles } from './styles';import type { GlassPillTabBarProps } from './types';import { useGlassTabs } from './use-glass-tabs';/** A floating Liquid Glass pill of tabs with a separate round action. NativeWind version. */export const GlassPillTabBar = memo(function GlassPillTabBar({  items,  activeKey,  onChange,  onLongPress,  className,  classNames,  style,  renderItem,  animation,  reducedMotion,  action,  showLabels = true,  iconSize = 24,  glassStyle,  blurIntensity,  blurTarget,  colors,  safeArea = true,  insets,  testID,}: GlassPillTabBarProps) {  const safe = useSafeAreaInsets();  // NativeWind's hook follows the system appearance and apps that switch dark mode by hand.  const { colorScheme } = useColorScheme();  const scheme = colorScheme === 'dark' ? 'dark' : 'light';  const glass = tokens.glass[scheme];  // Clears the home indicator, or floats the same distance on phones without one.  const bottom = Math.max(safeArea ? (insets ?? safe).bottom : 0, tokens.spacing.floatingOffset);  const { tileStyle, onItemLayout, onRowLayout } = useGlassTabs({ items, activeKey, animation, reducedMotion });  const surface = (    <GlassSurface      scheme={scheme}      glassStyle={glassStyle}      blurIntensity={blurIntensity}      blurTarget={blurTarget}      fill={colors?.fill}      glassTint={colors?.glassTint}      border={colors?.border}    />  );  return (    <View      testID={testID}      pointerEvents="box-none"      className={cn(styles.container, classNames?.container, className)}      style={[{ paddingBottom: bottom }, style]}    >      <View className={cn(styles.bar, classNames?.bar)}>        {surface}        <View role="tablist" onLayout={onRowLayout} className={styles.row}>          {/* Plain Views for the classes (NativeWind styles core components); Animated.Views get only the motion. */}          <View pointerEvents="none" className={styles.track}>            <Animated.View style={tileStyle}>              <View                style={{ backgroundColor: colors?.tile ?? glass.tile }}                className={cn(styles.indicator, classNames?.indicator)}              />            </Animated.View>          </View>          {items.map((item, index) => {            const focused = item.key === activeKey;            const onPress = () => onChange(item.key);            if (renderItem)              return (                <View key={item.key} onLayout={onItemLayout(index)} className="flex-1">                  {renderItem({ item, focused, index, onPress })}                </View>              );            const hasBadge = item.badge !== undefined && item.badge !== false;            const spoken = item.badge === true ? 'new' : item.badge;            const label = item.accessibilityLabel ?? item.label;            const color = focused ? (colors?.active ?? glass.active) : (colors?.inactive ?? glass.inactive);            return (              <Pressable                key={item.key}                role="tab"                accessibilityState={{ selected: focused, disabled: item.disabled }}                accessibilityLabel={hasBadge ? `${label}, ${spoken}` : label}                disabled={item.disabled}                onPress={onPress}                onLongPress={onLongPress ? () => onLongPress(item.key) : undefined}                onLayout={onItemLayout(index)}                testID={item.testID}                className={cn(                  styles.item,                  classNames?.item,                  focused && cn(styles.itemActive, classNames?.itemActive),                  item.disabled && 'cursor-auto opacity-40',                )}              >                {item.icon && (                  <View className={cn(styles.icon, classNames?.icon)}>                    {item.icon({ focused, color, size: iconSize })}                    {hasBadge && (                      <View                        style={colors?.badge ? { backgroundColor: colors.badge } : undefined}                        className={cn(                          styles.badge,                          item.badge === true && 'size-sk-dot min-w-0 px-0',                          classNames?.badge,                        )}                      >                        {item.badge !== true && (                          <Text                            style={colors?.badgeText ? { color: colors.badgeText } : undefined}                            className={cn(styles.badgeText, classNames?.badgeText)}                          >                            {item.badge}                          </Text>                        )}                      </View>                    )}                  </View>                )}                {(showLabels || !item.icon) && (                  <Text                    numberOfLines={1}                    style={{ color }}                    className={cn(                      styles.label,                      classNames?.label,                      focused && cn(styles.labelActive, classNames?.labelActive),                    )}                  >                    {item.label}                  </Text>                )}              </Pressable>            );          })}        </View>      </View>      {action && (        <Pressable          role="button"          accessibilityLabel={action.label}          onPress={action.onPress}          testID={action.testID}          className={cn(styles.action, classNames?.action)}        >          {surface}          {/* In a View so it stacks above the surface on web, where a bare svg would paint under it. */}          <View className={styles.actionIcon}>            {action.icon({ focused: false, color: colors?.action ?? glass.action, size: iconSize + 4 })}          </View>        </Pressable>      )}    </View>  );});export default GlassPillTabBar;

components/skiddie/glass-pill-tab-bar/styles.ts

/** * Default classes per slot, from sk-* token classes. Users override any slot with `classNames`. The colors of the * glass parts are translucent, so they come from `tokens.glass` in index.tsx, not from classes. */export const styles = {  // Floats over the screen; the bottom padding is added in index.tsx.  container: 'flex-row items-center gap-sk-glass-gap px-sk-inset',  // The pill.  bar: 'flex-1 p-sk-tile',  row: 'flex-row',  item: 'min-h-sk-touch flex-1 cursor-pointer items-center justify-center gap-sk-gap py-sk-glass-item-y',  itemActive: '',  icon: 'items-center justify-center',  label: 'text-sk-label font-medium',  labelActive: '',  // The tile's layer, as big as the row; its x and width come from use-glass-tabs.ts.  track: 'absolute inset-0 flex-row',  indicator: 'flex-1 rounded-sk-indicator',  // The round button beside the pill.  action: 'size-sk-glass-action cursor-pointer items-center justify-center',  actionIcon: 'items-center justify-center',  badge:    'absolute -end-sk-badge-x -top-sk-badge-y min-w-sk-badge items-center justify-center rounded-sk-indicator bg-sk-badge px-sk-badge-pad',  badgeText: 'text-center text-sk-badge font-semibold text-sk-badge-text',} as const;

components/skiddie/glass-pill-tab-bar/glass-surface.tsx

import { tokens } from '../core/tokens';import { BlurView } from 'expo-blur';import { GlassView, isGlassEffectAPIAvailable, isLiquidGlassAvailable } from 'expo-glass-effect';import type { RefObject } from 'react';import { Platform, StyleSheet, View } from 'react-native';// Checked once: neither changes while the app runs. Some iOS 26 betas lack the API and crash, hence both checks.const liquidGlass = Platform.OS === 'ios' && isGlassEffectAPIAvailable() && isLiquidGlassAvailable();/** * What the pill and the action are made of; fills its parent. Real Liquid Glass on iOS 26+. Everywhere else, a blur * under a translucent fill and a hairline. Android only blurs inside a `BlurTargetView`, so with no `blurTarget` it * gets a nearly solid fill instead (`fillNoBlur`), which stays readable over anything. */export function GlassSurface({  scheme,  glassStyle = 'regular',  blurIntensity = 60,  blurTarget,  fill,  glassTint,  border,}: {  scheme: 'light' | 'dark';  glassStyle?: 'regular' | 'clear';  blurIntensity?: number;  blurTarget?: RefObject<View | null>;  fill?: string;  glassTint?: string;  border?: string;}) {  if (liquidGlass)    return (      <GlassView        pointerEvents="none"        glassEffectStyle={glassStyle}        tintColor={glassTint}        colorScheme={scheme}        style={surface.liquid}      />    );  const glass = tokens.glass[scheme];  const blurs = Platform.OS !== 'android' || blurTarget !== undefined;  return (    <View pointerEvents="none" style={[surface.fallback, { borderColor: border ?? glass.border }]}>      <BlurView        intensity={blurIntensity}        tint={scheme}        blurTarget={blurTarget}        blurMethod={blurTarget ? 'dimezisBlurViewSdk31Plus' : undefined}        style={StyleSheet.absoluteFill}      />      <View style={[StyleSheet.absoluteFill, { backgroundColor: fill ?? (blurs ? glass.fill : glass.fillNoBlur) }]} />    </View>  );}const surface = StyleSheet.create({  liquid: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, borderRadius: tokens.radius.indicator },  // BlurView ignores borderRadius, so the clip goes on a parent.  fallback: {    position: 'absolute',    top: 0,    bottom: 0,    left: 0,    right: 0,    overflow: 'hidden',    borderRadius: tokens.radius.indicator,    borderWidth: StyleSheet.hairlineWidth,  },});

components/skiddie/glass-pill-tab-bar/types.ts

import type { BaseTabBarProps, BaseTabBarStyleProps, TabBarSlot, TabIconRender } from '../core/types';import type { RefObject } from 'react';import type { View } from 'react-native';/** The shared slots, plus `action`: the round button beside the pill. `bar` is the pill, `indicator` its tile. */export type GlassPillTabBarSlot = TabBarSlot | 'action';/** Colors you can set per bar. Anything left out comes from `tokens.glass`, and follows light and dark mode. */export interface GlassPillTabBarColors {  /** The active icon and label. */  active?: string;  /** The other icons and labels. */  inactive?: string;  /** The tile behind the active tab. */  tile?: string;  /** Laid over the blur where there is no Liquid Glass. Keep it translucent. */  fill?: string;  /** Tints real Liquid Glass (iOS 26+). */  glassTint?: string;  /** The hairline around the blur where there is no Liquid Glass. */  border?: string;  /** The action's icon. */  action?: string;  badge?: string;  badgeText?: string;}/** The round button beside the pill, for one thing that isn't a tab: search, compose, scan. */export interface GlassPillAction {  /** What screen readers read. Not shown. */  label: string;  icon: TabIconRender;  onPress: () => void;  testID?: string;}interface GlassPillTabBarOptions {  /** The round button beside the pill. Leave it out for the pill alone. */  action?: GlassPillAction;  /** Show each tab's label under its icon. Screen readers read labels either way. Default `true`. */  showLabels?: boolean;  /** Icon size in points. Default `24`. */  iconSize?: number;  /** Liquid Glass style on iOS 26+. `clear` shows more of what's behind. Default `regular`. */  glassStyle?: 'regular' | 'clear';  /** Blur strength (1 to 100) where there is no Liquid Glass. Default `60`. */  blurIntensity?: number;  /**   * Android only: a ref to the `BlurTargetView` (expo-blur) wrapping your screens. Android can only blur what's   * inside one, so without it the bar is a nearly solid fill, not a blur.   */  blurTarget?: RefObject<View | null>;  /** Colors for this bar, over the tokens. */  colors?: GlassPillTabBarColors;}/** NativeWind version (`index.tsx`): style with `className` / `classNames`. */export interface GlassPillTabBarProps extends BaseTabBarProps<GlassPillTabBarSlot>, GlassPillTabBarOptions {}/** StyleSheet version (`stylesheet/index.tsx`): style with `styles`. */export interface GlassPillTabBarStyleProps extends BaseTabBarStyleProps<GlassPillTabBarSlot>, GlassPillTabBarOptions {}

components/skiddie/glass-pill-tab-bar/use-glass-tabs.ts

import { tokens } from '../core/tokens';import type { TabBarBehaviorProps } from '../core/types';import { useEffect, useRef } from 'react';import { I18nManager, type LayoutChangeEvent } from 'react-native';import {  Easing,  useAnimatedStyle,  useReducedMotion,  useSharedValue,  withSpring,  withTiming,} from 'react-native-reanimated';type Options = Pick<TabBarBehaviorProps, 'items' | 'activeKey' | 'animation' | 'reducedMotion'>;type Box = { x: number; w: number };/** * The tile's motion, shared by both versions of the bar. A shared value holds the active *index*; the worklet * blends the two measured tabs it sits between, so a tap mid-animation starts from where the tile is and rotating * the phone moves it without animating. */export function useGlassTabs({ items, activeKey, animation, reducedMotion = 'system' }: Options) {  const systemReduced = useReducedMotion();  const reduce = reducedMotion === 'always' || (reducedMotion === 'system' && systemReduced);  const activeIndex = items.findIndex((item) => item.key === activeKey);  const found = activeIndex >= 0;  const rtl = I18nManager.isRTL;  const boxes = useRef<Box[]>([]);  const measured = useSharedValue<Box[]>([]);  const rowWidth = useSharedValue(0);  const position = useSharedValue(Math.max(activeIndex, 0));  // A soft spring by default: the tile is glass, so it settles rather than stops. `animation={{ type: 'timing' }}`  // for no bounce.  const type = animation?.type ?? 'spring';  const durationMs = animation?.durationMs ?? tokens.motion.durationMs;  const damping = animation?.spring?.damping ?? tokens.motion.spring.damping;  const stiffness = animation?.spring?.stiffness ?? tokens.motion.spring.stiffness;  const mass = animation?.spring?.mass ?? tokens.motion.spring.mass;  useEffect(() => {    if (!found) return;    if (reduce) position.value = activeIndex;    else if (type === 'spring') position.value = withSpring(activeIndex, { damping, stiffness, mass });    else position.value = withTiming(activeIndex, { duration: durationMs, easing: Easing.out(Easing.cubic) });  }, [activeIndex, found, reduce, type, durationMs, damping, stiffness, mass, position]);  const tileStyle = useAnimatedStyle(() => {    const list = measured.value;    const last = list.length - 1;    // A spring overshoots past the ends; keep the tile inside the pill.    const at = Math.min(Math.max(position.value, 0), Math.max(last, 0));    const from = Math.floor(at);    const a = list[from];    const b = list[Math.min(from + 1, last)] ?? a;    if (!found || !a || !b) return { opacity: 0, width: 0, transform: [{ translateX: 0 }] };    const x = a.x + (b.x - a.x) * (at - from);    const width = a.w + (b.w - a.w) * (at - from);    return {      opacity: 1,      width,      // x is measured from the left. In RTL the tile starts at the right edge (rows flip, transforms don't).      transform: [{ translateX: rtl ? -(rowWidth.value - x - width) : x }],    };  });  const onItemLayout = (index: number) => (event: LayoutChangeEvent) => {    const { x, width } = event.nativeEvent.layout;    boxes.current[index] = { x, w: width };    measured.value = boxes.current.slice(0, items.length);  };  const onRowLayout = (event: LayoutChangeEvent) => {    rowWidth.value = event.nativeEvent.layout.width;  };  return { tileStyle, onItemLayout, onRowLayout };}

6
Update the import paths to match your project, then use it as shown below.

Props

Everything from the shared tab bar contract (items, activeKey, onChange, onLongPress, className and classNames (NativeWind) or styles (StyleSheet), style, renderItem, animation, reducedMotion, safeArea, insets, testID), plus:

Prop	Type	Default	What it does
`action`	`GlassPillAction`	none	The round button: `{ label, icon, onPress, testID? }`. `label` is for screen readers.
`showLabels`	`boolean`	`true`	Show each label under its icon. Screen readers read labels either way.
`iconSize`	`number`	`24`	Size passed to every tab's `icon` function. The action's icon is 4 points bigger.
`glassStyle`	`'regular' \| 'clear'`	`'regular'`	Liquid Glass style on iOS 26+. `clear` shows more of what's behind.
`blurIntensity`	`number`	`60`	Blur strength, 1 to 100, where there is no Liquid Glass.
`blurTarget`	`RefObject<View \| null>`	none	Android: a ref to the `BlurTargetView` around your screens. Without it, no blur.
`colors`	`GlassPillTabBarColors`	`tokens.glass`	Colors for this bar. See Colors.

The haptics prop is accepted but does nothing yet; it starts working when the shared haptics adapter lands.

Colors

The colors prop sets any part for one bar, in both styling versions. Anything you leave out comes from tokens.glass, so it still follows light and dark mode.

Key	Part	Default
`active`	Active icon and label	`tokens.glass.*.active`
`inactive`	Other icons and labels	`inactive`
`tile`	The tile behind the active tab	`tile`
`action`	The action's icon	`action`
`glassTint`	Tints real Liquid Glass (iOS 26+)	none
`fill`	The layer over the blur (no Liquid Glass)	`fill`, or `fillNoBlur` when nothing blurs
`border`	The hairline around the blur (no Liquid Glass)	`border`
`badge`, `badgeText`	Badges	`badge`, `badgeText` tokens

Use any icon set

An item's icon is a function that gets { focused, color, size }, so any library fits. Pass the color and size on:

// Phosphor: per-icon imports keep the bundle small
import { HouseIcon } from 'phosphor-react-native/src/icons/House';
{ key: 'home', label: 'Home', icon: ({ focused, color, size }) => (
  <HouseIcon color={color} size={size} weight={focused ? 'fill' : 'regular'} />
) }

// Lucide (lucide-react-native)
import { House } from 'lucide-react-native';
{ key: 'home', label: 'Home', icon: ({ color, size }) => <House color={color} size={size} /> }

// Hugeicons (@hugeicons/react-native + @hugeicons/core-free-icons)
import { HugeiconsIcon } from '@hugeicons/react-native';
import { Home01Icon } from '@hugeicons/core-free-icons';
{ key: 'home', label: 'Home', icon: ({ color, size }) => (
  <HugeiconsIcon icon={Home01Icon} color={color} size={size} />
) }

An image, an emoji or your own SVG works the same way: return any element. Through the navigator adapter, tabs takes icon components with color and size props (Phosphor, Lucide); for Hugeicons, use a screen's tabBarIcon option with the function form above.

Customization

In order of power:

Tokens. tokens.glass holds the translucent colors per mode; glassAction (64 px) sets the action's size, and tab padding is glassItemV, in core/tokens.ts.
Classes per part with classNames. Your classes are merged last, so they win:
```
<GlassPillTabBar {...props} classNames={{ container: 'px-sk-bar-x', label: 'font-semibold' }} />
```
Slots: container, bar (the pill), item, itemActive, icon, label, labelActive, indicator (the tile), action, badge, badgeText. StyleSheet version: the same slots take style objects through styles.
renderItem to draw each tab yourself. The tile still follows it.

animation for the tile:

<GlassPillTabBar {...props} animation={{ type: 'timing', durationMs: 180 }} />  // no bounce
<GlassPillTabBar {...props} animation={{ spring: { damping: 12 } }} />          // more bounce

How it works

glass-surface.tsx picks the material once: GlassView from expo-glass-effect when Liquid Glass is available, otherwise BlurView from expo-blur under a translucent fill and a hairline. The active tab's index lives in a Reanimated shared value; on the UI thread, a worklet places the tile from the measured tabs, so a tap mid-spring starts from where it is. React only re-renders when the active tab changes.

Don't fade the bar or a parent to opacity 0: Liquid Glass stops rendering until it's visible again.

Accessibility

The pill is a tablist; each tab is a tab with selected and disabled state.
Labels are read even when hidden. Badges are part of the label: "Library, new", "Inbox, 3".
The action is a separate button, read with its label, and it isn't one of the tabs.
Tabs are at least 44pt tall and the action is 64pt.
On iOS, Liquid Glass follows the system's Reduce Transparency setting by itself.
With Reduce Motion on (iOS) or Remove animations (Android), the tile jumps. Force it with reducedMotion="always" or "never".
RTL: the tabs, the tile and the action mirror automatically.

Platform support

Platform	Support
iOS	iOS 26+: real Liquid Glass. Older iOS: blur fallback
Android	Blur with a blurTarget; a nearly solid fill without one
Web	Approximation: a backdrop-filter blur, not Liquid Glass
Expo Go	Yes
Minimum Expo SDK	57
License	skiddie Free

Works in Expo Go: both expo-glass-effect and expo-blur are included.

Real blur on Android. Android can only blur what's inside a BlurTargetView. Wrap your screens in one and pass its ref to the bar. The bar must sit outside the target:

import { BlurTargetView } from 'expo-blur';

const target = useRef<View>(null);

<BlurTargetView ref={target} style={{ flex: 1 }}>{/* your screens */}</BlurTargetView>
<GlassPillTabBar {...props} blurTarget={target} />