rslabdocs

Accordion

A collapsible section with an animated height, plus a group variant where only one item stays open at a time.

ReanimatedHapticsNativeWindSource

Prerequisites

Accordion also ships AccordionGroup in the same install, so both land together.


npx expo install @hugeicons/core-free-icons @hugeicons/react-native expo-haptics react-native-reanimated

Install


npx @rslab/cli add accordion

Usage

Both components are controlled, you own the open state, the component just animates it.

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

const [open, setOpen] = useState(false);

<Accordion
  title="What is RSLAB?"
  expanded={open}
  onToggle={() => setOpen((o) => !o)}
>
  <Text>A registry of animated React Native components.</Text>
</Accordion>;
import { AccordionGroup } from '@/components/ui/AccordionGroup';

const [openId, setOpenId] = useState<string | null>('shipping');

<AccordionGroup
  items={[
    {
      id: 'shipping',
      title: 'How long does shipping take?',
      content: <Text>2-4 days.</Text>,
    },

    {
      id: 'returns',
      title: "What's your return policy?",
      content: <Text>30 days.</Text>,
    },
  ]}

  openId={openId}

  onOpenChange={setOpenId}
/>;

Props

Accordion

PropTypeDefault
title
string
-

The header label.

expanded
boolean
-

Controlled open state.

onToggle
() => void
-

Called when the header is pressed; flip your own state in response.

children
ReactNode
-

The collapsible content.

disabled?
boolean
false

Fades the panel and blocks the header press.

haptic?
boolean
true

Set false to mute the selection tick on toggle.

className?
string
-

Extend or override the outer card.

AccordionGroup

PropTypeDefault
items
{ id: string; title: string; content: ReactNode }[]
-

Rendered as one Accordion each.

openId
stringnull
-

Controlled; the currently open item's id, or null when none are open.

onOpenChange
(id: stringnull) => void
-

Called with the newly opened id, or null when the open item is tapped shut.

disabled?
boolean
false

Forwarded to every item.

haptic?
boolean
true

Forwarded to every item.

className?
string
-

Extend or override the group wrapper.

See exactly how this works with an RSLAB subscription.

Get Pro

On this page