Accordion

(A) One-liner

Accordion is a component that shows multiple sections with "collapse/expand" functionality. Choose behavior model with type="single" | "multiple", and compose UI with Accordion.Item / Header / Content compound structure.

(B) Installation (Track A / Track B)

Track A (CLI / local install)

1. Add Accordion

pnpm dlx @fleet-ui/cli add Accordion

2. Import example

import { Accordion } from '@fleet-ui/local/components';

Track B (NPM package)

1. Import example

import { Accordion } from '@fleet-ui/components';

(Required) Per-component Dependencies

Accordion requires these dependencies for header icon (default Chevron) and interaction animation.

# For Expo, npx expo install is recommended
pnpm add lucide-react-native react-native-reanimated react-native-gesture-handler

(D) Core Features & Usage

D-1. Most Common Scenario (Minimal Example)

import { Accordion } from '@fleet-ui/components';
 
export function Example() {
  return (
    <Accordion type="single" defaultValue="item-1" collapsible>
      <Accordion.Item value="item-1">
        <Accordion.Header>Shipping Info</Accordion.Header>
        <Accordion.Content>Shipping takes 2-3 days.</Accordion.Content>
      </Accordion.Item>
 
      <Accordion.Item value="item-2">
        <Accordion.Header>Refund Policy</Accordion.Header>
        <Accordion.Content>Refund is available within 7 days of purchase.</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

D-2. State Model Based on type (Important)

Accordion's "open state" type differs based on single / multiple.

• single: Only one opens
  • uncontrolled: defaultValue?: string
  • controlled: value?: string, onValueChange?: (value: string) => void
• multiple: Multiple can open simultaneously
  • uncontrolled: defaultValue?: string[]
  • controlled: value?: string[], onValueChange?: (value: string[]) => void

When type="single" with collapsible=true, "close all" is possible. In this case, onValueChange can pass empty string ('') (representing closed state). Define this value interpretation rule once in your app and unify.

D-3. Accordion.Item's value is "State Key"

Accordion.Item's value: string is a unique key that identifies open state.

• Both controlled/uncontrolled calculate "is open" based on value.
• In type="multiple", judged by whether included in "array of open values."

D-4. Header Icon/Slots: leftIcon, rightIcon

Accordion.Header:

• Renders left slot with leftIcon
• If no rightIcon, renders default icon (ChevronDown) that rotates based on open state
• Can hide default icon with rightIcon={false}

(E) Internal State / Shared Value / Animation

E-1. State Model

Accordion propagates state with root context + item context.

• Values managed at Root (Accordion):
  • expandedValues: string[] (list of currently open item values)
  • toggleItem(value: string) (toggle open/close)
• Values derived at Item (Accordion.Item):
  • isExpanded: boolean (whether own value is included in expandedValues)
  • isDisabled: boolean (Accordion.Item's disabled)

E-2. Reanimated / Shared Value

Accordion animation is mainly in 2 areas:

• Header: press-in/out scale/opacity + Chevron rotation
  • rotation shared value transitions 0↔180 degrees with withTiming.
• Content: After measuring content height, animates height with withTiming
  • Stores measured animatedHeight via onLayout, and transitions height/opacity with time animation based on isExpanded.

Caution: Content "measures" actual height internally to animate, so when content changes dynamically (e.g., height change after image loading), consider layout re-measurement timing.

(F) Accessibility

Accordion.Header basically serves button role.

• Default role: accessibilityRole="button"
• Label rules:
  • If accessibilityLabel exists, use it
  • If not and children is string, use children as label
• State passed:
  • accessibilityState: { expanded, disabled }

Item disabled is handled with Accordion.Item disabled, and Header blocks press and lowers opacity.

(G) Props Table

Reference: Public types from packages/components/src/Accordion/Accordion.types.ts. AccordionProps extends ViewProps, and AccordionHeaderProps extends PressableProps.

Accordion (Root) — AccordionProps

Accordion Item — AccordionItemProps

Accordion Header — AccordionHeaderProps

Accordion Content — AccordionContentProps

RN Props Inheritance (Summary)

• AccordionProps extends ViewProps (e.g., style, etc.).
• AccordionHeaderProps extends PressableProps (e.g., onPress, disabled, accessibilityLabel, etc.). However, children is redefined in component.