Skip to main content

Accordion

A collapsible content component with smooth animations.

Overview​

The Accordion component provides a way to show and hide content with smooth expand/collapse animations. It's perfect for organizing content into collapsible sections, FAQs, or any expandable content areas.

Features​

  • Smooth Animations: Animated height transitions and arrow rotation
  • Customizable Duration: Configurable animation duration
  • Default State: Can be open or closed by default
  • Custom Styling: Full control over header, content, and arrow styling
  • Custom Arrow: Support for custom arrow components
  • Theme Integration: Follows the design system theme
  • Accessibility: Proper touch targets and screen reader support

Basic Usage​

import { Accordion } from "re-native-ui";

function MyComponent() {
  return (
    <Accordion title="Section Title">
      <Text>This is the collapsible content.</Text>
    </Accordion>
  );
}

Props​

PropTypeDefaultDescription
titlestringRequiredThe title displayed in the accordion header
childrenReact.ReactNodeRequiredThe content to be shown/hidden
defaultOpenbooleanfalseWhether the accordion should be open by default
onToggle(open: boolean) => voidundefinedCallback fired when accordion is toggled
durationnumber300Animation duration in milliseconds
styleViewStyleundefinedStyle for the container
headerStyleViewStyleundefinedStyle for the header
titleStyleTextStyleundefinedStyle for the title text
contentStyleViewStyleundefinedStyle for the content area
arrowReact.ReactNodeundefinedCustom arrow component

Examples​

Basic Accordion​

import React from "react";
import { Text } from "react-native";
import { Accordion } from "re-native-ui";

function BasicAccordion() {
  return (
    <Accordion title="Frequently Asked Questions">
      <Text>
        This is the answer to the frequently asked question. It can contain any
        content including multiple paragraphs, images, or other components.
      </Text>
    </Accordion>
  );
}

Accordion with Default Open State​

import React from "react";
import { Text } from "react-native";
import { Accordion } from "re-native-ui";

function OpenAccordion() {
  return (
    <Accordion title="Important Information" defaultOpen={true}>
      <Text>
        This accordion is open by default. Users can still collapse it by
        tapping the header.
      </Text>
    </Accordion>
  );
}

Accordion with Custom Styling​

import React from "react";
import { Text } from "react-native";
import { Accordion } from "re-native-ui";

function StyledAccordion() {
  return (
    <Accordion
      title="Custom Styled Section"
      headerStyle={{
        backgroundColor: "#f0f0f0",
        borderRadius: 8,
        marginBottom: 8,
      }}
      titleStyle={{
        fontWeight: "bold",
        color: "#333",
      }}
      contentStyle={{
        backgroundColor: "#fafafa",
        borderRadius: 8,
        borderLeft: "4px solid #007AFF",
      }}
    >
      <Text>
        This accordion has custom styling applied to the header, title, and
        content areas.
      </Text>
    </Accordion>
  );
}

Accordion with Custom Arrow​

import React from "react";
import { Text } from "react-native";
import { Accordion } from "re-native-ui";

function CustomArrowAccordion() {
  const CustomArrow = ({ isOpen }: { isOpen: boolean }) => (
    <Text style={{ fontSize: 18, color: "#007AFF" }}>{isOpen ? "−" : "+"}</Text>
  );

  return (
    <Accordion
      title="Custom Arrow Accordion"
      arrow={<CustomArrow isOpen={false} />}
    >
      <Text>
        This accordion uses a custom plus/minus arrow instead of the default
        chevron.
      </Text>
    </Accordion>
  );
}

Multiple Accordions​

import React from "react";
import { Text } from "react-native";
import { Accordion } from "re-native-ui";

function MultipleAccordions() {
  return (
    <>
      <Accordion title="Section 1">
        <Text>Content for section 1</Text>
      </Accordion>

      <Accordion title="Section 2">
        <Text>Content for section 2</Text>
      </Accordion>

      <Accordion title="Section 3">
        <Text>Content for section 3</Text>
      </Accordion>
    </>
  );
}

Advanced Usage​

Accordion with Toggle Callback​

import React, { useState } from "react";
import { Text } from "react-native";
import { Accordion } from "re-native-ui";

function AccordionWithCallback() {
  const [openSections, setOpenSections] = useState<string[]>([]);

  const handleToggle = (sectionId: string, isOpen: boolean) => {
    if (isOpen) {
      setOpenSections((prev) => [...prev, sectionId]);
    } else {
      setOpenSections((prev) => prev.filter((id) => id !== sectionId));
    }
  };

  return (
    <>
      <Accordion title="Section A" onToggle={(open) => handleToggle("A", open)}>
        <Text>Content for section A</Text>
      </Accordion>

      <Accordion title="Section B" onToggle={(open) => handleToggle("B", open)}>
        <Text>Content for section B</Text>
      </Accordion>

      <Text>Open sections: {openSections.join(", ")}</Text>
    </>
  );
}

Accordion with Complex Content​

import React from "react";
import { Text, View } from "react-native";
import { Accordion, Button, Divider } from "re-native-ui";

function ComplexAccordion() {
  return (
    <Accordion title="Advanced Settings">
      <View>
        <Text style={{ marginBottom: 16 }}>
          Configure advanced settings for your application.
        </Text>

        <Divider />

        <Text style={{ marginVertical: 8 }}>
          • Setting 1: Enable notifications
        </Text>
        <Text style={{ marginVertical: 8 }}>
          • Setting 2: Auto-save documents
        </Text>
        <Text style={{ marginVertical: 8 }}>
          • Setting 3: Dark mode preference
        </Text>

        <Divider />

        <Button
          onPress={() => console.log("Settings saved")}
          style={{ marginTop: 16 }}
        >
          Save Settings
        </Button>
      </View>
    </Accordion>
  );
}

Accessibility​

The Accordion component includes proper accessibility features:

  • Touch Target: The entire header is touchable with adequate size
  • Screen Reader Support: Proper accessibility labels and hints
  • Keyboard Navigation: Supports keyboard navigation
  • Focus Management: Proper focus handling during animations

Best Practices​

  1. Clear Titles: Use descriptive titles that indicate the content
  2. Appropriate Content: Don't put too much content in a single accordion
  3. Consistent Styling: Maintain consistent styling across accordions
  4. Performance: Avoid complex animations or heavy content in accordions
  5. User Experience: Consider whether content should be open by default
  • Container - For wrapping accordion content
  • Text - For accordion titles and content
  • Divider - For separating content within accordions
  • Stack - For organizing multiple accordions

API Reference​

AccordionProps​

interface AccordionProps {
  title: string;
  children: React.ReactNode;
  defaultOpen?: boolean;
  onToggle?: (open: boolean) => void;
  duration?: number;
  style?: ViewStyle;
  headerStyle?: ViewStyle;
  titleStyle?: TextStyle;
  contentStyle?: ViewStyle;
  arrow?: React.ReactNode;
}

Methods​

The component doesn't expose any public methods beyond the standard React component lifecycle methods.

Events​

  • onToggle: Fired when the accordion is expanded or collapsed