AccordionList

The AccordionList component is designed for displaying a collection of collapsible items, making it easy to organize and present information in a structured manner. This component supports single or multiple expansion modes and can be customized using various props and styles to suit different design requirements.

Import

import { AccordionList } from "phaselis";

Usage

Basic AccordionList

import { AccordionList } from "phaselis";
import { Text } from "react-native";

const Example = () => {
  return (
    <AccordionList
      data={[
        { header: "Section 1", child: <Text>Details for section 1</Text> },
        { header: "Section 2", child: <Text>Details for section 2</Text> },
        { header: "Section 3", child: <Text>Details for section 3</Text> },
      ]}
    />
  );
};

export default Example;

Props

data

{ header: string; child: ReactNode }[]

An array of objects where each object represents an accordion item. The header key is used to display the header text of the item, and the child key represents the content that will be revealed when the item is expanded.

import { Text } from "react-native";

const data = [
  { header: "Introduction", child: <Text>Welcome to our guide!</Text> },
  { header: "Details", child: <Text>Here are some detailed explanations.</Text> },
];

expandMode

single | multiple

Defines the behavior for item expansion. If set to "single", only one item can be expanded at a time. If set to "multiple", multiple items can be expanded simultaneously.

import { Text } from "react-native";

<AccordionList
  data={[
    { header: "Section 1", child: <Text>Details for section 1</Text> },
    { header: "Section 2", child: <Text>Details for section 2</Text> },
    { header: "Section 3", child: <Text>Details for section 3</Text> },
  ]}
  expandMode="multiple"
/>

defaultExpandedIndex

number[]

Specifies the indices of items that should be expanded by default when the component is rendered.

import { Text } from "react-native";

<AccordionList
  data={[
    { header: "Section 1", child: <Text>Details for section 1</Text> },
    { header: "Section 2", child: <Text>Details for section 2</Text> },
    { header: "Section 3", child: <Text>Details for section 3</Text> },
    { header: "Section 4", child: <Text>Details for section 4</Text> },
  ]}
  defaultExpandedIndex={[0, 2]}
/>

onChange

(index: number) => void

A callback function that is triggered when an accordion item is expanded or collapsed. It receives the index of the item that was toggled as a parameter.

import { Text } from "react-native";

<AccordionList
  onChange={(index) => console.log("Toggled item at index:", index)}
  data={[
    { header: "Section 1", child: <Text>Details for section 1</Text> },
    { header: "Section 2", child: <Text>Details for section 2</Text> },
  ]}
/>

style

Name	Type	Description
container	ViewStyle	Style for the outer container of the accordion list.
element	ViewStyle	Style for the individual accordion item elements.

You can style the AccordionList with the style prop using either an object with named styles or directly provide ViewStyle properties that will be applied to the element (FlatList).

import { Text } from "react-native";

// Object with named styles
<AccordionList
  style={{
    container: { borderColor: "#ddd", borderWidth: 1, padding: 10 },
    element: { backgroundColor: "#f7f7f7", marginBottom: 5 },
  }}
  data={[
    { header: "Section 1", child: <Text>Details for section 1</Text> },
    { header: "Section 2", child: <Text>Details for section 2</Text> },
  ]}
/>

// Direct element styling
<AccordionList
  style={{ backgroundColor: "#f8f9fa", borderRadius: 8, padding: 8 }}
  data={[
    { header: "Section 1", child: <Text>Details for section 1</Text> },
    { header: "Section 2", child: <Text>Details for section 2</Text> },
  ]}
/>