npx skiddie@latest add text-tab-bar

Text Tab Bar

Docked, words-only bar in your display font; an underline slides to the active label.

Bottom Tabs

Dependencies

nativewindreact-native-reanimatedreact-native-workletsreact-native-safe-area-contexttailwindcssclsxtailwind-merge

Platforms

iOSAndroidWeb

A docked bar with no icons: just capitalized words in a font with character, spread across a hairline. The active word takes the accent color and an underline slides under it, stretching to its width. Use it when your brand's type does the talking, with short labels and up to five tabs.

Installation

Add the component

npx skiddie@latest add text-tab-bar

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

Add a font (optional)

The bar uses the system font until you give it one. The clip above uses Boldonse from Google Fonts:

npx expo install expo-font @expo-google-fonts/boldonse

import { Boldonse_400Regular } from '@expo-google-fonts/boldonse/400Regular';
import { useFonts } from 'expo-font';

const [loaded] = useFonts({ Boldonse_400Regular });

<TextTabBar
  {...props}
  fontFamily={loaded ? 'Boldonse_400Regular' : undefined}
  fontSize={10}
  lineHeight={24}
/>

Tall fonts like Boldonse clip at the default line height, so raise lineHeight.

Plug it in

src/app/_layout.tsx

import { DarkTheme, DefaultTheme, Tabs, ThemeProvider } from 'expo-router';import { useColorScheme } from 'react-native';import { TextTabBar } from '@/components/skiddie/text-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(TextTabBar, {  floating: false,  tabs: {    index: { label: 'Home' },    explore: { label: 'Explore' },  },});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 is docked, so the examples pass floating: false: your screens end above the bar and need no extra bottom padding.

Set any prop once, in the adapter. Screen options (title, tabBarBadge) win over tabs:

const TabBar = createTabBarAdapter(TextTabBar, {
  floating: false,
  fontFamily: 'Boldonse_400Regular',
  fontSize: 10,
  lineHeight: 24,
  colors: { active: '#A81612', inactive: '#451400' },
  tabs: { index: { label: 'Home' }, menu: { label: 'Menu' } },
});

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

types.ts

use-text-tabs.ts

tailwind.config.js

File	What it does
text-tab-bar/index.tsx	The component
text-tab-bar/styles.ts	Default classes per slot
text-tab-bar/types.ts	Props, with docs
text-tab-bar/use-text-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 nativewind react-native-reanimated react-native-worklets react-native-safe-area-context tailwindcss@^3.4 clsx tailwind-merge@^2

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/text-tab-bar/:

components/skiddie/text-tab-bar/index.tsx

