npx skiddie@latest add slide-drawer

Slide Drawer

A side menu with a profile header slides over a dimmed screen; tap outside or pick a page to close it.

26DrawersNew

Dependencies

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

Platforms

iOSAndroidWeb

A side menu for apps with more pages than a tab bar can hold. A menu button opens it: the panel slides in from the edge while the screen behind it dims. At the top, who's signed in (picture, name, email); under a thin line, the pages; pinned to the bottom, one action such as Sign out. Pick a page and the drawer navigates and closes. Tap the dimmed screen, press Android's back button or Escape on web, and it just closes.

Installation

Add the component

npx skiddie@latest add slide-drawer

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 { Slot, usePathname, useRouter } from 'expo-router';import { GearIcon } from 'phosphor-react-native/src/icons/Gear';import { HouseIcon } from 'phosphor-react-native/src/icons/House';import { ListIcon } from 'phosphor-react-native/src/icons/List';import { SignOutIcon } from 'phosphor-react-native/src/icons/SignOut';import { useState } from 'react';import { Pressable, View } from 'react-native';import { SafeAreaView } from 'react-native-safe-area-context';import { SlideDrawer } from '@/components/skiddie/slide-drawer';import type { DrawerItem } from '@/components/skiddie/slide-drawer/types';// Keyed by route: index.tsx → '/', settings.tsx → '/settings'.const items: DrawerItem[] = [  { key: '/', label: 'Home', icon: ({ color, size }) => <HouseIcon color={color} size={size} /> },  { key: '/settings', label: 'Settings', icon: ({ color, size }) => <GearIcon color={color} size={size} /> },];export default function Layout() {  const router = useRouter();  const pathname = usePathname();  const [open, setOpen] = useState(false);  return (    <View style={{ flex: 1 }}>      <SafeAreaView edges={['top']}>        <Pressable accessibilityRole="button" accessibilityLabel="Open menu" onPress={() => setOpen(true)}>          <ListIcon size={24} />        </Pressable>      </SafeAreaView>      <Slot />      {/* Last, so it covers the screen. */}      <SlideDrawer        open={open}        onClose={() => setOpen(false)}        items={items}        activeKey={pathname}        onChange={(href) => router.navigate(href)}        profile={{          name: 'Alex Rivera',          detail: 'alex@example.com',          avatar: require('../../assets/images/icon.png'), // or { uri: user.photoUrl }        }}        action={{          label: 'Sign out',          icon: ({ color, size }) => <SignOutIcon color={color} size={size} />,          onPress: () => {}, // your sign-out        }}      />    </View>  );}

With Expo Router, put it in a layout (src/app/_layout.tsx) so it stays put while the routes inside change. Each row's key is a route, and usePathname() highlights the current one. No src/ folder? Drop src/ from the paths.

The drawer covers the view it's rendered in, so render it last, in a view that fills the screen.

tokens.ts

tailwind-preset.js

cn.ts

types.ts

adapters/react-navigation.tsx

index.tsx

styles.ts

types.ts

use-slide-drawer.ts

tailwind.config.js

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

components/skiddie/slide-drawer/index.tsx

