Skip to main content

Collapsible Sections

Allow users to expand and collapse sections to focus on what matters.

Live Example​

How It Works​

Enable Collapsible Sections​

<SectionFlow
  collapsible={true}
  // ...
/>

Initial Collapsed State​

Specify which sections start collapsed:

<SectionFlow
  collapsible={true}
  initialCollapsedSections={['archived', 'completed']}
/>

Toggle Programmatically​

Use the ref to control sections:

const ref = useRef<SectionFlowRef>(null);

// Toggle a single section
ref.current?.toggleSection('today');

// Expand a specific section
ref.current?.expandSection('urgent');

// Collapse a specific section
ref.current?.collapseSection('archived');

// Expand/collapse all
ref.current?.expandAllSections();
ref.current?.collapseAllSections();

Handle Header Press​

Make headers tappable to toggle:

renderSectionHeader={({ section, isCollapsed }) => (
  <TouchableOpacity
    onPress={() => ref.current?.toggleSection(section.key)}
  >
    <Text>{isCollapsed ? '▸' : '▾'} {section.title}</Text>
  </TouchableOpacity>
)}

Listen for Changes​

Track collapse state changes:

<SectionFlow
  collapsible={true}
  onSectionCollapse={(sectionKey, isCollapsed) => {
    // Save preference, analytics, etc.
    console.log(`${sectionKey}: ${isCollapsed}`);
  }}
/>

Animated Collapse​

The collapse animation is handled automatically. Items smoothly animate in/out when sections toggle.