Collapsible

Collapsible shows and hides content with a toggle. Use for FAQs, expandable sections, or progressive disclosure.

Preview

What is the I Ching?▼

The I Ching, or Book of Changes, is an ancient Chinese divination text and one of the oldest of the Chinese classics.

Basic Usage

Show Details▼

Hidden content revealed when expanded.

More Information▼

<Collapsible title="Show Details">
  <Text>Hidden content revealed when expanded.</Text>
</Collapsible>

<Collapsible title="More Information">
  <Text>Another section of content.</Text>
</Collapsible>

Default Expanded

Interpretation▼

This hexagram represents the creative principle, symbolizing strength and initiative. It encourages taking bold action while maintaining patience.

<Collapsible title="Interpretation" defaultExpanded>
  <Text>This hexagram represents the creative principle...</Text>
</Collapsible>

Accordion Group

Only one section can be expanded at a time.

What is the I Ching?▼

The I Ching is an ancient Chinese divination text that has been in continuous use for over 3,000 years.

How do I cast a hexagram?▼

What do the lines mean?▼

<CollapsibleGroup accordion>
  <Collapsible title="What is the I Ching?">
    <Text>The I Ching is an ancient Chinese divination text...</Text>
  </Collapsible>
  <Collapsible title="How do I cast a hexagram?">
    <Text>There are several traditional methods...</Text>
  </Collapsible>
  <Collapsible title="What do the lines mean?">
    <Text>Each line can be either yin or yang...</Text>
  </Collapsible>
</CollapsibleGroup>

Custom Header

☰

Hexagram 1 - The CreativeForce, Heaven, Strength

▼

The Creative works sublime success, furthering through perseverance.

<Collapsible
  title={
    <View style={styles.customHeader}>
      <Text style={styles.symbol}>☰</Text>
      <View>
        <Text style={styles.title}>Hexagram 1 - The Creative</Text>
        <Text style={styles.subtitle}>Force, Heaven, Strength</Text>
      </View>
    </View>
  }
>
  <Text>The Creative works sublime success...</Text>
</Collapsible>

API Reference

Collapsible Props

Prop	Type	Default	Description
`title`	`string \| ReactNode`	Required	Header content
`children`	`ReactNode`	Required	Collapsible content
`defaultExpanded`	`boolean`	`false`	Initial expanded state
`expanded`	`boolean`	-	Controlled expanded state
`onExpandedChange`	`(expanded: boolean) => void`	-	Expansion handler
`noAnimation`	`boolean`	`false`	Disable animation
`style`	`ViewStyle`	-	Container styles
`headerStyle`	`ViewStyle`	-	Header styles
`contentStyle`	`ViewStyle`	-	Content styles

CollapsibleGroup Props

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Child collapsibles
`accordion`	`boolean`	`false`	Only one expanded at a time
`style`	`ViewStyle`	-	Custom styles