Accordion

Collapsible content sections with animated expand/collapse transitions.

iOSAndroid

Preview Accordion on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

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

Required Packages(1 package)

pnpm add react-native-reanimated

Usage

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

<AccordionRoot type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section One</AccordionTrigger>
    <AccordionContent>Content for section one.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section Two</AccordionTrigger>
    <AccordionContent>Content for section two.</AccordionContent>
  </AccordionItem>
</AccordionRoot>

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'`

Accordion

On this page