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

Collapsible content sections with animated expand/collapse transitions.

## Installation

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

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

## Usage

```tsx
import {
  AccordionRoot,
  AccordionItem,
  AccordionTrigger,
  AccordionContent
} from '@/components/docyrus-native/accordion';

    
  
  
    
  

```

## API Reference

### AccordionRoot

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `'single' \| 'multiple'` | `'single'` | Whether one or multiple items can be open at once |
| `collapsible` | `boolean` | `true` | Whether open items can be collapsed (single mode only) |
| `value` | `string \| string[]` | — | Controlled open value(s) |
| `defaultValue` | `string \| string[]` | — | Initial open value(s) |
| `onValueChange` | `(val: string \| string[]) => void` | — | Callback when open state changes |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of trigger and content text |
| `variant` | `'default' \| 'outline' \| 'filled'` | `'default'` | Visual style variant |
| `chevronPosition` | `'left' \| 'right'` | `'right'` | Position of the expand/collapse chevron |
| `spacing` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'none'` | Gap between accordion items |
| `className` | `string` | — | Additional CSS classes |
| `children` | `ReactNode` | — | AccordionItem children |

### AccordionItem

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | — | Unique identifier for the item |
| `disabled` | `boolean` | — | Whether the item is disabled |
| `className` | `string` | — | Item container CSS classes |
| `children` | `ReactNode` | — | Trigger and content children |

### AccordionTrigger

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | Trigger label (string or custom node) |
| `className` | `string` | — | Trigger CSS classes |
| `textClassName` | `string` | — | Text CSS classes |

### AccordionContent

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | Content to show when expanded (string or custom node) |
| `className` | `string` | — | Content area CSS classes |

## Components

| Component | Description |
|-----------|-------------|
| `AccordionRoot` | Root container managing open state and context |
| `AccordionItem` | Individual collapsible item wrapper |
| `AccordionTrigger` | Pressable header that toggles open/close |
| `AccordionContent` | Animated content area that expands/collapses |

## Type Exports

| Type | Description |
|------|-------------|
| `AccordionRootProps` | Props for AccordionRoot component |
| `AccordionItemProps` | Props for AccordionItem component |
| `AccordionTriggerProps` | Props for AccordionTrigger component |
| `AccordionContentProps` | Props for AccordionContent component |
| `AccordionType` | `'single' \| 'multiple'` |
| `AccordionSize` | `'sm' \| 'md' \| 'lg'` |
| `AccordionVariant` | `'default' \| 'outline' \| 'filled'` |