Collapsible

Expandable/collapsible container with animated height transitions.

iOSAndroid

Preview Collapsible on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-collapsible

Required Packages(1 package)

pnpm add react-native-reanimated

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/docyrus-native/collapsible';

<Collapsible>
  <CollapsibleTrigger>
    <Text>Toggle Details</Text>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <Text>Hidden content revealed on toggle.</Text>
  </CollapsibleContent>
</Collapsible>

API Reference

Collapsible

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	—	Open state change handler
`children`	`ReactNode`	—	Trigger and Content children
`className`	`string`	—	Additional CSS classes

CollapsibleTrigger

Prop	Type	Default	Description
`children`	`ReactNode`	—	Trigger content
`className`	`string`	—	Additional CSS classes

CollapsibleContent

Prop	Type	Default	Description
`children`	`ReactNode`	—	Collapsible content
`className`	`string`	—	Additional CSS classes

Components

Component	Description
`Collapsible`	Root container with context provider
`CollapsibleTrigger`	Pressable trigger that toggles content
`CollapsibleContent`	Animated content container

Type Exports

Type	Description
`CollapsibleProps`	Props for Collapsible
`CollapsibleTriggerProps`	Props for CollapsibleTrigger
`CollapsibleContentProps`	Props for CollapsibleContent

Collapsible

On this page