npx skiddie@latest add divider-tab-bar

Divider Tab Bar

Docked icon bar with thin dividers between tabs; the active icon fades to the accent color.

40Bottom TabsNew

Dependencies

nativewindreact-native-reanimatedreact-native-workletsreact-native-safe-area-contexttailwindcssclsxtailwind-mergephosphor-react-nativereact-native-svg

Platforms

iOSAndroidWeb

A classic docked bar: edge to edge, square corners, a hairline on top. Thin vertical lines split the tabs, and the active icon is drawn in a warm accent color instead of getting an underline or a tile. Tap a tab and its icon fades to the accent while the old one fades back. Icon-only by default, so it suits tool bars and apps with four or five well-known sections.

Installation

Add the component

npx skiddie@latest add divider-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 { DividerTabBar } from '@/components/skiddie/divider-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(DividerTabBar, {  floating: false,  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 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, tabBarIcon, tabBarBadge) win over tabs:

const TabBar = createTabBarAdapter(DividerTabBar, {
  floating: false,
  showLabels: true,
  showDividers: false,
  tabs: { index: { label: 'Home', icon: HouseIcon } },
});

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

tailwind.config.js

File	What it does
divider-tab-bar/index.tsx	The component
divider-tab-bar/styles.ts	Default classes per slot
divider-tab-bar/types.ts	Props, with docs
divider-tab-bar/use-divider-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

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,  },  // 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,  },  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 },  },  // 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`,      },      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-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',      ],      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'] },      ],      '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/divider-tab-bar/:

