@atom-design-mog/accordions

A simple and smooth Accordion / Expandable List component for React Native with optional multi-expand support and built-in animation using LayoutAnimation.

📦 Installation

Install with npm:

npm install @atom-design-mog/accordions

Or with yarn:

yarn add @atom-design-mog/accordions

📲 Import

import Accordion from '@atom-design-mog/accordions';

🚀 Basic Usage

import React from 'react';
import { View } from 'react-native';
import Accordion from '@atom-design-mog/accordions';

export default function App() {
  const AccordionItems = [
    { title: 'Accordion 1', content: 'Content for item 1' },
    { title: 'Accordion 2', content: 'Content for item 2' },
  ];

  return (
    <View style={{ padding: 20 }}>
      <Accordion items={AccordionItems} allowMultiple={false} />
    </View>
  );
}

🎛 Variants

• allowMultiple = false (default) — Only one accordion item stays open at a time.
• allowMultiple = true — Multiple accordion items can be expanded simultaneously.

🧪 Full Demo (as used in testing)

import React from 'react';
import { View, Text, ScrollView } from 'react-native';
import Accordion from '@atom-design-mog/accordions';

export default function TestAccordionsScreen() {
  const AccordionItems = [
    { title: 'This is Accordion 1', content: 'Content for Item 1: Lorem ipsum' },
    { title: 'This is Accordion 2', content: 'Content for Item 2: Sed do eiusmod tempor.' },
    { title: 'This is Accordion 3', content: 'Content for Item 3: Ut enim ad minim veniam.' },
  ];

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={{ padding: 20, gap: 20 }}>
        <Text>Single Accordion</Text>
        <Accordion items={AccordionItems} allowMultiple={false} />

        <Text>Multiple Accordion</Text>
        <Accordion items={AccordionItems} allowMultiple={true} />
      </View>
    </ScrollView>
  );
}

📘 Props

| Prop | Type | Required | Description | | ----------------- | ----------------------------------------- | -------- | ------------------------------------------------------------------- | | items | Array<{title: string, content: string}> | ✔️ Yes | Items to display in accordion. | | allowMultiple | boolean | ✖️ No | Allow multiple accordion items to expand at once. Default: false. | | ...props | any | ✖️ No | Additional props passed to the container. |

✨ Features

• Smooth expand / collapse animation using LayoutAnimation
• Clean, modern UI consistent with Atom design
• Supports single or multi expand behavior
• Lightweight and easy to integrate
• Works across React Native versions

👤 Author

Avi Gupta