Skip to content

Collapsible

Collapsible Primitive

Demo


A dynamic element that facilitates the expansion or collapse of a panel.

Installation

Terminal window
npx @react-native-reusables/cli@latest add collapsible

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/collapsible';
import { Text } from '~/components/ui/text';
function Example() {
return (
<Collapsible>
<CollapsibleTrigger >
<Text>Toggle</Text>
</CollapsibleTrigger>
<CollapsibleContent >
<Text>@radix-ui/react</Text>
</CollapsibleContent>
</Collapsible>
);
}

Props

Collapsible

Extends View props

PropTypeNote
asChildboolean(optional)
openboolean(optional)
onOpenChange(value: boolean) => void(optional)
defaultOpenboolean(optional)
disabledboolean(optional)

CollapsibleTrigger

Extends Pressable props

PropTypeNote
asChildboolean(optional)

CollapsibleContent

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined;(optional)