components/skiddie/divider-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 { Fragment, memo } from 'react';import { Pressable, Text, 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 { DividerTabBarProps } from './types';import { useDividerTabs, useTabFade } from './use-divider-tabs';/** Docked icon bar with thin dividers between tabs; the active icon fades to the accent color. NativeWind version. */export const DividerTabBar = memo(function DividerTabBar({  items,  activeKey,  onChange,  onLongPress,  className,  classNames,  style,  renderItem,  animation,  reducedMotion,  showLabels = false,  showDividers = true,  iconSize = 24,  safeArea = true,  insets,  testID,}: DividerTabBarProps) {  const safe = useSafeAreaInsets();  const bottom = safeArea ? (insets ?? safe).bottom : 0;  const position = useDividerTabs({ items, activeKey, animation, reducedMotion });  return (    <View      role="tablist"      testID={testID}      className={cn(styles.container, classNames?.container, className)}      style={[{ paddingBottom: bottom }, style]}    >      <View className={cn(styles.bar, classNames?.bar)}>        {items.map((item, index) => {          const focused = item.key === activeKey;          const onPress = () => onChange(item.key);          return (            <Fragment key={item.key}>              {showDividers && index > 0 && <View className={cn(styles.divider, classNames?.divider)} />}              {renderItem ? (                renderItem({ item, focused, index, onPress })              ) : (                <Tab                  item={item}                  index={index}                  focused={focused}                  position={position}                  onPress={onPress}                  onLongPress={onLongPress ? () => onLongPress(item.key) : undefined}                  showLabels={showLabels}                  iconSize={iconSize}                  classNames={classNames}                />              )}            </Fragment>          );        })}      </View>    </View>  );});/** One tab: the plain icon, and the accent icon laid over it, crossfading as the active tab changes. */function Tab({  item,  index,  focused,  position,  onPress,  onLongPress,  showLabels,  iconSize,  classNames,}: {  item: TabItem;  index: number;  focused: boolean;  position: SharedValue<number>;  onPress: () => void;  onLongPress?: () => void;  showLabels: boolean;  iconSize: number;  classNames: DividerTabBarProps['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 colors = 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;  return (    <Pressable      role="tab"      accessibilityState={{ selected: focused, disabled: item.disabled }}      accessibilityLabel={hasBadge ? `${label}, ${spoken}` : label}      disabled={item.disabled}      onPress={onPress}      onLongPress={onLongPress}      testID={item.testID}      className={cn(        styles.item,        classNames?.item,        focused && cn(styles.itemActive, classNames?.itemActive),        item.disabled && 'opacity-40',      )}    >      {item.icon && (        <View className={cn(styles.icon, classNames?.icon)}>          {/* Plain Views for the classes (NativeWind styles core components); Animated.Views get only the fade. */}          <Animated.View style={inactiveStyle}>            {item.icon({ focused: false, color: colors.inactive, size: iconSize })}          </Animated.View>          <View pointerEvents="none" className={cn(styles.indicator, classNames?.indicator)}>            <Animated.View style={activeStyle}>              {item.icon({ focused: true, color: colors.accent, size: iconSize })}            </Animated.View>          </View>          {hasBadge && (            <View className={cn(styles.badge, item.badge === true && 'size-sk-dot min-w-0 px-0', classNames?.badge)}>              {item.badge !== true && <Text className={cn(styles.badgeText, classNames?.badgeText)}>{item.badge}</Text>}            </View>          )}        </View>      )}      {(showLabels || !item.icon) && (        <Text          numberOfLines={1}          className={cn(styles.label, classNames?.label, focused && cn(styles.labelActive, classNames?.labelActive))}        >          {item.label}        </Text>      )}    </Pressable>  );}export default DividerTabBar;

components/skiddie/divider-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, square corners, a hairline on top; the safe-area bottom padding is added in index.tsx.  container: 'border-t border-sk-border bg-sk-background',  bar: 'flex-row items-center py-sk-bar-y',  item: 'min-h-sk-touch flex-1 cursor-pointer items-center justify-center gap-sk-gap py-sk-item-y',  itemActive: '',  // The plain icon sets the size; the accent icon is laid over it (see index.tsx).  icon: 'items-center justify-center',  label: 'text-sk-label text-sk-inactive',  labelActive: 'text-sk-accent',  // Not a moving part here: the accent color is the indicator, so this slot is the accent icon's layer.  indicator: 'absolute inset-0 items-center justify-center',  divider: 'h-sk-divider-h w-sk-divider-w rounded-sk-indicator bg-sk-border',  badge: 'absolute -end-sk-badge-x -top-sk-badge-y min-w-sk-badge 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/divider-tab-bar/types.ts

import type { BaseTabBarProps, BaseTabBarStyleProps, TabBarSlot } from '../core/types';/** The shared slots, plus `divider`: the thin line between two tabs. */export type DividerTabBarSlot = TabBarSlot | 'divider';interface DividerOptions {  /**   * Show each tab's label under its icon. Default `false`: icon-only, like the inspiration. Labels are always   * read by screen readers either way.   */  showLabels?: boolean;  /** Icon size in points, passed to each item's `icon` render function. Default `24`. */  iconSize?: number;  /** Draw the thin lines between tabs. Default `true`. */  showDividers?: boolean;}/** NativeWind version (`index.tsx`): style with `className` / `classNames`. */export interface DividerTabBarProps extends BaseTabBarProps<DividerTabBarSlot>, DividerOptions {}/** StyleSheet version (`stylesheet/index.tsx`): style with `styles`. */export interface DividerTabBarStyleProps extends BaseTabBarStyleProps<DividerTabBarSlot>, DividerOptions {}

components/skiddie/divider-tab-bar/use-divider-tabs.ts

import { tokens } from '../core/tokens';import type { TabBarBehaviorProps } from '../core/types';import { useEffect } from 'react';import {  Easing,  interpolate,  type SharedValue,  useAnimatedStyle,  useReducedMotion,  useSharedValue,  withSpring,  withTiming,} from 'react-native-reanimated';type Options = Pick<TabBarBehaviorProps, 'items' | 'activeKey' | 'animation' | 'reducedMotion'>;/** * The active tab's position, shared by both versions of the bar. * * A shared value eases from the old tab's index to the new one; each tab reads it on the UI thread to fade its * accent icon in or out (`useTabFade`). A tap mid-fade starts from where it is, and no frame goes through React state. */export function useDividerTabs({ 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;  // -1 when no tab is active: every tab is at least 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]);  return position;}/** * One tab's crossfade: the accent icon is fully shown when `position` is on this tab and gone one tab away, the * plain icon the other way round. A spring that overshoots is clamped, so opacity stays within 0 to 1. */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 };}

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
`showLabels`	`boolean`	`false`	Show each label under its icon. Screen readers read labels either way. A tab without an icon always shows its label.
`showDividers`	`boolean`	`true`	Draw the thin lines between tabs.
`iconSize`	`number`	`24`	Size passed to every `icon` function.

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

Colors

Each colored part is a slot, so you color it with classNames (NativeWind) or styles (StyleSheet):

Part	NativeWind	StyleSheet	Default token
Bar background and top line	`classNames.container`	`styles.container` (`backgroundColor`, `borderTopColor`)	`background`, `border`
Dividers	`classNames.divider`	`styles.divider` (`backgroundColor`)	`border`
Active label	`classNames.labelActive`	`styles.labelActive` (`color`)	`accent`
Other labels	`classNames.label`	`styles.label` (`color`)	`inactive`
Icons	the `color` your `icon` function gets (`accent` when focused); ignore it to use your own	same	`accent` / `inactive`

// A dark bar with a gold accent, like the inspiration, in light and dark mode
<DividerTabBar
  {...props}
  classNames={{ container: 'bg-zinc-900 border-zinc-800', divider: 'bg-zinc-700' }}
/>

The accent itself is the accent token in core/tokens.ts: change it there to recolor every active icon. To keep the bar light whatever the phone's setting, see Turn dark mode off: it works the same for every component.

Customization

In order of power:

Tokens. Active icons and labels use accent, the rest inactive, the bar background, the top line and dividers border, dividers are dividerHeight × dividerWidth (24 × 1 px), all in core/tokens.ts. Change them there and every skiddie component follows.

Classes per part with classNames. Your classes are merged last, so they win:

<DividerTabBar
  {...props}
  classNames={{
    container: 'border-t-0',  // no top line
    divider: 'h-full',        // dividers from top to bottom
    label: 'font-medium',
  }}
/>

Slots: container, bar, item, itemActive, icon, label, labelActive, indicator (the accent icon's layer), divider, badge, badgeText. StyleSheet version: the same slots take style objects through styles:

<DividerTabBar {...props} styles={{ container: { borderTopWidth: 0 }, divider: { height: '100%' } }} />

renderItem to draw each tab yourself. The dividers stay between your tabs; the fade is yours to draw.

animation for the fade:

<DividerTabBar {...props} animation={{ durationMs: 120 }} />  // snappier
<DividerTabBar {...props} animation={{ type: 'spring' }} />    // spring timing (the fade never overshoots)

How it works

Each tab draws its icon twice: once in inactive, and once in accent laid on top. The active tab's index lives in a Reanimated shared value that eases to the tapped tab. On the UI thread, every tab sets its accent icon's opacity from its distance to that value (1 on the tab, 0 one tab away) and the plain icon's the other way round, so the color passes from the old tab to the new one. A tap mid-fade starts from where it is. React only re-renders when the active tab changes, never per frame. Your icon function gets focused: true for the accent copy, so outline and filled icon pairs crossfade too.

Accessibility

The bar is a tablist; each tab is a tab with selected and disabled state.
Labels are read even when hidden, together with the selected state.
Badges are part of the label: a count reads "Search, 3", a dot reads "Notifications, new".
Tabs are at least 44pt tall and share the bar width; dividers are not focusable.
With Reduce Motion on (iOS) or Remove animations (Android), colors switch without fading. Force it with reducedMotion="always" or "never".
RTL: tabs and dividers mirror automatically.

Platform support

Platform	Support
iOS	Yes
Android	Yes
Web (live preview)	Yes
Expo Go	TBD
Minimum Expo SDK	TBD
License	skiddie Free

Works in Expo Go: it only needs Reanimated and safe-area-context, which Expo Go includes.