import { cn } from '../core/cn';import { tokens } from '../core/tokens';import { useColorScheme } from 'nativewind';import { memo } from 'react';import { Image, 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 { SlideDrawerProps } from './types';import { useSlideDrawer } from './use-slide-drawer';const imageFill = { width: '100%', height: '100%' } as const;/** * A side menu with a profile header slides over a dimmed screen; tap outside or pick a page to close it. * NativeWind version. Render it last in your root view, so it covers the screen. */export const SlideDrawer = memo(function SlideDrawer({  open,  onClose,  items,  activeKey,  onChange,  profile,  action,  closeOnChange = true,  side = 'start',  width = tokens.size.drawerWidth,  iconSize = 22,  children,  className,  classNames,  style,  animation,  reducedMotion,  safeArea = true,  insets,  testID,}: SlideDrawerProps) {  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 colors = tokens.colors[colorScheme === 'dark' ? 'dark' : 'light'];  const edges = safeArea ? (insets ?? safe) : { top: 0, bottom: 0 };  const { mounted, panelStyle, scrimStyle } = useSlideDrawer({    open,    onClose,    side,    width,    animation,    reducedMotion,  });  if (!mounted) return null;  return (    <View testID={testID} className={cn(styles.container, classNames?.container)} style={style}>      {/* The scrim: a tap anywhere outside the panel closes the drawer. */}      <Pressable role="button" accessibilityLabel="Close menu" onPress={onClose} className="absolute inset-0">        {/* Plain Views for the classes (NativeWind styles core components); Animated.Views get only the motion. */}        <Animated.View style={scrimStyle}>          <View className={cn(styles.scrim, classNames?.scrim)} />        </Animated.View>      </Pressable>      <View pointerEvents="box-none" className={side === 'start' ? styles.edgeStart : styles.edgeEnd}>        <Animated.View style={panelStyle}>          <View            role="dialog"            aria-modal            accessibilityViewIsModal            accessibilityLabel="Menu"            className={cn(styles.panel, classNames?.panel, className)}            style={{              paddingTop: edges.top + tokens.spacing.drawerPadding,              paddingBottom: edges.bottom + tokens.spacing.drawerPadding,            }}          >            {profile && (              <View className={cn(styles.header, classNames?.header)}>                {profile.avatar && (                  <View className={cn(styles.avatar, classNames?.avatar)}>                    {/* A style, not classes: React Native Web sizes an unstyled Image to the file's pixels. */}                    <Image source={profile.avatar} accessibilityIgnoresInvertColors style={imageFill} />                  </View>                )}                <Text role="heading" numberOfLines={1} className={cn(styles.name, classNames?.name)}>                  {profile.name}                </Text>                {profile.detail && (                  <Text numberOfLines={1} className={cn(styles.detail, classNames?.detail)}>                    {profile.detail}                  </Text>                )}                <View className={cn(styles.separator, classNames?.separator)} />              </View>            )}            <ScrollView              role="menu"              className={cn(styles.list, classNames?.list)}              contentContainerClassName={styles.listContent}              showsVerticalScrollIndicator={false}            >              {items.map((item) => {                const focused = item.key === activeKey;                const hasBadge = item.badge !== undefined && item.badge !== false;                const spoken = item.badge === true ? 'new' : item.badge;                const label = item.accessibilityLabel ?? item.label;                const onPress = () => {                  onChange(item.key);                  if (closeOnChange) onClose();                };                return (                  <Pressable                    key={item.key}                    role="menuitem"                    accessibilityState={{ selected: focused, disabled: item.disabled }}                    accessibilityLabel={hasBadge ? `${label}, ${spoken}` : label}                    disabled={item.disabled}                    onPress={onPress}                    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)}>                        {item.icon({ focused, color: colors.active, size: iconSize })}                      </View>                    )}                    <Text                      numberOfLines={1}                      className={cn(                        styles.label,                        classNames?.label,                        focused && cn(styles.labelActive, classNames?.labelActive),                      )}                    >                      {item.label}                    </Text>                    {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>                    )}                  </Pressable>                );              })}            </ScrollView>            {children}            {action && (              <View className={cn(styles.footer, classNames?.footer)}>                <Pressable                  role="button"                  accessibilityLabel={action.accessibilityLabel ?? action.label}                  onPress={action.onPress}                  className={cn(styles.action, classNames?.action)}                >                  {action.icon?.({ focused: false, color: colors.active, size: iconSize })}                  <Text className={cn(styles.actionLabel, classNames?.actionLabel)}>{action.label}</Text>                </Pressable>              </View>            )}          </View>        </Animated.View>      </View>    </View>  );});export default SlideDrawer;

components/skiddie/slide-drawer/styles.ts

