@atom_design/accordion

A highly customizable, accessible React Native Accordion component with smooth animations and support for single or multiple expansion.

Features

• 🎬 Smooth Animations: Built-in LayoutAnimation support
• 🔄 Single/Multiple Mode: Control expansion behavior
• 🎨 Fully Customizable: Style every part of the accordion
• 🔧 Custom Renderers: Render custom headers and content
• ♿ Accessible: Full accessibility support
• 🎯 TypeScript: Full TypeScript definitions included
• 📱 Cross-Platform: Works on iOS and Android

Installation

npm install @atom_design/accordion
# or
yarn add @atom_design/accordion

Peer Dependencies

npm install react react-native prop-types

Usage

Basic Usage

import Accordion from '@atom_design/accordion';

const items = [
  { title: 'Section 1', content: 'Content for section 1' },
  { title: 'Section 2', content: 'Content for section 2' },
  { title: 'Section 3', content: 'Content for section 3' },
];

<Accordion items={items} />

Multiple Expansion

<Accordion
  items={items}
  allowMultiple={true}
/>

Default Expanded Items

<Accordion
  items={items}
  defaultActiveIndexes={[0, 2]} // First and third items expanded
/>

With Change Handler

<Accordion
  items={items}
  onChange={(activeIndexes, toggledIndex) => {
    console.log('Active:', activeIndexes);
    console.log('Toggled:', toggledIndex);
  }}
/>

Custom Icons

import Icon from 'react-native-vector-icons/MaterialIcons';

<Accordion
  items={items}
  expandIcon={<Icon name="expand-more" size={24} color="#666" />}
  collapseIcon={<Icon name="expand-less" size={24} color="#666" />}
/>

// Or simple text/emoji
<Accordion
  items={items}
  expandIcon="▼"
  collapseIcon="▲"
/>

Custom Styling

<Accordion
  items={items}
  containerStyle={{ borderRadius: 12, borderColor: '#007AFF' }}
  headerStyle={{ backgroundColor: '#f0f8ff', padding: 20 }}
  activeHeaderStyle={{ backgroundColor: '#e0f0ff' }}
  titleStyle={{ color: '#007AFF', fontSize: 18 }}
  activeTitleStyle={{ fontWeight: 'bold' }}
  contentStyle={{ backgroundColor: '#fafafa', padding: 20 }}
  iconStyle={{ color: '#007AFF', fontSize: 24 }}
/>

Custom Header Renderer

<Accordion
  items={items}
  renderHeader={(item, index, isActive) => (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <Icon name={item.icon} size={24} />
      <Text style={{ marginLeft: 10, fontWeight: isActive ? 'bold' : 'normal' }}>
        {item.title}
      </Text>
      <Icon name={isActive ? 'chevron-up' : 'chevron-down'} size={20} />
    </View>
  )}
/>

Custom Content Renderer

<Accordion
  items={items}
  renderContent={(item, index) => (
    <View>
      <Image source={{ uri: item.image }} style={{ height: 150 }} />
      <Text>{item.description}</Text>
      <Button title="Learn More" onPress={() => navigate(item.link)} />
    </View>
  )}
/>

Disabled State

// Disable entire accordion
<Accordion items={items} disabled={true} />

// Disable individual items
const items = [
  { title: 'Active Item', content: 'Can be expanded' },
  { title: 'Disabled Item', content: 'Cannot be expanded', disabled: true },
];
<Accordion items={items} />

Without Animation

<Accordion items={items} animated={false} />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | AccordionItem[] | [] | Array of accordion items (required) | | allowMultiple | boolean | false | Allow multiple items expanded | | defaultActiveIndexes | number[] | [] | Initially expanded items | | onChange | (activeIndexes, toggledIndex) => void | - | Callback on state change | | animated | boolean | true | Enable/disable animations | | expandIcon | ReactNode | '+' | Icon for collapsed state | | collapseIcon | ReactNode | '−' | Icon for expanded state | | renderHeader | (item, index, isActive) => ReactNode | - | Custom header renderer | | renderContent | (item, index) => ReactNode | - | Custom content renderer | | headerStyle | StyleProp<ViewStyle> | - | Header container style | | contentStyle | StyleProp<ViewStyle> | - | Content container style | | titleStyle | StyleProp<TextStyle> | - | Title text style | | iconStyle | StyleProp<TextStyle> | - | Icon style | | containerStyle | StyleProp<ViewStyle> | - | Outer container style | | itemStyle | StyleProp<ViewStyle> | - | Each item wrapper style | | activeHeaderStyle | StyleProp<ViewStyle> | - | Active header style | | activeTitleStyle | StyleProp<TextStyle> | - | Active title style | | disabled | boolean | false | Disable entire accordion | | testID | string | - | Test ID for testing |

AccordionItem Interface

| Property | Type | Required | Description | |----------|------|----------|-------------| | id | string \| number | No | Unique identifier | | title | string | Yes | Header title text | | content | string | No | Content text | | disabled | boolean | No | Disable this item | | titleNumberOfLines | number | No | Max lines for title |

