npx skiddie@latest add scrollable-top-tabs

Scrollable Top Tabs

Many categories that auto-center the active tab, with an underline indicator.

Top Tabs

Dependencies

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

Platforms

iOSAndroidWeb

A plain row of text tabs on a hairline, with a thin underline under the active one. There are more tabs than fit, so the row scrolls sideways and centers the tab you tap. Tap and the underline eases over, stretching to the new tab's width. Use it for people, feed or catalog sections, under a screen's header.

Installation

Add the component

npx skiddie@latest add scrollable-top-tabs

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

Use it in a screen

src/app/index.tsx

import { useState } from 'react';import { View } from 'react-native';import { ScrollableTopTabs } from '@/components/skiddie/scrollable-top-tabs';const items = [  { key: 'all', label: 'All' },  { key: 'music', label: 'Music' },  { key: 'podcasts', label: 'Podcasts' },  { key: 'audiobooks', label: 'Audiobooks' },  { key: 'live', label: 'Live' },];export default function Screen() {  const [tab, setTab] = useState('all');  return (    <View style={{ flex: 1 }}>      <ScrollableTopTabs items={items} activeKey={tab} onChange={setTab} />      {/* the content for `tab` */}    </View>  );}

Any screen works: it's a regular component with its own state. No src/ folder? Drop src/ from the path.

Items are the tabs, and each can carry an icon and a badge. Colors and sizes are props:

<ScrollableTopTabs
  items={items}
  activeKey={tab}
  onChange={setTab}
  tabWidth={96}
  colors={{ active: '#7C3AED', indicator: '#7C3AED', inactive: '#71717A' }}
/>

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-underline-tabs.ts

tailwind.config.js

File	What it does
scrollable-top-tabs/index.tsx	The component
scrollable-top-tabs/styles.ts	Default classes per slot
scrollable-top-tabs/types.ts	Props, with docs
scrollable-top-tabs/use-underline-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/scrollable-top-tabs/:

components/skiddie/scrollable-top-tabs/index.tsx

