Skip to content

Accordion Primitive

A vertically stacked set of interactive headings that each reveal a section of content.

Installation

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/accordion

Usage

import * as AccordionPrimitive from '@rn-primitives/accordion';
function Example() {
return (
<AccordionPrimitive.Root
type='multiple'
collapsible
defaultValue={['item-1']}
>
<AccordionPrimitive.Item value='item-1'>
<AccordionPrimitive.Trigger>
<Text>Is it accessible?</Text>
</AccordionPrimitive.Trigger>
<AccordionPrimitive.Content>
<Text>Yes. It adheres to the WAI-ARIA design pattern.</Text>
</AccordionPrimitive.Content>
</AccordionPrimitive.Item>
<AccordionPrimitive.Item value='item-2'>
<AccordionPrimitive.Trigger>
<Text>What are universal components?</Text>
</AccordionPrimitive.Trigger>
<AccordionPrimitive.Content>
<Text>
In the world of React Native, universal components are components that work on both
web and native platforms.
</Text>
</AccordionPrimitive.Content>
</AccordionPrimitive.Item>
</AccordionPrimitive.Root>
);
}

Props

Root

Extends View props

PropTypeNote
type*‘single’ | ‘multiple’
asChildboolean(optional)
defaultValue(string | undefined) | string[](optional)
value(string | undefined) | string[](optional)
onValueChange((string | undefined) => void) | ((string[]) => void)(optional)
dir’ltr’ | ‘rtl’Web only (optional)
orientation’vertical’ | ‘horizontal’Web only (optional)

Item

Extends View props

PropTypeNote
asChildboolean(optional)
valuestring(optional)
disabledboolean(optional)

Extends View props

PropTypeNote
asChildboolean(optional)

Trigger

Extends Pressable props

PropTypeNote
asChildboolean(optional)

Content

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined(optional)

useRootContext

Must be used within a Root component. It provides the following values from the accordion: type, disabled, collapsible, value, and onValueChange.

useItemContext

Must be used within an Item component. It provides the following values from the accordion item: value, disabled, and isExpanded.