Accessibility

The Accordion component is fully accessible:

• Uses accessibilityRole="button" for headers
• Announces expanded/collapsed state
• Reports disabled state via accessibilityState
• Provides accessibilityHint for interaction guidance

Android Note

The component automatically enables LayoutAnimation on Android using UIManager.setLayoutAnimationEnabledExperimental(true). No additional setup required.

Full Test Screen Example

Copy this complete screen to test all accordion variations in your app:

import React, { useState } from 'react';
import { ScrollView, View, Text, StyleSheet, Alert, Image } from 'react-native';
import Accordion from '@atom_design/accordion';
// Optional: for custom icons
// import Icon from 'react-native-vector-icons/MaterialIcons';

const AccordionTestScreen = () => {
  const [activeItems, setActiveItems] = useState([]);

  // Basic items
  const basicItems = [
    {
      id: 1,
      title: 'What is React Native?',
      content: 'React Native is an open-source mobile application framework created by Facebook. It allows developers to use React along with native platform capabilities to build mobile applications.',
    },
    {
      id: 2,
      title: 'Why use Accordion components?',
      content: 'Accordion components help organize content in a compact, expandable format. They are ideal for FAQs, settings panels, and any content that benefits from progressive disclosure.',
    },
    {
      id: 3,
      title: 'How does animation work?',
      content: 'This accordion uses React Native\'s LayoutAnimation API for smooth expand/collapse transitions. It automatically enables experimental features on Android for consistent behavior.',
    },
  ];

  // Items with different content lengths
  const variableItems = [
    {
      id: 'short',
      title: 'Short Content',
      content: 'Just a brief note.',
    },
    {
      id: 'medium',
      title: 'Medium Content',
      content: 'This is a medium-length content block that provides more context and information about the topic at hand. It demonstrates how the accordion handles varying content sizes.',
    },
    {
      id: 'long',
      title: 'Long Content',
      content: 'This is a much longer content block that contains extensive information. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
    },
  ];

  // Items with disabled state
  const mixedItems = [
    { id: 1, title: 'Enabled Item 1', content: 'This item can be expanded.' },
    { id: 2, title: 'Disabled Item', content: 'This content is hidden.', disabled: true },
    { id: 3, title: 'Enabled Item 2', content: 'This item can also be expanded.' },
  ];

  // FAQ-style items
  const faqItems = [
    {
      id: 'faq1',
      title: 'How do I install this package?',
      content: 'Run npm install @atom_design/accordion or yarn add @atom_design/accordion in your project directory.',
    },
    {
      id: 'faq2',
      title: 'Is TypeScript supported?',
      content: 'Yes! Full TypeScript definitions are included with the package.',
    },
    {
      id: 'faq3',
      title: 'Can I customize the icons?',
      content: 'Absolutely! Use expandIcon and collapseIcon props with any React component or text.',
    },
    {
      id: 'faq4',
      title: 'Does it work on Android?',
      content: 'Yes, it works on both iOS and Android with automatic LayoutAnimation setup.',
    },
  ];

  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
      <Text style={styles.title}>@atom_design/accordion</Text>
      <Text style={styles.subtitle}>Complete Component Test</Text>

      {/* BASIC SECTION */}
      <Text style={styles.sectionTitle}>Basic Accordion (Single Mode)</Text>
      <Accordion items={basicItems} />

      {/* MULTIPLE MODE */}
      <Text style={styles.sectionTitle}>Multiple Expansion Mode</Text>
      <Accordion
        items={basicItems}
        allowMultiple={true}
        onChange={(indexes, toggled) => {
          console.log('Active indexes:', indexes);
        }}
      />

      {/* DEFAULT EXPANDED */}
      <Text style={styles.sectionTitle}>Default Expanded (First Item)</Text>
      <Accordion
        items={basicItems}
        defaultActiveIndexes={[0]}
      />

      {/* VARIABLE CONTENT */}
      <Text style={styles.sectionTitle}>Variable Content Lengths</Text>
      <Accordion items={variableItems} />

      {/* CUSTOM ICONS */}
      <Text style={styles.sectionTitle}>Custom Icons</Text>
      <Accordion
        items={basicItems.slice(0, 2)}
        expandIcon="▼"
        collapseIcon="▲"
      />

      {/* STYLED ACCORDION */}
      <Text style={styles.sectionTitle}>Custom Styling</Text>
      <Accordion
        items={faqItems}
        containerStyle={styles.styledContainer}
        headerStyle={styles.styledHeader}
        activeHeaderStyle={styles.styledActiveHeader}
        titleStyle={styles.styledTitle}
        activeTitleStyle={styles.styledActiveTitle}
        contentStyle={styles.styledContent}
        iconStyle={styles.styledIcon}
      />

      {/* DISABLED ITEMS */}
      <Text style={styles.sectionTitle}>Mixed Enabled/Disabled Items</Text>
      <Accordion items={mixedItems} />

      {/* FULLY DISABLED */}
      <Text style={styles.sectionTitle}>Fully Disabled Accordion</Text>
      <Accordion items={basicItems.slice(0, 2)} disabled={true} />

      {/* NO ANIMATION */}
      <Text style={styles.sectionTitle}>Without Animation</Text>
      <Accordion
        items={basicItems.slice(0, 2)}
        animated={false}
      />

      {/* WITH CHANGE HANDLER */}
      <Text style={styles.sectionTitle}>With Change Handler</Text>
      <Text style={styles.info}>Active: [{activeItems.join(', ')}]</Text>
      <Accordion
        items={basicItems}
        allowMultiple={true}
        onChange={(indexes) => setActiveItems(indexes)}
      />

      {/* CUSTOM CONTENT RENDERER */}
      <Text style={styles.sectionTitle}>Custom Content Renderer</Text>
      <Accordion
        items={[
          { id: 1, title: 'Rich Content Example', imageUrl: 'https://via.placeholder.com/300x100' },
          { id: 2, title: 'Another Rich Example', imageUrl: 'https://via.placeholder.com/300x100' },
        ]}
        renderContent={(item) => (
          <View style={styles.customContent}>
            <Image
              source={{ uri: item.imageUrl }}
              style={styles.customImage}
              resizeMode="cover"
            />
            <Text style={styles.customText}>
              This is custom rendered content with an image!
            </Text>
            <View style={styles.customButton}>
              <Text style={styles.customButtonText}>Learn More</Text>
            </View>
          </View>
        )}
      />

      {/* CUSTOM HEADER RENDERER */}
      <Text style={styles.sectionTitle}>Custom Header Renderer</Text>
      <Accordion
        items={[
          { id: 1, title: 'Custom Header 1', emoji: '🚀', content: 'Rocket content here!' },
          { id: 2, title: 'Custom Header 2', emoji: '⭐', content: 'Star content here!' },
          { id: 3, title: 'Custom Header 3', emoji: '🎉', content: 'Party content here!' },
        ]}
        renderHeader={(item, index, isActive) => (
          <View style={styles.customHeader}>
            <Text style={styles.emoji}>{item.emoji}</Text>
            <Text style={[styles.customHeaderTitle, isActive && styles.customHeaderActive]}>
              {item.title}
            </Text>
            <Text style={styles.customHeaderIcon}>{isActive ? '▲' : '▼'}</Text>
          </View>
        )}
      />

      {/* FAQ STYLE */}
      <Text style={styles.sectionTitle}>FAQ Style</Text>
      <Accordion
        items={faqItems}
        containerStyle={styles.faqContainer}
        headerStyle={styles.faqHeader}
        titleStyle={styles.faqTitle}
        contentStyle={styles.faqContent}
        expandIcon="❓"
        collapseIcon="✓"
      />

      <View style={{ height: 50 }} />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 5,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 30,
    color: '#666',
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginTop: 30,
    marginBottom: 15,
    color: '#333',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    paddingBottom: 5,
  },
  info: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
    fontFamily: 'monospace',
  },

  // Styled accordion
  styledContainer: {
    borderRadius: 12,
    borderColor: '#007AFF',
    borderWidth: 2,
  },
  styledHeader: {
    backgroundColor: '#f0f8ff',
    paddingVertical: 18,
  },
  styledActiveHeader: {
    backgroundColor: '#e0f0ff',
  },
  styledTitle: {
    color: '#007AFF',
    fontSize: 16,
  },
  styledActiveTitle: {
    fontWeight: 'bold',
  },
  styledContent: {
    backgroundColor: '#fafafa',
  },
  styledIcon: {
    color: '#007AFF',
    fontSize: 22,
  },

  // Custom content
  customContent: {
    alignItems: 'center',
  },
  customImage: {
    width: '100%',
    height: 100,
    borderRadius: 8,
    marginBottom: 10,
  },
  customText: {
    fontSize: 14,
    color: '#666',
    textAlign: 'center',
    marginBottom: 10,
  },
  customButton: {
    backgroundColor: '#d9232d',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 6,
  },
  customButtonText: {
    color: '#fff',
    fontWeight: '600',
  },

  // Custom header
  customHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  emoji: {
    fontSize: 24,
    marginRight: 12,
  },
  customHeaderTitle: {
    flex: 1,
    fontSize: 16,
    color: '#333',
  },
  customHeaderActive: {
    fontWeight: 'bold',
    color: '#d9232d',
  },
  customHeaderIcon: {
    fontSize: 14,
    color: '#666',
  },

  // FAQ style
  faqContainer: {
    borderRadius: 12,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  faqHeader: {
    backgroundColor: '#fff',
    paddingVertical: 18,
  },
  faqTitle: {
    fontSize: 15,
    color: '#444',
  },
  faqContent: {
    backgroundColor: '#f9f9f9',
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
});

export default AccordionTestScreen;

Usage in Your App

// App.js or navigation screen
import AccordionTestScreen from './AccordionTestScreen';

// In your navigator or directly
<AccordionTestScreen />

License

MIT © Atom Design