import { cn } from '../core/cn';import { tokens } from '../core/tokens';import { useColorScheme } from 'nativewind';import { memo } from 'react';import { Pressable, ScrollView, Text, View } from 'react-native';import Animated from 'react-native-reanimated';import { useSafeAreaInsets } from 'react-native-safe-area-context';import { styles } from './styles';import type { ScrollableTopTabsProps } from './types';import { useUnderlineTabs } from './use-underline-tabs';/** Text tabs in a row that scrolls and centers the active one, with an underline that slides under it. NativeWind version. */export const ScrollableTopTabs = memo(function ScrollableTopTabs({  items,  activeKey,  onChange,  onLongPress,  className,  classNames,  style,  renderItem,  animation,  reducedMotion,  scrollable = true,  tabWidth,  iconSize = 18,  colors,  safeArea = true,  insets,  testID,}: ScrollableTopTabsProps) {  const safe = useSafeAreaInsets();  // 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 top = safeArea ? (insets ?? safe).top : 0;  const { indicatorStyle, onItemLayout, onViewportLayout, onContentSizeChange, scrollRef } = useUnderlineTabs({    items,    activeKey,    animation,    reducedMotion,  });  return (    <View      role="tablist"      testID={testID}      className={cn(styles.container, classNames?.container, className)}      style={[        { paddingTop: top },        colors?.background ? { backgroundColor: colors.background } : undefined,        colors?.border ? { borderBottomColor: colors.border } : undefined,        style,      ]}    >      <View className={cn(styles.bar, classNames?.bar)}>        <ScrollView          ref={scrollRef}          horizontal          scrollEnabled={scrollable}          showsHorizontalScrollIndicator={false}          onLayout={onViewportLayout}          onContentSizeChange={onContentSizeChange}          contentContainerClassName="grow flex-row"        >          {items.map((item, index) => {            const focused = item.key === activeKey;            const onPress = () => onChange(item.key);            const width = scrollable && tabWidth !== undefined ? { minWidth: tabWidth } : undefined;            if (renderItem)              return (                <View key={item.key} onLayout={onItemLayout(index)} className={cn(!scrollable && '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 ?? palette.active) : (colors?.inactive ?? palette.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}                style={width}                className={cn(                  styles.item,                  !scrollable && 'min-w-0 flex-1',                  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 })}                  </View>                )}                <Text                  numberOfLines={1}                  style={(focused ? colors?.active : colors?.inactive) ? { color } : undefined}                  className={cn(                    styles.label,                    classNames?.label,                    focused && cn(styles.labelActive, classNames?.labelActive),                  )}                >                  {item.label}                </Text>                {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>                )}              </Pressable>            );          })}          {/* Drawn last so it sits over the tabs; it takes no touches. */}          <View pointerEvents="none" className="absolute inset-x-0 bottom-0 flex-row">            <Animated.View style={indicatorStyle}>              <View                style={colors?.indicator ? { backgroundColor: colors.indicator } : undefined}                className={cn(styles.indicator, classNames?.indicator)}              />            </Animated.View>          </View>        </ScrollView>      </View>    </View>  );});export default ScrollableTopTabs;

components/skiddie/scrollable-top-tabs/styles.ts

/** Default classes per slot, from sk-* token classes. Users override any slot with `classNames`. */export const styles = {  // Edge to edge, with a hairline under the row; the top safe area is added in index.tsx when `safeArea` is on.  container: 'border-b border-sk-border bg-sk-background',  bar: '',  item: 'min-h-sk-touch min-w-sk-top-tab cursor-pointer flex-row items-center justify-center gap-sk-gap px-sk-pill-x',  itemActive: '',  icon: 'items-center justify-center',  label: 'text-sk-tab font-medium text-sk-inactive',  labelActive: 'text-sk-active',  // The underline: its x and width come from the measured tab, in use-underline-tabs.ts.  indicator: 'h-sk-top-underline bg-sk-active',  badge: '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/scrollable-top-tabs/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 ScrollableTopTabsColors {  /** The bar behind the tabs. */  background?: string;  /** The active label and icon. */  active?: string;  /** The other labels and icons. */  inactive?: string;  /** The sliding underline. */  indicator?: string;  /** The line under the whole row. */  border?: string;  badge?: string;  badgeText?: string;}interface ScrollableTopTabsOptions {  /**   * Let the row scroll sideways, keeping the active tab centered. Default `true`. With `false`, the tabs share the   * width equally and the row doesn't scroll: use it for two to four tabs.   */  scrollable?: boolean;  /** Each tab's minimum width while `scrollable`; a longer label makes its tab wider. Default `120`. */  tabWidth?: number;  /** Icon size in points, for items that have an `icon`. Default `18`. */  iconSize?: number;  /** Colors for this bar, over the tokens. */  colors?: ScrollableTopTabsColors;}/** NativeWind version (`index.tsx`): style with `className` / `classNames`. */export interface ScrollableTopTabsProps extends BaseTabBarProps, ScrollableTopTabsOptions {}/** StyleSheet version (`stylesheet/index.tsx`): style with `styles`. */export interface ScrollableTopTabsStyleProps extends BaseTabBarStyleProps, ScrollableTopTabsOptions {}

components/skiddie/scrollable-top-tabs/use-underline-tabs.ts

import { tokens } from '../core/tokens';import type { TabBarBehaviorProps } from '../core/types';import { useEffect, useRef } from 'react';import { I18nManager, type LayoutChangeEvent, type ScrollView } 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 underline's motion and the row's scrolling, shared by both versions of the bar. * * Tabs have different widths, so each one reports its own 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, a tap mid-animation starts * from where the underline is, and re-measuring (rotation, font scale) moves it without animating. When the row * overflows, the active tab is scrolled to the middle of the viewport. */export function useUnderlineTabs({ 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 contentWidth = useSharedValue(0);  const position = useSharedValue(Math.max(activeIndex, 0));  const scrollRef = useRef<ScrollView>(null);  const viewport = useRef(0);  const content = useRef(0);  // 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;  /** Scroll so the tab is centered, clamped to the row's ends. A no-op when everything fits. */  const center = (index: number, animated: boolean) => {    const box = boxes.current[index];    const max = content.current - viewport.current;    if (!box || viewport.current === 0 || max <= 0) return;    const x = Math.min(Math.max(box.x + box.w / 2 - viewport.current / 2, 0), max);    scrollRef.current?.scrollTo({ x, animated });  };  // biome-ignore lint/correctness/useExhaustiveDependencies: `center` reads refs only, so it isn't a dependency.  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) });    center(activeIndex, !reduce);  }, [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 (!found || !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), so      // move it left by the gap between its right side and the row's.      transform: [{ translateX: rtl ? -(contentWidth.value - x - width) : x }],    };  });  const onItemLayout = (index: number) => (event: LayoutChangeEvent) => {    const { x, width } = event.nativeEvent.layout;    const first = !boxes.current[index];    boxes.current[index] = { x, w: width };    measured.value = boxes.current.slice(0, items.length);    // The first time the active tab is measured, jump the row to it (it may start off screen).    if (first && index === activeIndex) center(index, false);  };  const onViewportLayout = (event: LayoutChangeEvent) => {    viewport.current = event.nativeEvent.layout.width;    if (found) center(activeIndex, false);  };  const onContentSizeChange = (width: number) => {    content.current = width;    contentWidth.value = width;    if (found) center(activeIndex, false);  };  return { indicatorStyle, onItemLayout, onViewportLayout, onContentSizeChange, scrollRef };}

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
`scrollable`	`boolean`	`true`	Scroll sideways and center the active tab. `false`: the tabs share the width, for two to four tabs.
`tabWidth`	`number`	`120`	Each tab's minimum width while `scrollable`. A longer label makes its tab wider.
`iconSize`	`number`	`18`	Size passed to every `icon` function.
`colors`	`ScrollableTopTabsColors`	tokens	Colors for this bar. See Colors.
`safeArea`	`boolean`	`true`	Pad for the top safe area, so the tabs clear the status bar. Turn it off when the bar sits under a header.

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.

Key	Part	Default token
`background`	The bar	`background`
`active`	Active label and icon	`active`
`inactive`	Other labels and icons	`inactive`
`indicator`	The underline	`active`
`border`	The hairline under the row	`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. The underline is topTabUnderline (1.5 px) and each tab at least topTabWidth (120 px), in core/tokens.ts. Change them there and every instance follows.
Classes per part with classNames. Your classes are merged last, so they win:
```
<ScrollableTopTabs {...props} classNames={{ container: 'border-b-0', labelActive: 'font-semibold' }} />
```
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:

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

How it works

Each tab reports its x and width. 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, so it stretches as it moves and a tap mid-slide starts from where it is. React only re-renders when the active tab changes. The row's scroll is a regular scrollTo, clamped to its ends.

Accessibility

The bar is a tablist; each tab is a tab with selected and disabled state.
Badges are part of the label: a count reads "Requests, 2", a dot reads "Inbox, new".
Tabs are at least 44pt tall, and labels follow the system font scale.
With Reduce Motion on (iOS) or Remove animations (Android), the underline and the row jump. Force it with reducedMotion="always" or "never".
RTL: the row 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.