Accordion

A lightweight, animated Accordion component for React Native and React Native Web, supporting smooth expand/collapse transitions with automatic content height measurement.

🚀 Installation

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

📦 Usage

import React from "react";
import { Text } from "react-native";
import Accordion from "@chainplatform/accordion";

export default function Example() {
  return (
    <Accordion title="View Details" initiallyOpen>
      <Text>
        This is a simple accordion component. It animates height smoothly based
        on its content size.
      </Text>
      <Text>You can place any component inside it.</Text>
    </Accordion>
  );
}

⚙️ Props

| Prop | Type | Default | Description | |------|------|----------|-------------| | title | string | "Accordion Title" | Header text | | initiallyOpen | boolean | false | Whether it's expanded on mount | | duration | number | 250 | Animation duration in milliseconds | | titleStyle | object | undefined | Custom style for the title text | | contentStyle | object | undefined | Style for inner content | | iconStyle | object | undefined | Style for the arrow icon | | buttonStyle | object | undefined | Button style | | style | object | undefined | Container style |

💡 Features

• Smooth open/close animation using Animated
• Auto height measurement (no fixed height)
• Works on both React Native & Web
• Customizable styling
• Class-based component (for RN legacy compatibility)

🧩 Example Styles

<Accordion
  title="Course Information"
  style={{ borderColor: "#00C853" }}
  titleStyle={{ color: "#00C853" }}
>
  <Text>Instructor: John Doe</Text>
  <Text>Duration: 12 weeks</Text>
</Accordion>

🪪 License

MIT © 2025 Chain Platform

💖 Support & Donate

If you find this package helpful, consider supporting the development:

| Cryptocurrency | Address | |----------------|----------| | Bitcoin (BTC) | 17grbSNSEcEybS1nHh4TGYVodBwT16cWtc | | Ethereum (ETH) | 0xa2fd119a619908d53928e5848b49bf1cc15689d4 | | Tron (TRX) | TYL8p2PLCLDfq3CgGBp58WdUvvg9zsJ8pd | | DOGE (DOGE) | DDfKN2ys4frNaUkvPKcAdfL6SiVss5Bm19 | | USDT (SOLANA) | cPUZsb7T9tMfiZFqXbWbRvrUktxgZQXQ2Ni1HiVXgFm |

Your contribution helps maintain open-source development under the Chain Platform ecosystem 🚀