/** Default classes per slot, from sk-* token classes. Users override any slot with `classNames`. */export const styles = {  // Covers the screen it's rendered in: put the drawer last in your root view, after the screen's content.  container: 'absolute inset-0',  // Dims the screen; its opacity follows the drawer (up to `opacity.scrim`), in use-slide-drawer.ts.  scrim: 'flex-1 bg-sk-scrim',  // The panel's slot on its edge; the panel's width and slide come from use-slide-drawer.ts.  edgeStart: 'absolute inset-y-0 start-0',  edgeEnd: 'absolute inset-y-0 end-0',  // Safe-area padding is added in index.tsx.  panel: 'flex-1 bg-sk-background px-sk-drawer-pad',  header: '',  // A clipped circle; the picture fills it (index.tsx).  avatar: 'size-sk-drawer-avatar overflow-hidden rounded-sk-indicator bg-sk-surface',  name: 'mt-sk-drawer-section text-sk-drawer-name font-bold text-sk-active',  detail: 'mt-sk-drawer-name-gap text-sk-drawer-detail text-sk-inactive',  separator: 'mt-sk-drawer-section h-sk-divider-w bg-sk-border',  list: 'flex-1',  listContent: 'py-sk-drawer-pad',  // Rows reach a little past the panel's padding, so the active tile has room while icons line up with the name.  item: 'min-h-sk-touch -mx-sk-bar-x cursor-pointer flex-row items-center gap-sk-drawer-gap rounded-sk-item px-sk-bar-x py-sk-drawer-item-y',  itemActive: 'bg-sk-surface',  icon: 'items-center justify-center',  label: 'flex-1 text-sk-drawer-item text-sk-active',  labelActive: 'font-semibold',  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',  footer: 'pt-sk-gap',  action:    'h-sk-drawer-button cursor-pointer flex-row items-center justify-center gap-sk-gap rounded-sk-indicator bg-sk-surface',  actionLabel: 'text-sk-drawer-item font-medium text-sk-active',} as const;

components/skiddie/slide-drawer/types.ts

import type { TabBarBehaviorProps, TabIconRender } from '../core/types';import type { ReactNode } from 'react';import type { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from 'react-native';/** One row in the menu. */export interface DrawerItem {  /** Unique key; matches `activeKey` and is passed to `onChange`. */  key: string;  /** Visible label, also the default accessibility label. */  label: string;  icon?: TabIconRender;  /** A count or a short string shown at the end of the row, or `true` for a dot. Announced to screen readers. */  badge?: number | string | boolean;  accessibilityLabel?: string;  testID?: string;  disabled?: boolean;}/** Who is signed in, shown at the top of the panel. Leave it out for a menu without a header. */export interface DrawerProfile {  name: string;  /** A second line under the name, such as an email address. */  detail?: string;  /** Profile picture: `require('./me.jpg')` or `{ uri }`. */  avatar?: ImageSourcePropType;}/** The button at the bottom of the panel, such as "Sign out". */export interface DrawerAction {  label: string;  onPress: () => void;  icon?: TabIconRender;  accessibilityLabel?: string;}export type SlideDrawerSlot =  | 'container'  | 'scrim'  | 'panel'  | 'header'  | 'avatar'  | 'name'  | 'detail'  | 'separator'  | 'list'  | 'item'  | 'itemActive'  | 'icon'  | 'label'  | 'labelActive'  | 'badge'  | 'badgeText'  | 'footer'  | 'action'  | 'actionLabel';/** Slots that render text; they take `TextStyle`, every other slot `ViewStyle`. */type TextSlot = 'name' | 'detail' | 'label' | 'labelActive' | 'badgeText' | 'actionLabel';/** Everything the drawer takes except styling; shared by the NativeWind and StyleSheet versions (ADR 0026). */interface SlideDrawerBehaviorProps  extends Pick<TabBarBehaviorProps, 'animation' | 'haptics' | 'reducedMotion' | 'insets' | 'testID'> {  /** Whether the drawer is open. The drawer is controlled: flip this from your menu button and `onClose`. */  open: boolean;  /** Called when the drawer asks to close: a tap on the scrim, a picked row, Android back, or Escape on web. */  onClose: () => void;  items: DrawerItem[];  /** The current page's key; its row is highlighted. */  activeKey?: string;  /** Called with a row's key when it's tapped, before the drawer closes. Navigate here. */  onChange: (key: string) => void;  profile?: DrawerProfile;  /** The button pinned to the bottom of the panel, such as "Sign out". */  action?: DrawerAction;  /** Close the drawer when a row is picked. Default `true`. */  closeOnChange?: boolean;  /** The edge the panel slides in from. `start` is the left (the right in RTL). Default `'start'`. */  side?: 'start' | 'end';  /** Panel width in points; never more than 85% of the screen. Default `320`. */  width?: number;  /** Icon size in points, passed to each row's `icon`. Default `22`. */  iconSize?: number;  /** Anything between the list and the action, such as an app version line. */  children?: ReactNode;  /** Pad the panel for the top and bottom safe areas. Default `true`. */  safeArea?: boolean;  /** Escape hatch for the root; wins over classes and slot styles. */  style?: StyleProp<ViewStyle>;}/** NativeWind version (`index.tsx`): style with `className` / `classNames`. */export interface SlideDrawerProps extends SlideDrawerBehaviorProps {  /** Classes for the panel. Merged last, so they win over defaults. */  className?: string;  /** Classes per part. */  classNames?: Partial<Record<SlideDrawerSlot, string>>;}/** StyleSheet version (`stylesheet/index.tsx`): style with `styles`. */export interface SlideDrawerStyleProps extends SlideDrawerBehaviorProps {  /** Styles per part, applied after the defaults, so they win. */  styles?: { [K in SlideDrawerSlot]?: StyleProp<K extends TextSlot ? TextStyle : ViewStyle> };}

components/skiddie/slide-drawer/use-slide-drawer.ts

import { tokens } from '../core/tokens';import type { TabBarBehaviorProps } from '../core/types';import { useEffect, useState } from 'react';import { BackHandler, I18nManager, Platform, useWindowDimensions } from 'react-native';import {  Easing,  runOnJS,  useAnimatedStyle,  useReducedMotion,  useSharedValue,  withSpring,  withTiming,} from 'react-native-reanimated';/** The bit of the web `document` used for Escape. React Native's types have no DOM, so it's declared here. */interface WebDocument {  addEventListener(type: 'keydown', listener: (event: { key: string }) => void): void;  removeEventListener(type: 'keydown', listener: (event: { key: string }) => void): void;}interface Options extends Pick<TabBarBehaviorProps, 'animation' | 'reducedMotion'> {  open: boolean;  onClose: () => void;  side: 'start' | 'end';  width: number;}/** * The drawer's motion and closing rules, shared by both versions. * * One shared value, `progress`, runs from 0 (closed) to 1 (open) on the UI thread: the panel slides by it and the * scrim fades by it. The drawer stays mounted until the closing animation ends, then unmounts, so a closed drawer * costs nothing and can't be reached by touch, Tab or a screen reader. */export function useSlideDrawer({ open, onClose, side, width, animation, reducedMotion = 'system' }: Options) {  const systemReduced = useReducedMotion();  const reduce = reducedMotion === 'always' || (reducedMotion === 'system' && systemReduced);  const screen = useWindowDimensions();  const panelWidth = Math.min(width, screen.width * tokens.size.drawerMaxShare);  const [mounted, setMounted] = useState(open);  const progress = useSharedValue(open ? 1 : 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;  useEffect(() => {    if (open) setMounted(true);    const target = open ? 1 : 0;    const settle = (finished?: boolean) => {      'worklet';      if (finished && !open) runOnJS(setMounted)(false);    };    if (reduce) {      progress.value = target;      if (!open) setMounted(false);    } else if (type === 'spring') {      progress.value = withSpring(target, { damping, stiffness, mass, overshootClamping: !open }, settle);    } else {      progress.value = withTiming(target, { duration: durationMs, easing: Easing.out(Easing.cubic) }, settle);    }  }, [open, reduce, type, durationMs, damping, stiffness, mass, progress]);  // Android's back button and Escape on web close an open drawer instead of leaving the screen.  useEffect(() => {    if (!open) return;    // BackHandler is Android-only (it warns on web).    const back =      Platform.OS === 'android'        ? BackHandler.addEventListener('hardwareBackPress', () => {            onClose();            return true;          })        : undefined;    const onKey = (event: { key: string }) => {      if (event.key === 'Escape') onClose();    };    const doc = Platform.OS === 'web' ? (globalThis as { document?: WebDocument }).document : undefined;    doc?.addEventListener('keydown', onKey);    return () => {      back?.remove();      doc?.removeEventListener('keydown', onKey);    };  }, [open, onClose]);  // The panel sits on its edge; closed, it's pushed one panel width off screen. `start` is the left edge, or the  // right one in RTL (layout flips it, transforms don't, so the sign flips here).  const offscreen = (side === 'start') !== I18nManager.isRTL ? -panelWidth : panelWidth;  // `flex: 1` lets each animated layer fill its plain parent, which holds the classes.  const panelStyle = useAnimatedStyle(() => ({    flex: 1,    width: panelWidth,    transform: [{ translateX: (1 - progress.value) * offscreen }],  }));  const scrimStyle = useAnimatedStyle(() => ({ flex: 1, opacity: progress.value * tokens.opacity.scrim }));  return { mounted, panelStyle, scrimStyle };}

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

Props

Prop	Type	Default	What it does
`open`	`boolean`	required	Whether the drawer is open. Set it from your menu button.
`onClose`	`() => void`	required	Called when the drawer asks to close: a tap on the dimmed screen, a picked row, Android back, Escape on web. Set `open` to `false` here.
`items`	`DrawerItem[]`	required	The rows: `key`, `label`, optional `icon`, `badge`, `disabled`, `accessibilityLabel`, `testID`.
`activeKey`	`string`		The current page's key; its row is highlighted.
`onChange`	`(key: string) => void`	required	Called with a row's key when it's tapped, before the drawer closes. Navigate here.
`profile`	`{ name, detail?, avatar? }`		Who's signed in, at the top. `avatar` is `require('./me.jpg')` or `{ uri }`. Leave it out for no header.
`action`	`{ label, onPress, icon?, accessibilityLabel? }`		The button pinned to the bottom, such as Sign out.
`closeOnChange`	`boolean`	`true`	Close the drawer when a row is picked.
`side`	`'start' \| 'end'`	`'start'`	The edge it slides in from. `start` is the left, or the right in RTL.
`width`	`number`	`320`	Panel width in points. Never more than 85% of the screen.
`iconSize`	`number`	`22`	Size passed to every `icon` function.
`children`	`ReactNode`		Anything between the list and the action, such as a version line.
`safeArea`	`boolean`	`true`	Pad the panel for the top and bottom safe areas.

Plus className and classNames (NativeWind) or styles (StyleSheet), style, animation, reducedMotion, insets and testID, as in the shared contract. 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). Your value wins over the default, in light and dark.

Part	Slot	Default token
Panel	`panel` (`backgroundColor`)	`background`
Dimmed screen	`scrim` (`backgroundColor`; how dark is `opacity.scrim`, 0.5)	`scrim`
Name, email	`name`, `detail` (`color`)	`active`, `inactive`
Line under the profile	`separator`	`border`
Row labels	`label`, `labelActive` (`color`)	`active`
Active row tile	`itemActive` (`backgroundColor`)	`surface`
Action button	`action`, `actionLabel`	`surface`, `active`
Icons	the `color` your `icon` function gets; ignore it to use your own	`active`

// A dark panel whatever the phone's setting, like the inspiration
<SlideDrawer
  {...props}
  classNames={{
    panel: 'bg-zinc-900',
    name: 'text-white',
    label: 'text-white',
    itemActive: 'bg-zinc-800',
    separator: 'bg-zinc-700',
    action: 'bg-zinc-800',
    actionLabel: 'text-white',
  }}
/>

To keep the whole app light, see Turn dark mode off: it works the same for every component.

Customization

In order of power:

Tokens. Colors as in Colors. Sizes: panel drawerWidth (320 px, at most drawerMaxShare of the screen), picture drawerAvatar (88 px), action drawerButton (52 px), padding drawerPadding (24 px), row padding drawerItemV (14 px). Type: drawerName, drawerDetail, drawerItem. All in core/tokens.ts.
Classes per part with classNames. Your classes are merged last, so they win:
```
<SlideDrawer
  {...props}
  className="rounded-e-3xl"                // round the panel's open edge
  classNames={{ avatar: 'rounded-2xl' }}   // a square-ish picture
/>
```
Slots: container, scrim, panel (also className), header, avatar, name, detail, separator, list, item, itemActive, icon, label, labelActive, badge, badgeText, footer, action, actionLabel. StyleSheet version: the same slots take style objects through styles:
```
<SlideDrawer {...props} styles={{ panel: { borderTopRightRadius: 24, borderBottomRightRadius: 24 } }} />
```
children for anything else in the panel, between the list and the action.

animation for the slide:

<SlideDrawer {...props} animation={{ durationMs: 160 }} />  // snappier
<SlideDrawer {...props} animation={{ type: 'spring' }} />    // springy on the way in

How it works

The drawer is controlled: you own open. One Reanimated shared value runs from 0 (closed) to 1 (open) on the UI thread; the panel's translateX is (1 − progress) × width off its edge and the scrim's opacity is progress × 0.5, so a close mid-open turns around smoothly. When the closing animation ends, the drawer unmounts: a closed drawer costs nothing and can't be reached by touch, Tab or a screen reader. React re-renders only when open changes, never per frame.

Accessibility

The panel is a modal dialog labelled "Menu": accessibilityViewIsModal keeps VoiceOver inside it, aria-modal does the same on web.
Rows are menuitems with selected and disabled state. Badges are part of the label: "Inbox, 3".
The dimmed screen is a "Close menu" button; Android back and Escape on web close the drawer too.
Rows and the action are at least 44pt tall. Text follows the system font size.
With Reduce Motion on (iOS) or Remove animations (Android), the drawer appears and disappears without sliding. Force it with reducedMotion="always" or "never".
RTL: side="start" opens from the right, and the slide mirrors.
Not yet: swiping the panel shut, and moving keyboard focus into the panel when it opens on web.

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.