# rn-tabs
URL: /docs/native/components/tabs

Tabbed navigation with animated sliding indicator, horizontal/vertical orientation, and multiple visual variants.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-tabs
```

**Dependencies:**
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)

## Usage

```tsx
import {
  TabsRoot,
  TabsList,
  TabsTrigger,
  TabsContent
} from '@/components/docyrus-native/tabs';

    
  
  
  

```

## API Reference

### TabsRoot

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | — | Controlled active tab value |
| `defaultValue` | `string` | — | Initial active tab value |
| `onValueChange` | `(value: string) => void` | — | Callback when active tab changes |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Tab layout orientation |
| `variant` | `'default' \| 'pills' \| 'underline'` | `'default'` | Visual style variant |
| `children` | `ReactNode` | — | TabsList and TabsContent children |
| `className` | `string` | — | Additional CSS classes |
| `accessibilityLabel` | `string` | `'Tabs'` | Accessibility label for the tab list |

### TabsList

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `scrollable` | `boolean` | `false` | Wrap triggers in a horizontal/vertical ScrollView |
| `children` | `ReactNode` | — | TabsTrigger children |
| `className` | `string` | — | List container CSS classes |

### TabsTrigger

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | — | Unique tab identifier (must match TabsContent value) |
| `disabled` | `boolean` | `false` | Whether the trigger is disabled |
| `textClassName` | `string` | — | Text CSS classes |
| `children` | `ReactNode` | — | Trigger label |
| `className` | `string` | — | Trigger CSS classes |

### TabsContent

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | — | Tab identifier (must match TabsTrigger value) |
| `children` | `ReactNode` | — | Content to render when tab is active |
| `className` | `string` | — | Content area CSS classes |

## Components

| Component | Description |
|-----------|-------------|
| `TabsRoot` | Root container managing active tab state and context |
| `TabsList` | Container for tab triggers with animated sliding indicator (Reanimated spring) |
| `TabsTrigger` | Pressable tab button with layout measurement for indicator positioning |
| `TabsContent` | Content panel with Reanimated fade-in/fade-out transitions |

## Type Exports

| Type | Description |
|------|-------------|
| `TabsRootProps` | Props for TabsRoot component |
| `TabsListProps` | Props for TabsList component |
| `TabsTriggerProps` | Props for TabsTrigger component |
| `TabsContentProps` | Props for TabsContent component |
| `TabsOrientation` | `'horizontal' \| 'vertical'` |
| `TabsVariant` | `'default' \| 'pills' \| 'underline'` |