Accordion

Accordion organizes content into collapsible sections. Use when you have multiple sections of content that users don’t need to see all at once.

Preview

What is the I Ching?▲

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

How do I cast a reading?▼

What are trigrams?▼

Basic Usage

Section One▲

Content for the first section. This is visible when expanded.

Section Two▼

<Accordion>
  <AccordionItem title="Section One">
    Content for the first section. This is visible when expanded.
  </AccordionItem>
  <AccordionItem title="Section Two">
    Content for the second section.
  </AccordionItem>
</Accordion>

Default Expanded

Set which items are expanded by default.

<Accordion defaultExpanded={[0]}>
  <AccordionItem title="Open by default">
    This section starts expanded.
  </AccordionItem>
  <AccordionItem title="Collapsed by default">
    This section starts collapsed.
  </AccordionItem>
</Accordion>

Allow Multiple

Allow multiple sections to be open simultaneously.

First Section▲

First content visible.

Second Section▲

Second content also visible.

Third Section▼

<Accordion allowMultiple defaultExpanded={[0, 1]}>
  <AccordionItem title="First Section">
    First content visible.
  </AccordionItem>
  <AccordionItem title="Second Section">
    Second content also visible.
  </AccordionItem>
  <AccordionItem title="Third Section">
    Third content collapsed.
  </AccordionItem>
</Accordion>

Disabled Items

Available Section▼

Premium Content▼

<Accordion>
  <AccordionItem title="Available Section">
    This section is accessible.
  </AccordionItem>
  <AccordionItem title="Premium Content" disabled>
    This content requires a premium subscription.
  </AccordionItem>
</Accordion>

API Reference

Accordion Props

Prop	Type	Default	Description
`children`	`ReactNode`	Required	AccordionItem elements
`allowMultiple`	`boolean`	`false`	Allow multiple expanded
`defaultExpanded`	`number[]`	`[]`	Initially expanded indices
`style`	`ViewStyle`	-	Custom styles

AccordionItem Props

Prop	Type	Default	Description
`title`	`string`	Required	Section title
`children`	`ReactNode`	Required	Section content
`expanded`	`boolean`	-	Controlled expanded state
`onToggle`	`() => void`	-	Toggle handler
`disabled`	`boolean`	`false`	Disable interaction
`style`	`ViewStyle`	-	Custom styles

Complete Example

import { Accordion, AccordionItem, Text } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';

function FAQScreen() {
  const faqs = [
    {
      question: "What is the I Ching?",
      answer: "The I Ching, or Book of Changes, is an ancient Chinese divination text dating back over 3,000 years. It consists of 64 hexagrams, each representing different states of change and offering guidance for life decisions."
    },
    {
      question: "How do I cast a reading?",
      answer: "You can cast a reading using the Three Coins method (our default), the traditional Yarrow Stalk method, or other variations. The app guides you through each step of the process."
    },
    {
      question: "What are trigrams?",
      answer: "Trigrams are the building blocks of hexagrams. There are eight trigrams, each consisting of three lines (solid or broken) representing natural phenomena like Heaven, Earth, Water, and Fire."
    },
    {
      question: "How do I interpret my reading?",
      answer: "Each reading provides a primary hexagram with its judgment and image. The app offers traditional interpretations, line-by-line analysis, and if you have changing lines, a relating hexagram showing the situation's evolution."
    },
    {
      question: "Can I save my readings?",
      answer: "Yes! Tap the save button after your reading to store it in your journal. You can add notes, tags, and revisit your readings anytime to track patterns and insights."
    },
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Frequently Asked Questions</Text>

      <Accordion defaultExpanded={[0]}>
        {faqs.map((faq, index) => (
          <AccordionItem key={index} title={faq.question}>
            <Text style={styles.answer}>{faq.answer}</Text>
          </AccordionItem>
        ))}
      </Accordion>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 24,
  },
  answer: {
    fontSize: 14,
    lineHeight: 22,
    color: '#8a8a9a',
  },
});