Disclosure Components

Disclosure components control the visibility of content sections, allowing users to expand and collapse information on demand.


import { Accordion } from '@/common/components';
import type { AccordionItem } from '@/common/components';

Accordion

An expandable section component that supports single or multiple simultaneous expansions. Each section animates open and closed, with a rotating chevron indicator in the header.

Basic Usage


const items: AccordionItem[] = [
  {
    id: 'shipping',
    title: 'Shipping Information',
    content: <Text>We offer free shipping on orders over $50.</Text>,
  },
  {
    id: 'returns',
    title: 'Return Policy',
    content: <Text>Returns accepted within 30 days of purchase.</Text>,
  },
  {
    id: 'warranty',
    title: 'Warranty',
    content: <Text>All products come with a 1-year warranty.</Text>,
  },
];
 
<Accordion items={items} />

Multiple Expand

By default, only one section can be open at a time. Set multiple to allow several sections to expand simultaneously.


<Accordion items={items} multiple />

Default Expanded

Pre-expand specific sections on initial render by passing their IDs.


<Accordion items={items} defaultExpanded={['shipping', 'returns']} />

Disabled Items

Individual sections can be disabled to prevent toggling.


const items: AccordionItem[] = [
  { id: '1', title: 'Available Section', content: <Text>Open me</Text> },
  { id: '2', title: 'Locked Section', content: <Text>Cannot open</Text>, disabled: true },
];

AccordionItem Type


interface AccordionItem {
  /** Unique identifier for this section. */
  id: string;
  /** Header text displayed in the section trigger. */
  title: string;
  /** Content rendered when the section is expanded. */
  content: ReactNode;
  /** Whether this section is disabled. Defaults to false. */
  disabled?: boolean;
}

Props

Prop	Type	Default	Description
`items`	`AccordionItem[]`	required	Array of accordion sections to render
`multiple`	`boolean`	`false`	Allow multiple sections to expand simultaneously
`defaultExpanded`	`string[]`	`[]`	Array of item IDs that should be expanded on initial render

The Accordion uses React Native’s LayoutAnimation for smooth expand/collapse transitions. Each section header includes a chevron icon that rotates to indicate the expanded state.

Common Patterns

FAQ Page


const faqItems = faqs.map((faq) => ({
  id: faq.id,
  title: faq.question,
  content: <Text color="secondary">{faq.answer}</Text>,
}));
 
<Accordion items={faqItems} />

Settings Groups


<Accordion
  items={[
    {
      id: 'notifications',
      title: 'Notifications',
      content: (
        <>
          <Switch label="Push Notifications" value={push} onValueChange={setPush} />
          <Switch label="Email Alerts" value={email} onValueChange={setEmail} />
        </>
      ),
    },
    {
      id: 'privacy',
      title: 'Privacy',
      content: (
        <>
          <Switch label="Analytics" value={analytics} onValueChange={setAnalytics} />
          <Switch label="Crash Reports" value={crashes} onValueChange={setCrashes} />
        </>
      ),
    },
  ]}
  multiple
/>