import { cn } from '../core/cn';import { tokens } from '../core/tokens';import type { TabItem } from '../core/types';import { useColorScheme } from 'nativewind';import { memo } from 'react';import { Pressable, Text, type TextStyle, View } from 'react-native';import Animated, { type SharedValue } from 'react-native-reanimated';import { useSafeAreaInsets } from 'react-native-safe-area-context';import { styles } from './styles';import type { TextTabBarProps } from './types';import { useTabFade, useTextTabs } from './use-text-tabs';/** Docked, words-only bar in your display font; an underline slides to the active label. NativeWind version. */export const TextTabBar = memo(function TextTabBar({  items,  activeKey,  onChange,  onLongPress,  className,  classNames,  style,  renderItem,  animation,  reducedMotion,  fontFamily,  fontSize,  lineHeight,  uppercase = true,  iconSize = 22,  colors,  safeArea = true,  insets,  testID,}: TextTabBarProps) {  const safe = useSafeAreaInsets();  const bottom = safeArea ? (insets ?? safe).bottom : 0;  const { position, indicatorStyle, onItemLayout, onBarLayout } = useTextTabs({    items,    activeKey,    animation,    reducedMotion,  });  // A custom font carries its own weight; asking for bold on top of it falls back to the system font on Android.  const font: TextStyle = {    ...(fontFamily ? { fontFamily, fontWeight: 'normal' } : null),    ...(fontSize ? { fontSize } : null),    ...(lineHeight ? { lineHeight } : null),    ...(uppercase ? null : { textTransform: 'none' }),  };  return (    <View      role="tablist"      testID={testID}      className={cn(styles.container, classNames?.container, className)}      style={[        { paddingBottom: bottom },        colors?.background ? { backgroundColor: colors.background } : undefined,        colors?.border ? { borderTopColor: colors.border } : undefined,        style,      ]}    >      <View onLayout={onBarLayout} className={cn(styles.bar, classNames?.bar)}>        {items.map((item, index) => {          const focused = item.key === activeKey;          const onPress = () => onChange(item.key);          if (renderItem)            return (              <View key={item.key} onLayout={onItemLayout(index)}>                {renderItem({ item, focused, index, onPress })}              </View>            );          return (            <Tab              key={item.key}              item={item}              index={index}              focused={focused}              position={position}              onPress={onPress}              onLongPress={onLongPress ? () => onLongPress(item.key) : undefined}              onLayout={onItemLayout(index)}              font={font}              iconSize={iconSize}              colors={colors}              classNames={classNames}            />          );        })}        <View pointerEvents="none" className={styles.track}>          {/* Plain Views for the classes (NativeWind styles core components); Animated.Views get only the motion. */}          <Animated.View style={indicatorStyle}>            <View              style={                (colors?.indicator ?? colors?.active)                  ? { backgroundColor: colors?.indicator ?? colors?.active }                  : undefined              }              className={cn(styles.indicator, classNames?.indicator)}            />          </Animated.View>        </View>      </View>    </View>  );});/** One tab: its plain copy, and the active copy laid over it, crossfading as the active tab changes. */function Tab({  item,  index,  focused,  position,  onPress,  onLongPress,  onLayout,  font,  iconSize,  colors,  classNames,}: {  item: TabItem;  index: number;  focused: boolean;  position: SharedValue<number>;  onPress: () => void;  onLongPress?: () => void;  onLayout: React.ComponentProps<typeof Pressable>['onLayout'];  font: TextStyle;  iconSize: number;  colors: TextTabBarProps['colors'];  classNames: TextTabBarProps['classNames'];}) {  // Icon colors are needed in JS, so they come from tokens. NativeWind's hook follows the system appearance and  // apps that switch dark mode by hand.  const { colorScheme } = useColorScheme();  const palette = tokens.colors[colorScheme === 'dark' ? 'dark' : 'light'];  const { activeStyle, inactiveStyle } = useTabFade(position, index);  const hasBadge = item.badge !== undefined && item.badge !== false;  const spoken = item.badge === true ? 'new' : item.badge;  const label = item.accessibilityLabel ?? item.label;  const copy = (active: boolean) => (    <View className={styles.content}>      {item.icon && (        <View className={cn(styles.icon, classNames?.icon)}>          {item.icon({            focused: active,            color: active ? (colors?.active ?? palette.accent) : (colors?.inactive ?? palette.inactive),            size: iconSize,          })}        </View>      )}      <Text        numberOfLines={1}        style={[          font,          (active ? colors?.active : colors?.inactive)            ? { color: active ? colors?.active : colors?.inactive }            : undefined,        ]}        className={cn(styles.label, classNames?.label, active && cn(styles.labelActive, classNames?.labelActive))}      >        {item.label}      </Text>    </View>  );  return (    <Pressable      role="tab"      accessibilityState={{ selected: focused, disabled: item.disabled }}      accessibilityLabel={hasBadge ? `${label}, ${spoken}` : label}      disabled={item.disabled}      onPress={onPress}      onLongPress={onLongPress}      onLayout={onLayout}      hitSlop={tokens.hitSlop}      testID={item.testID}      className={cn(        styles.item,        classNames?.item,        focused && cn(styles.itemActive, classNames?.itemActive),        item.disabled && 'cursor-auto opacity-40',      )}    >      <View>        <Animated.View style={inactiveStyle}>{copy(false)}</Animated.View>        <View pointerEvents="none" className={styles.overlay}>          <Animated.View style={activeStyle}>{copy(true)}</Animated.View>        </View>        {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>    </Pressable>  );}export default TextTabBar;

components/skiddie/text-tab-bar/styles.ts

/** Default classes per slot, from sk-* token classes. Users override any slot with `classNames`. */export const styles = {  // Docked edge to edge, with a hairline on top; the safe-area bottom padding is added in index.tsx.  container: 'border-t border-sk-border bg-sk-background',  // Tabs are as wide as their labels and spread out, so long and short words sit evenly.  bar: 'flex-row items-end justify-between px-sk-inset py-sk-bar-y',  // Labels sit at the bottom of the tab, with room below them for the underline.  item: 'min-h-sk-touch cursor-pointer items-center justify-end pb-sk-text-pad',  itemActive: '',  // One copy of a tab's icon and label; two are stacked to crossfade (see index.tsx).  content: 'items-center gap-sk-gap',  // The active copy, laid over the plain one.  overlay: 'absolute inset-0',  icon: 'items-center justify-center',  label: 'text-sk-text-tab font-bold uppercase text-sk-inactive',  labelActive: 'text-sk-accent',  // The underline's layer, along the bar's bottom padding; its x and width come from use-text-tabs.ts.  track: 'absolute inset-x-0 bottom-sk-bar-y flex-row',  indicator: 'h-sk-text-underline bg-sk-accent',  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/text-tab-bar/types.ts

import type { BaseTabBarProps, BaseTabBarStyleProps } from '../core/types';/** Colors you can set per bar. Anything left out comes from the tokens, and follows light and dark mode. */export interface TextTabBarColors {  /** The bar behind the tabs. */  background?: string;  /** The active label and icon. */  active?: string;  /** The other labels and icons. */  inactive?: string;  /** The sliding underline. Defaults to `active`. */  indicator?: string;  /** The line on top of the bar. */  border?: string;  badge?: string;  badgeText?: string;}interface TextTabBarOptions {  /**   * The labels' font, already loaded by your app (with `expo-font`). Default: the system font, bold. The component   * loads no font itself, so it never fails on one you haven't added.   */  fontFamily?: string;  /** Label size in points. Lower it for wide fonts or long labels. Default `14`. */  fontSize?: number;  /** Label line height in points. Raise it for fonts with tall ascenders, which clip otherwise. Default `20`. */  lineHeight?: number;  /** Show labels in capitals. Screen readers read them normally. Default `true`. */  uppercase?: boolean;  /** Icon size in points, for items that have an `icon`. Default `22`. */  iconSize?: number;  /** Colors for this bar, over the tokens. */  colors?: TextTabBarColors;}/** NativeWind version (`index.tsx`): style with `className` / `classNames`. */export interface TextTabBarProps extends BaseTabBarProps, TextTabBarOptions {}/** StyleSheet version (`stylesheet/index.tsx`): style with `styles`. */export interface TextTabBarStyleProps extends BaseTabBarStyleProps, TextTabBarOptions {}

components/skiddie/text-tab-bar/use-text-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,  interpolate,  type SharedValue,  useAnimatedStyle,  useReducedMotion,  useSharedValue,  withSpring,  withTiming,} from 'react-native-reanimated';type Options = Pick<TabBarBehaviorProps, 'items' | 'activeKey' | 'animation' | 'reducedMotion'>;type Box = { x: number; w: number };/** * The underline's motion, shared by both versions of the bar. * * Labels have different widths, so each tab reports its x and width. A shared value holds the active *index*; the * worklet blends the two boxes it sits between, so the underline stretches as it slides, and a tap mid-animation * starts from where it is. Each tab also reads the value to crossfade its colors (`useTabFade`). */export function useTextTabs({ 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 barWidth = useSharedValue(0);  // -1 when no tab is active: every tab is a full step away, so none is lit.  const position = useSharedValue(found ? activeIndex : -1);  // Ease-out by default: fast start, gentle stop, no overshoot. `animation={{ type: 'spring' }}` for a bounce.  const type = animation?.type ?? 'timing';  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(() => {    const target = found ? activeIndex : -1;    if (reduce || !found) position.value = target;    else if (type === 'spring') position.value = withSpring(target, { damping, stiffness, mass });    else position.value = withTiming(target, { duration: durationMs, easing: Easing.out(Easing.cubic) });  }, [activeIndex, found, reduce, type, durationMs, damping, stiffness, mass, position]);  const indicatorStyle = useAnimatedStyle(() => {    const list = measured.value;    const from = Math.floor(position.value);    const to = Math.min(from + 1, list.length - 1);    const a = list[from];    const b = list[to] ?? a;    if (!a || !b) return { opacity: 0, width: 0, transform: [{ translateX: 0 }] };    const t = position.value - from;    const x = a.x + (b.x - a.x) * t;    const width = a.w + (b.w - a.w) * t;    return {      opacity: 1,      width,      // x is measured from the left. In RTL the underline starts at the right edge (rows flip, transforms don't).      transform: [{ translateX: rtl ? -(barWidth.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 onBarLayout = (event: LayoutChangeEvent) => {    barWidth.value = event.nativeEvent.layout.width;  };  return { position, indicatorStyle, onItemLayout, onBarLayout };}/** One tab's crossfade: the active copy is shown when `position` is on this tab and gone one tab away. */export function useTabFade(position: SharedValue<number>, index: number) {  const activeStyle = useAnimatedStyle(() => ({    opacity: interpolate(Math.abs(position.value - index), [0, 1], [1, 0], 'clamp'),  }));  const inactiveStyle = useAnimatedStyle(() => ({    opacity: interpolate(Math.abs(position.value - index), [0, 1], [0, 1], 'clamp'),  }));  return { activeStyle, inactiveStyle };}

5
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
`fontFamily`	`string`	system font, bold	The labels' font, already loaded by your app.
`fontSize`	`number`	`14`	Label size. Lower it for wide fonts or long labels.
`lineHeight`	`number`	`20`	Label line height. Raise it for fonts with tall ascenders.
`uppercase`	`boolean`	`true`	Show labels in capitals. Screen readers read them as written.
`iconSize`	`number`	`22`	Size passed to an item's `icon` function, for items that have one.
`colors`	`TextTabBarColors`	tokens	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 the tokens, so it still follows light and dark mode. Colors you set apply to both modes, so pick them from the color scheme if they need to differ.

Key	Part	Default token
`background`	The bar	`background`
`active`	Active word and icon	`accent`
`inactive`	Other words and icons	`inactive`
`indicator`	The underline	`active` key, else `accent`
`border`	The hairline on top	`border`
`badge`, `badgeText`	Badges	`badge`, `badgeText`

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. Label type is typography.textTab, the underline textTabUnderline (2 px), in core/tokens.ts.
Classes per part with classNames. Your classes are merged last, so they win:
```
<TextTabBar {...props} classNames={{ container: 'border-t-0', bar: 'justify-around', indicator: 'rounded-sk-indicator' }} />
```
Slots: container, bar, item, itemActive, icon, label, labelActive, indicator, badge, badgeText. StyleSheet version: the same slots take style objects through styles.
renderItem to draw each tab yourself. The underline still follows it.

animation for the slide:

<TextTabBar {...props} animation={{ durationMs: 140 }} />  // snappier
<TextTabBar {...props} animation={{ type: 'spring' }} />   // a little bounce

How it works

Tabs are as wide as their words and spread out evenly. Each reports its x and width, and the active tab's index lives in a Reanimated shared value. On the UI thread, a worklet blends the two tabs it sits between to place the underline, and every tab sets the opacity of two stacked copies of its content, so the color passes from the old word to the new one. React only re-renders when the active tab changes.

Accessibility

The bar is a tablist; each tab is a tab with selected and disabled state.
Labels are read as written, even when shown in capitals.
Badges are part of the label: a count reads "Rewards, 2", a dot reads "Inbox, new".
Tabs are at least 44pt tall, with 8pt of extra touch area around each word. Words get their width from the text, so keep labels long enough to tap, or widen them with classNames.item.
With Reduce Motion on (iOS) or Remove animations (Android), colors and the underline change without animating. Force it with reducedMotion="always" or "never".
RTL: the words and the underline mirror automatically.

Platform support

Platform	Support
iOS	Yes
Android	Yes
Web	Yes
Expo Go	Yes
Minimum Expo SDK	57
License	skiddie Free

Works in Expo Go: it only needs Reanimated and safe-area-context, which Expo Go includes, and expo-font if you add a font.